Today’s Readings

But maybe you don’t need it anymore… Have you been studying, and learned a lot about web performance techniques already? Find out

From the slightly-distant future, shows-off several advanced CSS effects. Slowly, all of Photoshop is landing in CSS

Now take a look at the extremely-distant past, with The Limit Of What Hubble Can See

And while we’re geeking-out in space, here is a to-scale CSS animated orrery, including a live-image sun, complete with spots¡Muy impressivo!

An explanation of, and best practices for, @extend in Sass. I would imagine most of this holds true for Less, as well.

gives us 5 easy steps to help make SVGs more accessible.

And speaking of SVGs, , via CSS Tricks, shares the nitty-gritty of CSS Transforms for HTML vs. SVG elements (plus how to make it all work in IE…).

And speaking of IE, it’s replacement, Edge, just got its own blog and Dev site.

I have not used Flexbox or Grid enough to have an opinion on this, but maybe you have, and do:

The CSS Working Group has reached an impasse on the issue of percentage margins (and padding) in flex and grid layout, and needs your input to help decide it.

Looking for that next, big inspiration? How about random CSS gradients?

Ha! A crying baby, in 100% CSS… :-)

Taking it even further, meet Pablo the Flamingo, made entirely in WebGL. Seriously impressive, make sure to click-and-drag him around… Seriously impressive…

And finally, in not-even-slightly-surprising-news, a study finds fracking chemicals contaminated drinking water in Pennsylvania. I understand the money is alluring, but this shit is just stupid… And then something like this happens, to prove stupid can get even stupider… (facepalm)…

Happy reading,
Atg

Today’s Readings

Oh politiciansyou crack me up… If only you had any clue about the world you wish to run…

This article proposes that infield, top-aligned labels are easier to read, and those produce faster form completion times. And the crazy part is that, when you scroll down a bit and see the examples, they look exactly like the paper forms we fill out an a very regular basis. This just could be why people find them easier to read, because they’re actually more familiar. But who cares about the reason, the result is what matters, no?

Now combine that with FormHack, a SASS-based form reset that allows you to easily customize your forms for any site, with cross-browser compatibility. Nice!! Now where is the Less-version?? ;-)

Cool 3D Folding Panel demo! I like the animation, and note the small-screen version, slightly different, but still cool!

Holy crap, Google+ just invented a mash-up of Pinterest and Tumblr! :-/

And to up-the-ante a little on CSS animation…

Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree.

And “successfully tested in IE9+“??? Wow…

A Complete Guide to SVG Fallbacks. Very nearly. Oh, and should just change her last name to Soueidan Van Gogh er something… (That would, like, make her last name’s initials S… V… G… Oh, never mind… ;-)

IBM researchers say they’ve found a better way to detect and correct errors that could compromise quantum computing.

Yeah… And today I (nearly) completed a new WordPress theme… :-|

Professional Web Typography is a new, free online book all about, well, web typography, by . Please note that, although it is free, you may wish to contribute to the author.

Three great design articles from Medium.com:

  1. Designing Settings
  2. Rethinking Treadmill Interface
  3. Immersive Design: Learning to let go of the screen

I was quite excited when I read the title of this video: “What really happens to the plastic you throw away“. For some time I have been curious about how successful recycling programs really are; do items placed into recycling bins really get recycled, and is the recycling process really cleaner than just making new stuff? I know that a huge part of the recycling concept is to remove trash from landfills, so, even if the recycling process is equally vile and toxic to the “new” process, the removal of the trash from landfills still makes it a win, but I was still curious. Alas, the title of the video should have been “What really happens to the plastic you throw away, and what ideally happens to the plastic you recycle”… I guess I will just keep hunting for the piece I’m really looking for… :-/

Quite an impressive performance Bookmarklet / Extension / Add-On!

Oh, you’d prefer to inspect mobile performance? Then check-out ‘ collect-all Mobile Perf Bookmarklet.

Too often I her people reference accessibility as if it were only about the blind and their screen readers. And it is easy to understand why people would think, because the web is mostly a visual medium. However, there are many challenges. And this Tuts+ article does a great job of introducing the topic! I look very forward to next installments!

Do you use any of the HTML5 input types (number, date, range, etc.)? I, do not. Would love to, but they’re simply too inconsistent for me. Well, here’s an article that tries to solve the issue, by reaching out to browser vendorsVielen Glück¡

A nice guide to Building Nonlinear Narratives for the Web. Great journey…

And finally, to help with your next star-gazing experience…

Planetarium: This online planetarium allows to compute the coordinates of planets, comets and asteroids and visualize them in the sky with respect to stars and constellations.

Yay!

Happy reading,
Atg

Today’s Readings

I know Sublime Text and Atom are all the rage right now as far as IDEs go, but this article about Microsoft’s latest Visual Studio Code peaked my interest. Downloaded, now let’s see how it works…

While Google Translate doesn’t get everything right every time, it does a pretty great job, I think! So now you can use Google Translate’s API to localize your website (and no, this is not the Google-Translate-URL-with-your-URL-appended trick…)

From comes tips for aligning icons and text. It seems like it should be so easy, but at times it definitely isn’t…

And here is a clever trick to get WordPress to ignore words like “a”, “an” and “the” when sorting search results (to make something like The Avengers appear with the “A”s and not with the “T”s…).

JS Pointer Events have landed in Firefox nightly! One step closer…

Seems WebKit has it’s own version of a peek-a-boo-type bug; offers several fixes.

LiveDive lets you audio or video call with your users while watching them use your web app live — right through the browser, with no apps or browser plug‑ins required.

Wow.

dragula: Drag and drop so simple it hurts

Indeed, even on my iPhone! (Though the page elements did dance around a bit when a drag was initiated.)

I’ve seen this before and love the concept: autocorrect user email address domain typos (e.g. “…@gnail.com” => “…@gmail.com”)

xto6 will “[t]ranspile ES5 code into ES6 live”. Seems to me like we need one that does the opposite, so we could code in ES6, but still have it work in browsers that don’t understand it… No?

And finally, stepping beyond the doldrums of the web development world for a moment, possibly way beyond, NASA is working on an engine “that doesn’t require rocket fuel and could make a trip to Mars in just 10 weeks”:

The theory is that this drive can create force by bouncing electromagnetic waves around inside of a chamber, with some of their energy being transferred to a reflector to generate thrust.

Happy reading,
Atg

Today’s Readings

Well, the big news is that Microsoft’s Project Spartan is no more, and we now have the actual name for Internet Explorer’s replacement: Microsoft Edge. The name was announced at Build 2015 and MSDN soon blogged about it, even offering us a snappy little video!

The above blog links to a new page “Welcoming Developers to Windows 10“, which sadly links to a 404 page, but I assume someone will fix that soon. There appears to be a lot of great new features, like Cortana integration, a scribble feature, and, sneakily, the ability to support Chrome and Firefox extensions/add-ons! But with all this new, they just couldn’t resist keeping something that will remind people of its past… ;-)

At any rate, I for one look forward to the Days of Edge, and the History of IE! Huzzah!!

And in other news…

collects several examples of the “Priority+” responsive navigation pattern. Lots of great examples, including the one that knows how many items are hidden, and the one in the comments, that I commented on. (I think there is something wrong with the first CodePen example on the actual CodePen site: the large-screen version doesn’t display all the menu items or the “+”, but you get the idea…)

Also from that CSS Tricks article, be sure to check-out ‘s Responsive Patterns collection; huge page of inspiration and common practices.

New CSS4 Selectors. Does every even know all of the CSS3 Selectors??? :-) (I love that I get to reference an article from 2006!!)

Wow: WebGL photo gallery from the ISS

Pretty cool mouse movement blur effect. It’s almost too hard to tell if the ball is actually blurring, or your eyes are just feeling fuzzy… If you want to really see the effect, in the JS panel, inside the moveBox function, change the 0.05 to 0.5. Fun!

Some great tips in this Building Offline Mobile HTML5 apps articles, but most transcend beyond just “offline” apps, and make sense for any site! The notion of using Zepto instead of jQuery is always a good one, and I really like the pointers to Pure and Picnic, need to check them out! (Not so sure about the user-scalable=no bit though… It’s easy to think that if you design your correctly, users shouldn’t need to zoom in, but you can’t possibly know all your user needs, can you?)

Article and presentation on animation performance. Some good tips!

A very brief definition of mobile, from :

  • 4-5.5 inch
  • portrait
  • one-thumb

Ok.

Did you know Google runs a free an open image resizing service? I certainly didn’t.

And finally, bikers, when you are actually fortunate enough to have a bike lane, how much do you hate cars/trucks that use it as a loading/unloading zone? Yeah, I know. I remember when NYC started adding cameras to the front of their buses to automate tickets to people that drive illegally or park in bus lanes. It would be interesting to see a city adopt the same policy for bike lanes, maybe making use of the handy Towit app!

Happy reading,
Atg

How to Print a LinkedIn Profile as a Resume: The Chrome Extension

How to Print a LinkedIn Profile as a Resume is by far my most popular post (I guess that title is pretty good link-bait! ;-) ). As such, I have decided to give the topic a little more love lately.

The above post, my initial venture, offered a Bookmarklet, which users could drag-and-drop into their browser chrome. I also offered via GitHub for anyone that wanted to manually add it to their Bookmarks.

That version was good, and did its job, but some users found it a little difficult to install and the code soon got outdated as LinkedIn updated their Profile page layout.

Then, thanks to some gentle prodding in that original post’s comments, I finally updated the code, but left it as a Bookmarklet and on GitHub.

Well, I’ve finally gotten off my tail and decided to convert this to a Chrome Extension!

The new Extension can be found on GitHub too, including instructions on how to install it in your Chrome browser as an Unpacked Extension, OR you can also find it in the Chrome Web Store (my first Chrome Extension! :-) ).

How to use:

  1. Install the Extension, either as an Unpacked Extension or via the Chrome Web Store (links above)
  2. Go to your LinkedIn Profile page, which should look something like this:
    LinkedIn Chrome Extension instructions, step 1
  3. Click the “View profile as”, as illustrated above.
  4. When that page loads, you should have a new icon in the Omnibox (Chrome’s address bar), like this:
    LinkedIn Chrome Extension instructions, step 2
  5. Click that icon.
  6. Your Profile page should automagically transform into something simply gorgeous, and totally printable, like this:
    LinkedIn Chrome Extension instructions, step 3
    But hopefully not with my name and photo…

Would love to hear what you think, if you find it useful, or not, certainly any bugs or feature requests. If this continues to gain traction, I will add functionality. I’m even thinking about looking into creating a Firefox Add-on, and, does IE offer the same functionality? Either way, if anyone is interested in either of those options, please let me know.

Anyhow…

Happy printing,
Atg