Home / Newsletters /

#164

  • Here’s a great post from Bastian Allgeier all about simplicity in web development. He writes about how things are getting more complicated and it might not be helpful for us all in the long run:

You want to build a JS file? Please update Webpack first. Oh, that new version of Webpack is no longer compatible with your Node version. Oh, your new Node version is no longer compatible with that other dependency. Oh, now you have 233 detected security issues in all your node_modules but you can’t fix them because that would break something completely unrelated.

This dependency hell is also the reason why old projects are almost like sealed capsules. You can hardly let a project lie around for more than a year, because afterwards it’s probably broken.

  • Scott Jehl explains that 5G is on the horizon and how it could cause problems for users. The idea is that when we get power, we use it… and then some. Since 5G will arrive in affluent areas first, we’ll widen the gap between high and low end connections even wider than it are today.
  • caniuse.com is perhaps the greatest website ever made but the brand new caniemail.com must come just shy at second place (just look at that nice mobile experience). It helps figure out which features email clients support.
  • How do you change the colors of product images using CSS blend modes and SVG? Kyle Wetton answers that question by showing us how to build a feature that changes the color of someone’s t-shirt without needing a brand new photograph to do it! Pretty nifty trick, this one.
  • A while back, Monica Lent wrote about what she learned as a junior developer and has some super interesting thoughts on technical debt, what being a senior developer means, and the skills that a programmer should acquire that go beyond coding. And at the other end of the spectrum… What does tech leadership really mean?

? From the blog

How to Contribute to an Open Source Project

Sarah Drasner offers this primer on contributing to open source projects for those who may be new to it. I particularly like this bit:

As a maintainer, it’s frustrating when someone put in a lot of work and submits a giant honking PR that does 10 different things. It’s really tough to review, and inevitably, they’re doing six things you want, and four things you don’t. Not only that, it’s usually spread out over multiple files which is difficult to untangle. I’ve definitely closed PRs with some high-quality code I would like just because it would take forever for to review and manage it.

In my opinion, you have about 1,000% more chance of getting your PR merged and your time spent honored if you split things over multiple, smaller PRs.

This advice reminds me of what I learned a while back on the topic of starting a front-end refactor, too. Keeping focused is the hardest part about contributing to any project but it will be sure to pay off over time.

Ghost Buttons with Directional Awareness in CSS

Here’s a nifty trick from Jhey Tompkins where he creates a button that will fill its background based on the direction in which you hover over it. So, say you hover from the top, the background of the button will fill from top to bottom.

The niftiest part about this is that it’s solved completely in CSS!

Weekly Platform News

Šime Vidas has the latest scoop on what’s up with the web platform. First up he mentions that Apple has shipped the Music web app which is using Stencil to compile its web components.

Max Lynch wrote about this news and what makes it all so interesting:

Let that sink in: Apple just deployed into production nearly 50 web components powering a major app they have a significant amount of revenue and strategic value riding on. You can’t say that “no one uses Web Components” or they are “solving problems that don’t exist or have been solved better in user land” with a straight face anymore.

Some HTML is “Optional”

“There is a variety of HTML that you can just leave out of the source HTML and it’s still valid markup,” writes Chris in this great post about how peculiar HMTL can sometimes be. He shows that this markup is totally valid:

<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.

Also, Remy Sharp published a reply to this post with some of the background as to why this is the case:

Pre-DOM, pre-browsers, the world’s first browser was being written by Sir Tim Berners-Lee. There was no reference implementation and certainly no such thing as a parsing specification. The first browser, the WorldWideWeb.app, parsed HTML character by character applying styles as it went along. As opposed to today’s methods whereby a document object model is built up, then rendered.

[…] The paragraph tag (yes, in upper case) was intended to separate paragraphs, not wrap them.

Huh!

Various Methods for Expanding a Box While Preserving the Border Radius

Ana Tudor noticed this neat animation on Codepen where a box expands to fill a space on hover like this:

Ana then breaks down how they do this with pseudo-elements but notices that there’s a whole bunch of ways to make that animation. You can change the font-size, or the dimensions with calc(), scale(), or even…clip-path()?

SPONSOR

An Event Apart

Three days of design, code, and content for interaction designers and developers. Packed with tips, techniques, and insights into the future from industry shakers and shapers. You’ll come away inspired, and raring to return to work! Plus, you can use coupon code AEACP for $100 off any show!

There are a couple of upcoming dates:

Check out the website for lots more information about this unmissable conference. Seattle was the last one I went to and it gave me so much to think about.

PSA!

You were probably already doing this, but make sure you keep putting those width and height attributes on your <img> elements.

It’s very common to use CSS like max-width: 100%; height: auto; on images so they are fluid, which is good, but sadly for a long time it blew away the aspect ratio of the image and led to janky loading. Firefox Nightly has now fixed that, and relies on those attributes, and it’s coming Chrome as well. See the difference.