Posts Tagged: web development

Blind

I’ve seen a lot of tech buzz about this app and deservedly so: it’s a hell of a lot easier for developers that have HDPI to open up a special “non HDPI browser” via this app vs. trying to switch resolutions repeatedly. Well worth a look.

Front-end unit testing with JavaScript

The combination of PhantomJS and CasperJS make for a fairly straightforward yet vigorous form of unit testing. The only problem I’ve had from before is just knowing exactly where to start; Google searches and YouTube tutorials can pull you in many directions. That’s why developer Danny Croft’s little mini tutorial (far from comprehensive, it just starts you off) was helpful – as long as you can install from Homebrew you should be in good shape.

Absolute centering

Yes, this technique written by web developer Stephen Shaw has gotten linked by almost every tech source online: Smashing Magazine, Sidebar, Hacker News, it’s all here. But it’s worth the hype. Comes down to this: as long as you set the height of an element, you can easily center it vertically with just a few simple CSS rules. Heavily cross browser compatible too.

Taking control of image loading

Web agency Barrel suggests some good ideas for taming image heavy sites. As a small caveat, I’m not crazy about some of the author’s example CSS (selectors that combine two classes in one level like ‘img_wrapper.loaded’ should be avoided) and I disagree that writing inline onloads are the way to go – there are cleaner, JS solutions to detect a reliable image load. That said, it’s an excellent primer, especially for newer front end web developers.

Animating max-height to overcome height:auto limitation

Nifty jsFiddle example originally tweeted by developer Lea Verou. If you want to animate a block level element from a fixed height to height: auto, rely on max-height.

The mobile-first web

If there’s any single point to take away from Henri Bergius’ essay, it is this:

The web is its own platform, and as such it is foolish to try and mimic traditional desktop applications. It will never feel quite right whatever you do.

It is a lot better to accept this and fully embrace the unique advantages of the web platform.

I also really enjoyed his remarks regarding the workflow between developers and designers. In short, design for mobile first.

Sneak peek of Macaw

Macaw looks very impressive. As the narrator mentions in this twenty minute video demo, you can get into dangerous territory when a web design tool tries to also be a full WYSIWYG code generator at the same time (maybe I’m just picky, but as cool as Sketch is as a program, it’s HTML/CSS export options are not as great as I’d like.) Macaw seems to take a really balanced approach: fundamentally a design tool, but with most of its settings and tools rooted in HTML/CSS fundamentals.

Perhaps most importantly, while the app is native, it apparently renders all of its content in actual HTML. No more gradients, font styles and other “Photoshop only” actions that look very different once they actually get rendered in browser code.

I’m keeping my eye closely on this one.

Phantom CSS

I have not gotten the chance to use Phantom CSS out yet, but it’s promise and buzz among fellow web developers is promising when it comes to visual regression testing. To put it in the words of its creator, developer James Cryer:

PhantomCSS takes screenshots captured by PhantomJS and compares them to baseline images using Resemble.js to test for rgb pixel differences with HTML5 canvas. PhantomCSS then generates image diffs to help you find the cause so you don’t need to manually compare the new and old images.

Think about it: an open source delivery system to generate images for differences in a web site. That’s extremely powerful stuff as it can catch errors eyeballing code often misses, especially on a large web site base where visual spot checks on every page are out of question.

CSS guidelines

Some great ideas from CSS Wizardry on organizing and writing CSS. Pay close attention to the recommendations on a table of contents and section titles; while I slightly differ from the section and content style listed here, both devices are a huge help once your CSS grows in size.

Our web development workflow is completely broken

Web developer and speaker Kenneth Auchenberg makes a strong argument about how our web tool integration has a long way to go from where we are today. If you’re pressed for time, just skip right to his first flow chart, it’s sobering to read. Makes you step back and realize at times how ridiculous the disconnect is between our browser and code editor of choice.