“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.
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?
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 ChrisCoyier 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… ;-)
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 lastly, once you know all the rules and tricks, you can cheat and let Flexy Boxes help you build your ideal layout and just hand you the freaking code…
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… ;-)
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.
is.js: Check types, regexps, presence, time and more…
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…
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.
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 ofscript.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.
Each has a unique scenario where I think it makes more sense than the others, and I will describe those scenarios below.
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…
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…
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.
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.