Hired – Job Hunting Simplified​

On Hired, companies apply to you, not the other way around. Upon getting approved your profile becomes visible to over 6,000 innovative companies, hiring for technical roles. So if you’re looking for new opportunities, but don't want the hassle of applying to all those companies, try Hired and let the companies apply to you!

Modern JavaScript for Ancient Web Developers

Gina Trapani:

... when you're learning modern JavaScript, there's a good chance that the solution to the problem you're having is still getting worked out. In fact, it's very possible it is only one code review away from getting merged into the package you're using.

It's a weird time. So many of us are living so close to the edge. As Gina puts it, it's harder to find "a 5-year-old Stack Overflow answer that solves" your problem. New things drop and go out to production instantly, which is a bit at-odds with the classic wisdom of waiting for the .1 release.

Need to Catch Up on the AMP Debate?

The subject of AMP came up at a meetup I was at the other day. It came up in a "Hey have y'all seen this thing yet?" context. Some people have heard of it, some hadn't. Even among those who had heard of it, the vibe was mostly: "this is newfangled tech. It's the future, probably. I guess it's a thing I gotta learn, I just haven't gotten around to it yet." Which makes sense. It's just like hearing about some new JavaScript framework that is taking off. "Obviously, it's a big deal, I just haven't gotten there yet. Perhaps I will one day when it's clear I need to for a project."

Other folks at the meetup were like "Isn't it that thing that makes it so you can't use CSS or JavaScript?" Someone else thought it was more like a CMS. Neither is quite true, but there is certainly plenty of confusion out there (and a lot of outright shrugs). Let's not re-explain what AMP is here, but cover some of the potentially confusing and controversial points.

(more…)

Zeroing the Desk

Brendan Dawes:

After a recording session on one of those large mixing desks, after you've twiddled countless knobs and push around many faders you do something called zeroing the desk. This is were you turn every control and push every fader back to zero, so that when the next engineer comes in he or she isn't going to jump out of their seat when a large sub-bass whacks them straight in the face and possibly blows something up. It's a polite thing to do for your fellow sound engineer.

Reminds me of all: unset; ;)

(via Brad Frost)

The Next Smashing Magazine

Congrats to the big team over there assembled to take on this major redesign process. Unlike our redesigns around here that are usually more like realignments with minor dev work and UX sprinkles each iteration, this was a ground-up rebuild for them. They migrated a bunch of different platforms all into one, a static-site based system with all front end APIs. It's gotta feel good to pull all that stuff into one system. I remember when I used to have four different systems around here (WordPress, Forums (various), eCommerce (various), and some raw PHP stuff) and the good feeling it was to get it all yanked in under one WordPress roof.

Guetzli

Geutzili, Google's new open source algorithm...

...that creates high-quality JPEG images with file sizes 35% smaller than currently available methods, enabling webmasters to create webpages that can load faster and use even less data.

I've seen this fairly widely reported, and that's great because images are the main cause of web bloat these days and fighting back with tech seems smart.

I also saw Anselm Hannemann note:

This is great, but to put things into perspective, we also have to consider that it's up to 100 times slower as Mozilla's mozJPEG encoder and in many cases, it doesn't achieve the same quality at the same file size

Source: Kornel Lesiński, the guy behind ImageOptim, who says Guetzli will be incorporated into the next version.

Creating a Book Cover Using JavaScript and p5.js

I recently published a book and an interactive course called Coding for Visual Learners. It teaches coding to beginners from scratch using the widely popular JavaScript programming language and the p5.js programming library. Since p5.js a great and an easy to use drawing library, I wanted to make use of it to create the cover of my book and course as well. This is a tutorial on how to create this particular visual using JavaScript and p5.js.

(more…)

Hassle-free Full Bleed with *:not()

Common situation documented by Dave Rupert:

Let's say you're making a blog post layout. Content is entered into a CMS inside a WYSIWYG editor field. You echo that content to the page. You pull it up on a mobile device and notice the paragraphs go edge-to-edge. Yikes, it's a little uncomfortable. So you add some kind of left/right padding maybe using a div.container.

This works great until the client asks for the images and video to go full bleed. Your universal padding solution no longer works well.

You got options. Containerizing isn't great in any scenario. So how do you yank out those full bleed elements? Dave does it with what I'd call a reverso-whitelist. Say you want images and videos to be full bleed, but everything else needs edge padding:

.post > *:not( img ):not( video ) {
    margin-left: auto;
    margin-right: auto;
    max-width: 50rem;
    padding-left: 5%;
    padding-right: 5%;
}

He's using :not() to select everything that isn't an image or video. Those things are the whitelist. Much easier the other direction of maintaining a blacklist of every single possible HTML element.

I use this right here on CSS-Tricks in this design, but instead of applying padding to everything, I use a container and pull out a whitelist of items to the edge with negative margins. I think I like Dave's idea better.

Media Temple

Media Temple is a web hosting company that has hosting options for everyone. From inexpensive (but powerful) plans like their Managed WordPress Hosting, to mid-level stuff like the managed DV plan CSS-Tricks runs on, to super heavy duty dedicated and cloud hosting.

CSS-Tricks is the biggest site that I personally manage (with Media Temple's help, of course), so I keep that on a DV all by itself. We've been able to tune it up to be incredibly speedy. The document almost always comes back from WordPress under 100ms, which is pretty smoking! The only caching in place is at the nginx level. The rest of my sites I host on a separate DV, and I actually quite enjoy being able to DevOps myself when I need to, which I can do with Plesk that comes preinstalled on the box.

(more…)

Scrolling on the Web: A Primer

Scrolling is complicated. Nolan Lawson:

  • User scrolls with two fingers on a touch pad
  • User scrolls with one finger on a touch screen
  • User scrolls with a mouse wheel on a physical mouse
  • User clicks the sidebar and drags it up and down
  • User presses up, down, PageUp, PageDown, or spacebar keys on a keyboard

As it turns out, all five of these input methods have vastly different characteristics, especially when it comes to performance and cross-browser behavior. Some of them (such as touch screen scrolling) are likely to be smooth even on a page with heavy JavaScript usage, whereas others (such as keyboard scrolling) will make the same page feel laggy and unresponsive. Furthermore, some kinds of scrolling can be slowed down by DOM event handlers, whereas others won't.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag