06 Dec

That is because this article is factually inaccurate.

That is because this article is factually inaccurate. Webpack module bundling does not even remotely work the way described, there is no performance or size benefit between named and default exports as unfortunately, in both scenarios webpack imports t...

04 Oct

Sorry, an FE designer is the guy that works in photoshop, he does not write code, so you really are…

Sorry, an FE designer is the guy that works in photoshop, he does not write code, so you really are detracting from the value of the contribution of the CSS/UI Developer by calling him a designer as you are explicitly referring that he/she does not write code.

Would be much better to use the current market term of UI developer, but as you said you suck at research, otherwise you would have come across this, or even consider something more verbose as Frontend Visual Developer which makes the flip side and easy Frontend Functional Developer

04 Oct

Sorry, an FE designer is the guy that works in photoshop, he does not write code, so you really are…

Sorry, an FE designer is the guy that works in photoshop, he does not write code, so you really are detracting from the value of the contribution of the CSS/UI Developer by calling him a designer as you are explicitly referring that he/she does not write code.

Would be much better to use the current market term of UI developer, but as you said you suck at research, otherwise you would have come across this, or even consider something more verbose as Frontend Visual Developer which makes the flip side and easy Frontend Functional Developer

14 Jul

Progressive Web App with Webpack

Depending on your web application, a progressive web app may not be essential, but it may be useful to some of your users. Going PWA allows your users to save a subset of your website directly on their mobile device to be able to use it off-line.

All you need to make this work is that you site is HTTPS, a manifest.json file and to register a service working within your current application. With a little bit of time these can quite easily be created manually, however I am going to focus purely on using webpack as a means of integrating it with your existing build process. Similar approaches can be used with gulp/grunt.

Once setup your site will register as a PWA and on supporting mobile devices/browsers, users will even be prompted to save your app to their home screen, effectively installing it.

What we going to configure is 2 small webpack plugins that will generate the service worker and manifest required for a PWA to be registers.

The service worker will configure how your PWA is to function, what assets and URL’s are to be cached and so on.

The manifest file provides additional instructions and theming to the application, this is the essential piece if you wish users to be prompted to save your application on their devices.

Setup

To get started simply install sw-precache-webpack-plugin and webpack-pwa-manifest.

npm i sw-precache-webpack-plugin webpack-pwa-manifest -Dyarn add sw-precache-webpack-plugin webpack-pwa-manifest --dev

In your webpack prod/dist config you then simply require these new modules:

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');const WebpackPwaManifest = require('webpack-pwa-manifest');

Optionally you can also define a PUBLIC_PATH variable, this is used as part of the ServiceWorker config caching your domain name for later use.

const PUBLIC_PATH = 'https://www.my-domain.com/';
Service Worker config

Add a config similar to below at the end of your current webpack plugins array:

 new SWPrecacheWebpackPlugin( { cacheId: 'my-domain-cache-id', dontCacheBustUrlsMatching: /\.\w{8}\./, filename: 'service-worker.js', minify: true, navigateFallback: PUBLIC_PATH + 'index.html', staticFileGlobsIgnorePatterns: [/\.map$/, /manifest\.json$/] } ),

As you can see it is pretty strait forward, only thing that really benefits from updating would the cacheId. Additional plugin options for more advanced usage or extra info can be found at SW Precache Webpack Plugin Github.

Manifest config

Just like the service working, you include another plugin config at the bottom of your webpack plugins array, this will provide you all of your aesthetic options for the offline application.

 new WebpackPwaManifest({ name: 'My Applications Friendly Name', short_name: 'Application', description: 'Description!', background_color: '#01579b', theme_color: '#01579b', 'theme-color': '#01579b', start_url: '/', icons: [ { src: path.resolve('src/images/icon.png'), sizes: [96, 128, 192, 256, 384, 512], destination: path.join('assets', 'icons') } ] })
Things to note…

short_name: This is the name underneath the icon, keep this under 12 characters long.

background_color, theme-color and theme_color are all part of theming options for your manifest. The 2 theme versions are for different browser support, those will be styling the address bar.

icons: here you can provide multiple objects in the array, useful if you wish to provide a different icons for iOS and Android. More details on that Webpack PWA Github.I simply added in a singe set WPWA will generate icons at all the sizes provided in the sizes array and place then defined destination path.

Output

One last thing to do before we finish up, you need to add a publicPath key to your existing output object and set it to the PUBLIC_PATH const defined earlier.

  output: { // Snip publicPath: PUBLIC_PATH  },
Registering your worker

Now that your webpack is all setup, once final piece of code needs to be added to your project.

Within you applications main js file, you need to add in this Immediately Invoked Function.

(function () {
 if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js', {scope: '/'})
.then(() => console.log('Service Worker registered successfully.'))
.catch(error => console.log('Service Worker registration failed:', error));
}})();

This will check if the browser your visitor is using supports service workers, and if so registers your service-worker.js.

Your website, at least to some extent, will now be available offline and can be saved as a PWA on the users device, after their next visit.

If you run your build process now you should see a few icons as well as a service-worker.js and amanifest.[hash].json in your public/dist folder.

Google created a Chrome plugin that you can use to test your implementation, Lighthouse.

Also in chrome developers tools > Audit you should be able to see both your service worker and manifest registered within their respective Application menu items.

Here is what the PWA’ of my own portfolio site’s initial screen looks like. As you can see the Blue theming. My Icon in the middle as applications name at the bottom.

Thanks for reading, and I hope you found this useful.

RemeJuan/progressive-web-app-starter

Progressive Web App with Webpack was originally published in codeburst on Medium, where people are continuing the conversation by highlighting and responding to this story.

11 Jul

Wine Adventure Trail Run @ Warwick Wine Estate

We all knew it would be a wet day, from a week before the race the weather was already predicting upwards of 70% rain showers, steadily increasing as the days went on, by Saturday it was sitting at 93% so there was no doubt.

Photo by Chris Hitchcock

Around sunset Saturday evening it started pouring, and my never tested Waterproof Running jacket was added to race prep pile. After all, what is heavy rain shower to a real trail runner (guess I am one now).

Fast forward to Sunday morning and as best I could tell the rain had not let up much if at all, the wine farm was nothing but mud as far as the eyes could see, and yet plenty a runner had arrived, sporting all their colourful raincoats, and few more crazy ones dressed as if it where a summers day.

Having never run in such conditions before, I had no idea what to expect, and that pretty much added to the excitement, only 1 small change in the goals for the day, forget the time target and make down in one piece. Awesomely enough I had only missed what would been my target by about 3 minutes.

Nearing the finish line.

As it turns out, at least 78 other runners had arrived for the wet, wet, wet 15km run, and while I cannot speak for all of the rest, I most certainly hope they enjoyed it as much as I did, a familiar route, made more spectacular by a hole new perspective.

Thanks to the winter season now, in a few days time my shoes, that are now clean, should be dry enough for my next run. Part of me even hopes that for my next race, in about 2 weeks time, the weather tosses in a good downpour just for the funzies.

Wine Adventure Trail Run @ Warwick - Reme Le Hane's 14.3 km run

Help me as I raise fund for the animals while I run for the Cape of Good Hope SPCA in the Sanlam Cape Town peace Trail Run 22km.

Running for the animals

Wine Adventure Trail Run @ Warwick Wine Estate was originally published in Running For A Cause on Medium, where people are continuing the conversation by highlighting and responding to this story.