Today’s Readings

Well this is sort the last thing HTML5 needs: Researchers prove HTML5 can be used to hide malware.

Here is a fun, if not lengthy, look at Web Design: The First 100 Years from . has his favorite quotes, but my fave is:

As soon as a system shows signs of performance, developers will add enough abstraction to make it borderline unusable. Software forever remains at the limits of what people will put up with.

walks us through the myriad options for trying to get a “sticky” element to “stick”, cross-browser.

“Sticking” (chuckle) with Dudley for another sec, let’s learn more about CSS shapes and masks!

Here are 11 customizations you can make to make your WordPress site seem a little less WordPressy.

Then run through this Ultimate Mega Guide to Speeding Up WordPress. Wow, that’s a serious collection…

Nth-Test is brilliant. So simple and so useful! And as says, “Considering that the way I figure out nth-child selectors is to try randomly changing numbers until it works, this should be quite useful for me.“… So I’m not the only one… :-)

From comes 5 new things browsers can do in 2015. Cool stuff!

And even more cool stuff is coming to browsers soon!

Here are 10 reasons to use Microsoft Edge. All interesting functionality. And none of them are going to get me to use Edge…

And as long as we’re talking about numbered-lists of Microsoft things… Here are 10 tools that fix common Windows frustrations! :-) The first couple are not that inspiring, but there are some good ones in there.

Two videos to introduce you to, and show you how to implement, HTTPS.

grunt-perfbudget is a Grunt task for enforcing a performance budget via WebPageTest. Thanks to for the link!

Should dwell time (aka engagement) be considered a bad thing? Maybe…

Usernames, passwords, command line commands, procedure steps… As developers, we have to remember a lot of crap. So how do you remember it all? I’m with this article: I don’t. Nearly everything that I have to do that isn’t just dead-easy (and even most stuff that is), is documented in a text file that is synced between two computers via Dropbox. What’s your strategy?

This Map Shows Which Countries Have Most People Online? The map should not surprise you, and it would be interesting to see average bandwidth speeds for each of those countries.

Wow, a nice, deep-dive into currying with JavaScript.

I get what the author of Stop Gratuitous UI Animation is getting at, but in the end, all their alterations did was change the loader to a different loader, and change the animation to a different animation. The point that some animation is useless is still valid, however.

And finally, if you’ve ever watched a Looney Tunes cartoon, such as Bugs Bunny, Daffy Duck, Road Runner, Pepe le Pew, etc., then you should know the name . He was the animator extraordinaire! And here is a short YouTube video describing, discussing, and displaying his brilliance, and the source of his brilliance: knowledge, which leads to inspiration…

Happy reading,
Atg

Today’s Readings

The only way this PS shortcut cheatsheet could make things any easier is if they came imprinted on a keyboard. Or, I guess, if I could just think them… That would definitely be easier… ;-)

And as long as we’re cheating, how about a jQuery event cheatsheet? Bet there are at least a couple you weren’t familiar with on there…

Or the opposite of a cheatsheet, here’s just everything ever conceived about functional programming in JavaScript, in long form… Quite the read, and certainly more than adequate…

has compiled a cheatsheet, of sorts, for asset handover. I would personally like to +1 #2…

Leave it to to come up with M.C. Escher patterns as SVG backgrounds… But come on, Dudley, how about a real challenge??? ;-P

Sticking with SVGs, but moving into animation, presents SVG Sprites for Animation. Great walk-through, explaining the parallels to web animation and old-school cel animation.

Ok, this is a little bit of a mind-blower:

Smartphone Test Farm: Remote control any device from your browser in realtime. Manage device inventory. Type text directly from your keyboard.

Can it really be that easy???

Some very basic, but powerful, .htaccess security bits for WordPress. If you don’t have these in your system somehow, add them.

This Zero to Hero with JavaScript video series covers tremendous ground, from JS fundamentals, to jQuery, to Node, to Angular and React, to ES6. Dig in!!

Not sure how many drummers there are reading this, but Sensory Percussion lets real drums play any kind of electronic beat. Way beyond what normal electronic drums or triggers can do!

From comes a deep discussion piece on preprocessors. Are they good, bad, neither? Evil necessity?? Is anyone still not using one???

Several probably well-known image optimization options, but it can never hurt to look them over, you never know what you might not have seen yet.

Or you could take all your images and push them into what looks like a video! Granted, the “video” isn’t all that smooth, and granted, there are a lot of images contributing to that final “video”, but the technology is impressive nonetheless!

I would love to work at a place someday that plans this much. And before anyone says “Well why don’t you just do it?”, because one person doesn’t just do something like this; it takes planning, and buy-in, and commitment, from all parties concerned. But when you’re done, what you have is a brilliantly simplistic way for new-comers to get started, and contribute more quickly, and all employees to work together more harmoniously.

And finally, deep wisdom, from short words: developer proverbs

Happy reading,
Atg

A better Windows command line experience using Console2

In my day-to-day work, I use a Windows PC (that’s what they offer). I also use the command line for several operations, like running local servers (Jetty for one project, Tomcat for another), using Grunt to monitor my Less files and update my local CSS files (one project uses Grunt directly, another uses Maven to run Grunt), and both of those projects use Git as a repo and to trigger continuous integration and deployment. Yes, all of that, every day.

So, with all of the above happening at the same time, I typically have at least six Windows command line windows open. And bouncing between them just gets annoying. So, a couple times before I have tried looking for some way to unify all those individual command line windows into a single, tabbed application, but had not found anything that I loved. Until now.

One of my biggest gripes with what I tried before was that all the tabs had the exact same, nondescript name, usually something like “Cmd”… Of course, if I open them all in the same order every day, it wouldn’t be that hard to memorize which was which, but its the fact that bothers me…

So today I installed Console2 (I’m not sure why searches for Console2 list this product page, which says just Console, but the Download button URL links to Console2, and that’s what the product downloads as… whatever.).

Initially I had the same tab-name problem: all tabs got the same name (I think it was “Console”)… But then I dug into the Settings panel a little (Edit > Settings, or Ctrl+S)…

Not only can you customize the name of each tab, but you can create a list of tabs, each with their own custom name, directory to automatically open that tab to, Shell script to run as soon as that tab opens, icon to use for that tab, and more! You can even customize the keyboard shortcuts to match what you are likely already used to (like changing Open New Tab to Ctrl+T, etc.).

The article that convinced me to try Console2 is from , in which he gives some good advice for set-up. So, thanks Scott!

Then I stumbled across this article, which says it’s about Console2, but then describes how to install and customize ConsoleZ (not sure why none of these can keep their names straight!), and then goes on to talk about just about everything one could possibly consider doing via the command line… But the author makes ConsoleZ sound pretty good (I especially like the syntax highlighting!), so I might just check it out too!

Hopefully this helps someone that has been having the same problem, and I would love to hear from anyone that uses either of these, especially what they like and dislike after using for some time; alternative options are also always nice to hear about… :-)

Happy command lining,
Atg

Today’s Readings

Two big release updates this past week:

  1. jQuery has released two new Alpha versions: 3.0 (for IE9+) and 3.0 Compat (for IE<9). There are several updates that could break existing code, but as usual, they are well documented, and jQuery Migrate should help you find any potential stress points.
  2. While not a major release like jQuery, WordPress 4.3.3 Beta was also released. In addition to several bug fixes, there are also a few improvements that have landed.

You may have heard that a short while ago left Google to join Fastly. Well, he has now also left Fastly to join SpeedCurve.

SpeedCurve leverages WebPageTest’s great data while making it significantly easier for you to use.

I was quite excited about the concept of PostCSS when I first heard about it, but the idea of restructuring all of my current workflows just wasn’t very appealing… Apparently I wasn’t the only one, as writes It’s Time for Everyone to Learn About PostCSS: What It Really Is; What It Really Does after having the same feelings, but making the leap anyway.

How to Debug JavaScript Remotely With Vorlon.js. Is this the next step after Weinre?

offers up a cool effect, using CSS transforms to augment photos. The initial image in the article is very cool, and actually caught me off-guard at first… :-)

Anyone working remotely, as in, not in the same office as everyone else (even just on some days)? If so, here are several tips to make remote working an easier, more productive experience for the whole team. I’d like to personally +1 that “be prepared” thingy…

Styling SVG<use> Content with CSS, by who else but , is much more than the title indicates, getting into how you should structure your code, how the browser creates the Shadow DOM, dealing with cascades and overrides, using tricks like all and currentColor, and even getting into what’s coming down the pipe, like CSS variables… Oh yeah, Sara also talks about styling SVG <use> content with CSS… :-)

A nice collection of things you should already know about responsive web development, but it is nice to see it all pulled together into a single place like this.

And pushing those last two bits together, here is a quick run-through on making sure your SVGs are responsive·

‘s latest Web Developer Reading List: Text Effects covers the gambit of text effects, from text shadows and strokes to neon signs and exploding text…

The Front-End Developer’s Dilemma by is very dear to my heart. I used to just tell people I do “computer crap” and would then expand on that incrementally until I felt they realized enough about technology that I could really explain what I do without making their eyes roll into the back of their heads: “I do web stuff.” “I’m a web developer.” “I do front-end development.” “I specialize in HTML, CSS, and JS, but work with WP and even SVG a good bit too, but I also think about and push-back a lot when it comes to UI and UX.” Having to explain the difference between web design and web development always surprises me, but I am the first to admit that I am not, and correct others when they wrongly label me as, a programmer; I know dudes that are computer programmers, and that is not me… :-)

Some complex-as-hell CSS selectors in this Quantity Ordering With CSS article… Whew!

And finally, ‘s “Tediously Accurate Map of the Solar System is mind-bogglingly, brain-numbingly, cortex-meltingly amazing… I admit I did not make it all the way to Pluto… After an insane amount of scrolling, I had passed Saturn (no, I did not make it to Uranus, snarf! ;-), yet my horizontal scroll bar said I was still only halfway… I got new respect for you, New Horizons

Happy reading,
Atg

The difference between Service Workers, Web Workers and WebSockets

As fairly-new web technologies, Service Workers, Web Workers and WebSockets all started, stalled, and then sort of made a resurgence. And so I find myself somewhat confused by exactly what each does, what the differences between them are, and what purpose each ideally serves.

I tried searching for some comparison articles, but was surprised by the lack of search results comparing all three of these technologies. I found two that come close…

  1. Getting Things Done with WebSockets and Web Workers is an online chapter from Learning HTML5 Game Programming.
  2. Ajax vs. Web sockets vs. Web Workers is a StackOverflow article.

…but neither compares the three I was curious about… So I decided to get to know them all a little better and document my findings here (so I could come back and remind myself again later…).

TL;DR

  • Service Worker:
    Background service that handles network requests. Ideal for dealing with offline situations and background syncs or push notifications. Cannot directly interact with the DOM. Communication must go through the Service Worker’s postMessage method.
  • Web Worker:
    Mimics multithreading, allowing intensive scripts to be run in the background so they do not block other scripts from running. Ideal for keeping your UI responsive while also performing processor-intensive functions. Cannot directly interact with the DOM. Communication must go through the Web Worker’s postMessage method.
  • WebSocket:
    Creates an open connection between a client and a server, allowing persistent two-way communication over a single connection. Ideal for any situation where you currently use long-polling such as chat apps, online games, or sports tickers. Can directly interact with the DOM. Communication is handled through the WebSocket’s send method.

NTL;WR ;-)

Service Workers

HTML5 Rocks has a nice introduction to Service Workers (aka ServiceWorkers). From that article, the best one-line definition I found was:

Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled.

Service Workers are pretty perfect for creating offline-first web apps. They let you interact with the server when you can (to fetch new data from the server, or push updated info back to the server), so your app can work regardless of your user’s connectivity.

For example, an email client could fetch emails when the app loads, then, if the user loses connectivity for a brief period, the app could still continue to register read/unread and deleted states and store new emails to send until connectivity is restored, then send those updates back to the server via a Service Worker. To the user, all the time they were offline, the app continued to work, so they “got stuff done”, and your app just did its job, by collecting changes and updating the server as soon as it could.

While Service Workers cannot directly interact with the DOM, your main JS code can do that based on the messages you receive back from a Service Worker. Service workers also stop when not being used and restart when needed, so there is no persistent “state”; you would need to rely on some form of local storage (localStorage, IndexedDB, etc.) for such persistence. It is important to remember that a Service Worker’s life cycle is completely separate from your webpage.

You can dig a little more deeply into Service Workers, but apparently there is a law that anything published on the web about Service Workers must be created by . :-) That, or he is seriously, madly in love with them. (So much so that, while I would normally use Can I Use to determine the usability of Service Workers, even the Can I Use Service Workers table refers to Jake’s “Is Service Worker Ready?” page to find out the status of Service Workers…)

Service Worker resources:

Web Workers

HTML5 Rocks has a nice introduction to Web Workers (aka Workers). From that article, the best one-line definition I found was:

Workers utilize thread-like message passing to achieve parallelism.

Web Workers are pretty perfect for any web app that has intense functions to perform. They let you push the intense functions into a background thread so your main JS can keep on rocking, like maybe setting up event listeners and other UI interactions. Then, when the intense functions are done, they report back with their results, letting the main JS update the web app.

For example, a site that fetches and displays data in a series of dynamic charts could have each chart fetch its own data via a separate Web Worker. While the Web Workers are fetching, processing, and calculating their data, the main JS could be setting up menus, event listeners, initializing date pickers and custom UI elements, etc. And when each Web Worker is done with its process, it can report back to the main JS with its resulting data to be used to create its respective chart.

While Web Workers cannot directly interact with the DOM, your main JS code can do that based on the messages you receive back from a Web Worker. And as they are completely separate threads, Web Worker code must exist in a separate file and does not have access to your main JS. Workers can also spawn subworkers, to create additional background threads.

Support for Web Workers is quite good, with only IE < 10 and Android < 4.4 deserving any real consideration.

Web Worker resources:

WebSockets

HTML5 Rocks has a nice introduction to WebSockets (aka Sockets). From that article, the best one-line definition I found was:

There is an [sic] persistent connection between the client and the server and both parties can start sending data at any time.

WebSockets are pretty perfect for any web app that needs to communicate frequently with a server, and could benefit from the server being able to communicate directly with the client.

For example, a chat app could create a WebSocket connection so that as each person types, their message is pushed to the server and the server can then send that message directly to the other person(s) in that chat. The previous methods for doing this would be using setTimeout, setInterval and Ajax requests. But these approaches created intensive loops that have to keep asking the server: “Do you have anything yet?” No. “Do you have anything yet?” No. “Do you have anything yet?” No…

So, with WebSockets we finally can directly affect the DOM and, as they are part of the main thread, WebSockets do have access to your main JS.

Support for WebSockets is quite good, with only IE < 10 and Android < 4.4 deserving any real consideration.

WebSockets resources:

Summation

So, while WebSockets and Service Workers kind of overlap, both being used for client-server communications, WebSockets would be used more for continuous communication so both the client and the server can send messages to each other without having to create new connections, and Service Workers would be used more for one-off client-server communications like syncing an app and the database after the app was offline for some time, like a burst that can then be dropped when the sync is completed.

And Web Workers are something completely different, allowing processor-intensive functions to run in a separate, background thread, while allowing the main JS to run and the UI to setup and operate more smoothly while those intensive functions are still running in the background.

Well, I hope this quick look at Service Workers, Web Workers and WebSockets helped clear up the similarities, differences, and purposes of these great new web technologies for you, as much as it did for me! As always, please feel free to drop any questions/thoughts into the comments below; discussion is always fun. :-)

Happy coding,
Atg