Today’s Readings

You can now play Pac-Man on Google Maps. And, no, this is not an April Fool’s prank… :-)

Seriously powerful performance audit of some pretty big name sites, from none other than .

Amazon Cloud Drive can now store unlimited files for $60 a year. Wow…

JSS is a very thin layer which compiles JSON structures to CSS.” Hmm, for on-the-fly CSS insertion into a page, it seems pretty slick, and the API could be pretty handy, but otherwise I’m not sure if it is really any easier than using Sass or Less, is it?

littlebox is an amazing collection of CSS-only icons. Very cool!

ARIA Bones is a series of templates which aim to show how ARIA can be used to make HTML more accessible.” Would be interesting to see how much of this is baked into something like HTML5 Boilerplate, but I guess the real power of ARIA is not so much in its static attributes, but its dynamic ones, so the user understands updates to the page… Gonna have to dig in a bit…

Ever copy-and-paste from MS Word into an HTML doc? Who hasn’t right? And who hasn’t immediately cursed at the crap that gets shoved into your mark-up?? Well, HTML Cleaner is an online tool to remove all that crap for you… Thank you.

How do your JS skills stack-up in 2015? Find out

And just in case you want to put them to the test, here are 20+ Puzzle Websites to Sharpen Your Coding Skills to find out…

I’ve yet to get too crazily into Node.js, but for anyone that has, are you avoiding these 10 common Node.js mistakes?

Playing With Flexbox and Quantity Queries, by . Read.

Speaking of flexbox, writes about her experience converting her site to use flexbox, including the necessary fallbacks. Granted, it’s a rather simple example, but it’s a smart way to get started.

Tuts+ has published the next installment in their Nginx series: The Essentials. You know, if you’re into that. :-)

Dousing flames with sound waves, new fire extinguisher makes no mess. Brilliant. F-ing brilliant.

A nice demo of CSS columns. But, wait, is this Can I Use table inverted? The only browsers that properly support it are IE and Opera Mini??

And finally, a pretty cool no-JS animation (be sure to expand the bottom panel to see all of the dude), all based on a few HTML elements, one image sprite, and a fair bit of CSS

Happy reading,
Atg

Today’s Readings

From a co-worker, trying to decide which MV* framework to start learning? Well Todo MVC is an example of a project done in pretty much all of them… Impressive!

And speaking of learning new things, here is a well-thought-out letter from a seasoned developer to anyone newly entering the industry. And I personally think it is a worthwhile read for any developer…

Similarly, here is a list of technologies any developer should know today. Somewhat generic, but that’s probably a good thing, since there are lots of possible options for each topic in that list…

As for that JS section, here is a nice new Tuts+ tutorial Functional Programming in JavaScript. Only the first couple videos are free, but $15 also seems pretty low for the info you get.

I also just stumbled across Learn JS Data, which is an advanced tutorial on dealing with data in JS, including using d3.js and lodash.

At a slightly higher level, is The Joel Test For Programmers (The Simple Programmer Test). Not so simple, but would certainly be effective!

Interdimensional, Spatial scrolling for modern devices with a gyroscope

A fantastically well-written, plain-speak explanation of RWD, including a brief history, very short description, and very thorough cost-benefit analysis that anyone from the business-end of things should understand.

An interesting twist on the current development trend, Boy is a branch of HTML5 Boilerplate that uses “conditionally loaded polyfills and a nice general reset for amazing CSS3 support back to IE6.” I guess that’s still needed by some people, right?

brings a nice introduction to animating SVGs using Snap·svg. Pretty impressive demos, and seriously impressive tech.

If you are into modern art and are familiar with , here are a few of his paintings re-done via CSS.

offers up Combining CSS clip-path and Shapes for New Layout Possibilities. Wow, the advancements into print layouts just keep coming…

I’m not a big server or server configuration guy, but these seem pretty interesting for anyone that is:

  • Gov.uk tells us all about Test-driving web server configuration, and
  • once you have your servers all set-up and configured, you can try-out httpdiff, which lets you “[p]erform the same request against two HTTP servers and diff the results”… Pretty powerful stuff!

This article from really hit home because it is something I battled with last week at work: Fluid Width Video, which explains how best to deal with making video and the oft-necessary iframe work within a responsive world… Two weeks earlier would have been great, Chris… ;-)

Speaking of responsive, offers his thoughts on The Past, Present, and Future of Responsive Images.

And finally, hopping back to for a moment, he is easily one of my fave people working on, and talking about, the web. So it is fun to get to know him a little better in Envato’s latest “Made By:” episode

Happy reading,
Atg

Today’s Readings

In huge news on the web dev front, Google will implement Pointer Events!! Huge!

And so the totally-expected, all-too-obvious, completely-obnoxious, and utterly-toxic Net Neutrality court battles begin… If only businesses would put all of this time & energy into making good products that people want, and then built quality websites to deliver information about these wonderful products, all of this bullshit would be completely unnecessary…

Another big-name has completed the migration from the repetitive and fragmented code bases to a single and responsive website:

After almost 4 years, 5000 pull requests from 50 contributors, we’ve migrated the BBC News site to a totally new stack. We now have a single code base for all devices, in 30 different languages…

4 years” you stutter? I sure did! But read the article and prepare to be impressed by the absolute devotion, dedication, and determination their team had in order to persevere and bring one of the world’s largest news sites into a completely new world order. Now, if they can do it, what are you waiting for???

And to help you out, I’m going to beat you over the head with several links about Flexbox from the most recent Smashing Newsletter:

So I ask again, what are you waiting for???

Whether you are a traveler or not, you should love The Travel Episodes. From a traveler’s point of view, the site is filled with incredibly poignant writing and video that intertwine to describe travels from around the world. From a technology point of view (more befitting this article), enjoy the mixture of text, auto-playing and -stopping video as you scroll, responsive design and layout interactions, custom fonts, and just clean, beautiful design. (Please ignore the duplicate requests made for jQuery and jQuery Migrate, they have been advised, and will surely fix that soon… ;-)

There is a pretty slick new Kickstarter campaign that allows you to daisy-chain all of your USB Type-C cables into a single port. Which will come in really handy once the new, single-USB Type-C Macbooks start filling people’s living rooms and offices…

There is no doubt that animation in a website can completely capture a user’s attention, drawing them in and almost forcing them to engage with your content. Or it can be so obnoxious that it annoys people and almost forces them to injure themselves trying to close the browser window (hello, `90s animated GIFs). So learn some of the basics in animation, including some terminology and psychology associated with movement, to help keep your sites on the right side of that equation.

If you, or someone you know, is trying to get started in the web development world, it can be staggering trying to figure out where to start. A new article from I’m Programmer, Top skills for front-end web developer, aims to help focus things for you. I don’t know if I agree with all of the selections and omissions (instead of Angular, MySQL and CoffeScript, I might have gone with Node, Git and Grunt/Gulp), but that’s the way this kind of thing goes; hopefully someone finds the inspiration and resources they need.

And here are several tutorial links for you, in case the above doesn’t cover everything you need… :-)

And finally, so you use cookies, do you???
Repetitive cookies opt-out message.

Wow, this was a wordy issue… :-)

Happy reading,
Atg

Today’s Readings

Well, I sure wish had published his article about Chrome DevTools’ Workspaces before I ran into the hassle that spurred my article from yesterday… But check out his article anyway. :-)

Then go check-out ‘s DevTools State of the Union video from the jQuery UK 2015 conference. Some really cool stuff coming to DevTools, especially the new Timeline, 3D visualization, and animation tracking features! His slides are also available.

Defensive JavaScript is all about properly planning your code to avoid possible bugs and breakages down the road.
(“Defensive JavaScript?” But I’m only familiar with Offensive JavaScript… (Had to do it, sorry… ;-) ))

is.js: Check types, regexps, presence, time and more…

Seriously well-planned and thought-out checks!

I was familiar with window.scrollTo() and window.scrollTop(), but I have to admit that I was not familiar with window.scrollLeft(), window.scrollBy(), window.scrollByLines(), window.scrollByPages() or window.scrollIntoView()… Wow. Where the hell have I been??

git-ftp is a “Git powered FTP client written as shell script”… I don’t see why not!

When first came out with Reset CSS, we all rejoiced and jumped on board. Then came ‘s Normalize.css, which was, and still is, awesome! So, will we all be soon hopping onto the Sanitize.css band-wagon?

Thorough article on the history, current status, possible future, and polyfills-until-then for click/touch/pointer/input events.

Some seriously cool login form upgrades. No, seriously, “cool login”…

made 100 SpaceX photos available on Flickr via a Creative Common license! Then swapped that license to Public Domain because someone on Twitter asked him to… Nice job, Twitterverse!!

I have been aware of the existence of Nginx since HTML5 Boilerplate first came out, I guess, and I saw the references to it in their .htaccess file. Then I started using it in order to run a work project on my localhost. But I really knew nothing more about it. Until I read this Nginx Guide: Introduction article, that is…

Interesting article on mobile UX design, from a designer, discussing topics like task-flow diagrams, storyboarding, system design and prototyping. (Just pay no attention to the UX of the UX Matters website itself… Sheesh.) Very enlightening article, and I would welcome any gig that took the time to think ahead like that…

And finally, two comics to lighten your hump-day:

  1. Everyday types of coders
  2. The World Seen by an Object-Oriented Programmer

Happy reading,
Atg

How to replace remote files with local files when debugging

If you are a front-end developer, then the time will come when you want or need to debug a file on some remote website and you want to do so by editing that file on your local hard-drive. In this article I discuss several options that I tried using, what worked and didn’t for each, and reveal which one finally worked for me.

Shut-up and get on with it, already!

The basic scenario

  • There is a website, such as http://www.example.com/.
  • This website has some external resource, such as script.js.
  • You need to debug something that is happening inside of script.js.
  • You want to debug using a copy of script.js that is on your local hard-drive.

The reason why you might want to debug this way is irrelevant, though there are several common possibilities. Perhaps the process of getting your debug changes to the remote server is such a pain in the butt that it makes the edit/save/deploy/repeat process frustrating and/or too time-consuming. Or perhaps there is something that makes debugging the entire site via a local server impractical, like it runs on an OS that you cannot run locally; or you do not have access to all of the files needed to create a local instance; or the site or feature that you need to debug uses Ajax and it cannot run cross-domain; or you need to sign-in using some specific database settings that only exists on the remote server. Suffice to say there are many reasons why you might need to do this, and these are just a few.

Whatever the reason, you are going to find yourself needing to do this one day, and when I needed to do this, I didn’t understand of a few of the techniques as well as I thought I did, and so it was quite frustrating; hopefully these notes will make life easier for some developer(s) out there… :-)

Note: I use Chrome, so I use DevTools, so I will be focusing on that browser. It is possible that other browsers have similar options, so if anyone knows of one, please share that info in the comments and I will try to update the article where it is appropriate.

Getting on with it already…

These are the three options I tried using:

Each has a unique scenario where I think it makes more sense than the others, and I will describe those scenarios below.

DevTools’ Workspaces

For anyone familiar with this option, you will likely already know my mistake, and may want to skip to the next section. The rest can read on.

Chrome DevTools has a feature called Workspaces. I had played with it a few times in the past, and I thought I understood what it could do and in what situations it would be helpful. But when I tried to do what I thought it did, I found out that it didn’t do what I thought it did…

I kept getting this annoying error message in my Sources panel telling me that “the contents of this file on the local system… does not match the loaded script…” Well, duh, I thought, that’s exactly what I want to happen… And no matter what I tried I couldn’t get my saved files to replace the remote version!

Well, it turns out that Workspaces works really well if you are working with 100% local files that are being served via a localhost server (notice I don’t use the word “remote” anywhere in that sentence…).

DevTools lets you designate a local directory as a Workspace, then make edits to the files in that Workspace from within the DevTools console, and save those changes from within the DevTools console, and have them save right back to your local directory files! So basically, DevTools functions as your IDE. Which is awesome! (And even more so if you couple this set-up with something like Grunt Reload, then this gets really powerful!)

But, sadly, for me, this is not at all what I needed…

Redirect

Next up was Redirect, a Chrome Extension that lets you replace remote server files with local server files. Ah ha, I thought, here we go! You can set-up multiple domains, and under each domain you can list multiple remote file URLs that you want to replace, and then add the local file URLs that should replace them.

This sounded like just what I needed, and it was really close, except that Redirect needs to be able to fetch those local files via a localhost URL, such as http://localhost/example/script.js, and not via a directory path, such as C:\xampp\htdocs\example\scripts.js

So, this was definitely a lot closer, but I work on several projects that require several different local servers, which is simply a hassle, trying to remember which project needs which server, and then starting each of those servers every time I needed to debug a different file…

Fiddler

Then I went back to an old standard that I had used a long time ago: Fiddler. I was hoping to not have to download yet another application, and run yet another application, and that I could just do all of this from within my comfortable Chrome DevTools environment, but for what I needed, and wanted, Fiddler ended up making sense for me: I could specify the remote file URL, then specify the local file directory location, and Fiddler would simply swap the files on each reload.

Note: Fiddler can do a lot more than simply replace resources, but that is the only feature within this article scope. Also note that it is PC-only. For Mac users, aside from using a VM to run Fiddler, you could also look into Charles Proxy, which offers similar functionality, but is also not a free application.

Update : Fiddler Chrome Extension

I happened upon a Chrome Extension that calls itself Fiddler, but I am not linking to it because I cannot recommend using it. First of all, there is the comment “This is a fake extension which is violating Telerik’s trademark on Fiddler.” Second, since this Extension is not created by the good folks at Telerik, I have no idea if it is a trustworthy Extension, and do not know exactly what it is doing behind the scenes. And third, is the fact that I couldn’t get the Auto Respond feature to actually work… So, there’s that.

Conclusion

For better or worse, we are no longer in a situation where simply having Notepad and an FTP application can solve all your development needs, and this is just another example of that. Each of the recommended options above have their place in a web developer’s arsenal, so all of them are worth knowing and being prepared to use if the appropriate situation arises. I also look forward to this list growing to fill in any gaps that I have left.

I hope the above info helps you avoid a struggle one day.

Happy debugging,
Atg