Installing puppeteer installs a local-chromium which is of size 292MB.
Generating PDF with HTML is the only feature that I'm using with puppeteer for now.
Is there a way to lower the size of npm?
You can reduce half of the size be deleting "interactive_ui_tests.exe", it seems something that you don't need to run Puppeteer correctly. I do it on my daily scenarios with no problems.
There is also a discussion about this on Github
Related
gulp.browersync is like black magic to me. I want to understand the technique it used.
In css-injection, how does the browser know css file is changed? Why can it redraw the page without refresh? Why is it not the case for .html/.js update?
When there are multiple browsers open the sync-ed page, if scroll down in one, others follow. Why? What actions can be sync-ed, and what not? It is really amazing.
To my understading Browsersync is a service that does a few things...
The black magic occurs when it injects a Javascript file in your page (see the source code of your page). How? It's listening connections in a specific port (creating a proxy server) and then modifiying your page.
The injected JS listens to the commands that the service is sending, through techniques like web sockets... or simple async requests for older browsers I think...
For example, when you move your mouse, it send to the other pages a similar command to replicate the state...
Also Browsersync, if running, keeps watching the files you specify to watch, CSS files for example... and sends the needed commands if those files are changed.
Many automation tools like Grunt or Gulp could integrate with it to get the coolest development workflow you can imagine... Testing multiple devices, rebuilding caches and more...
And yes... it's like black magic :D
See Browsersync requests in action here: https://webmshare.com/ovwGg
I am also new to browsersync, what I found so far is listed below:
BrowserSync is an automation tool that makes web development faster.
BrowserSync lets you launch a local web server around the working directory so the target page and its related files can instantly be accessed on all devices connected to your home network by pointing them to a localhost URL. Furthermore, it supports live reloading, so any changes you make to the page or its CSS triggers a refresh of the browser on all connected devices for you to preview.
BrowserSync is like a LiveReload (it watches for changes you make to a web page and automatically updates the browser), except that it also works across multiple devices.
BrowserSync that being able to scroll inside one browser and see that action mirrored in all others.
The Action Sync feature (enabled by default) will copy scroll position, clicks and form inputs from one browser to all of the others that are connected.
Some useful links:
https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development
http://www.javascriptkit.com/howto/mobilefriendly2.shtml
http://www.creativebloq.com/web-design/test-your-sites-multiple-devices-81516496
I have one issue faced during working with browsersync, if anyone here interested to answer can visit the link: How to sync the actions performed on webpage using Browsersync?.
I am using the following tag to prerender:
<link rel="prerender" href="//address.se/sv/get-started.html">
I am running the website locally at the moment. Is there any test I can run (perhaps via the chrome inspector) to see if my browser finds and prerenders the file?
Yes you can test if prerender is happening locally, though it is little harder and requires tools beyond the regular developers tools.
Notice that at the time this question was asked, prerender was doing something different than what it does now, previously it used to prerender the whole page in a hidden renderer process, now it does something less powerful than that (NoState Prefetch)
To check what has been pre-rendered:
go to chrome://net-export/ ( this will export a log of all the network activities happening from all chrome windows, apps, and extensions)
go to the website where you want to check prerendering, give it some time to idle and do the prerendering
save the json file from the net export page, and load it into https://netlog-viewer.appspot.com/
After its loaded, check the Prerender page found in the menu in the left side
I've got a small problem on my site which hopefully you fine folk can help with. In order to improve Google page load speeds on my site (wheelingit.us) I installed browser caching in my .htaccess file according to this link:
http://wiki.dreamhost.com/Htaccess_tricks#Faster_Page_Load_Times_.2F_Bandwidth_Saver
My pagespeed definitely improved. However now I notice that when I change css styling or update text in one of the side-widgets it doesn't show on my web page. I'm thinking this is linked to the browser caching?
Anyway to make my css & widget box text changes appear on the page while still taking advantage of the browser caching? Or do I need to remove the browser caching altogether?
Nina
You can always add a query string to your .css file that you can force to update when you make changes.
something like stylesheet.css?v=1.0.
You can then just increment the v when you made changes.
After our discussion, it seems that you are using a Varnish - server-side- caching solution for performance optimization of your Wordpress site. Doing a purge on the plugin's cache should solve the issue.
To purge all CSS files from cache manually, open a command or terminal console and type:
$ curl -X PURGE "http://example.com/wp-content/themes/.*\.css"
You can follow instructions here for more examples:
http://wiki.dreamhost.com/DreamPress#Manually_Purging_the_Varnish_Cache_Via_SSH
There are other wordpress plugins that can help you do this, but they require you to install them which may be more overhead than required:
https://wordpress.org/plugins/varnish-http-purge/
I am just creating app package and got the following error
Need help how to resolve this.
In my case it had to do with the default app scale, as outlined in this blog post:
It appears that the default scale has changed [from 100%] to 200%. OK. Fine.
And? Why does that matter?
It matters because the main app package contains resources for
whatever the default scale is. And for UWP, the default is 200. Since
I use app bundles, my Logo-100.png ended up in a satellite app
package, and the main package does not have any logo (since I didn't
provide the default 200). Hence, my app would not be installable on a
system that requires scale-200.
When I renamed the file to Logo.png, the editor complained because it
assumed that images without qualifiers were in the default scale
(200), and my logo didn't have the correct dimensions for that scale.
There is an explanation for this in the , but it is a
little buried:
"The default asset scale for Universal Windows apps is 200. If your
project includes assets not scaled at 200, you will need to add a
<UapDefaultAssetScale> element with the value of the scale of your
assets to this PropertyGroup. Learn more about assets and scales."
So what you need to do is either change your images to the correct scale and rename their suffix accordingly (e.g. scale-200), or change the default scale by opening the .csproj file in a text editor and following the instructions in the porting article linked in said blog post:
Find the <PropertyGroup> element that contains the
<TargetPlatformVersion> element. Do the
following steps for this <PropertyGroup> element
The default asset scale for Universal Windows apps is 200. If your
project includes assets not scaled at 200, you will need to add a
element with the value of the scale of your
assets to this PropertyGroup. Learn more about assets and scales. Now
your element should look similar to this example:
<PropertyGroup>
…
<TargetPlatformVersion>10.0.10240.0</TargetPlatformVersion>
…
<UapDefaultAssetScale>100</UapDefaultAssetScale>
…
</PropertyGroup>
I resolved it by removing .scale-100 for your Logos name.This works for me.
I resolved this by making sure I had separate image files for all scale sizes. (ie. .scale-100, .scale-140, .scale-240)
The default size is Scale 200. If you didn't include that image, Visual Studio notifies you of this. So include an image asset for Scale 200
I was able to solve this by ending the laziness. Delete all the images that you had setup, START COMPLETELY OVER, re-assign ALL images - all 3 images for each row- set them all. That's the only way you'll know for sure that you're good to go.
I solved the problem by changing the name of the logo in the AppManifest.
For example, if you had the error on the Store Logo in the Appmanifest ==> Store Logo ==> Store Logo : Assets/Store-Logo
Change it to Assets/Store-Logoooo
then also change Store Images in the main app.
For everyone.
From unity remove all windows icons (PLayer settings/Windows/Icons). [important]
Will problem
In Unity. Add Splash screens for windows [important]
In Visual Studio - generate manifest all images from standard tool. [important]
If you already have "Assets" folder - remove; And generate.
It only works like this.
In some case the solution of renaming the images in the assets folder doesn't work out.
In that case, you should set the "Generate App Bundle" option at "Never" and continue normally with the rest of the packaging procedure.
Though this is not a permanent solution, it is a good work-around and is pretty useful if you don't necessarily want App bundles for reducing size.
Sources : Personal experience of solving this error and searching the solution on-line and finding that it worked for other users as well : https://social.msdn.microsoft.com/Forums/en-US/3857fb9d-dbd5-4eb8-aa75-fe4c47f26875/wp81-universal-error-image-does-not-have-a-candidate-in-main-app-package-while-creating-a-package?forum=WindowsPhonePreviewSDK
Visual Studio 2022 (for a desktop app): added all images the required sizes, and still got this message. Solved it by first generating all images from a base image, using the "Generate" button. Then replaced the (awful and mis-scaled) results with my own versions. Then it worked. Apparently the form that allows you to add the images is not complete, or has a mismatch with what is actually required. First using the generate option circumvents trouble.
I need to create a brochure-cd from a website I did. All resources are html, images and xml, so i don't have any problem at all in accessing file system. My question is: once I open my index.html page in browser, how can I set the params of the window (eg: show addressbar, show statusbar, etc)
Thanks
(If you have an alternative idea of how run an html based brochure on CD just let me know)
EDIT: Specs changed, I've just knewn I must write xml and upload file, too. Any idea? I'm considering Adobe Air, but would be amazing if I can compile a whole .NET website into an exe..... Anything similar?
The only way you can set these is when you open the page, not after it's already present. So, you will probably have to have a start page, which then opens your new page, with the parameters you want.
Be warned though, if you have any JavaScript, many browsers won't allow scripts to run locally, or will present a nasty warning message before it will execute.
You may look into having a small desktop application on the CD that launches an instance of a browser inside of itself, assuming you can run the browser on every machine this will be run on. This will probably give you the look you're after.
I think you can't. You can only set params of a window you create. So you'll have to run a script on load that creates a new window and then closes the initial window.
There is however no way that this script is executed without warnings, if at all.
An alternative would be to develop an executable that is able to display the page, but that might not be easy, especially when you want to be browser and platform independent.