“lives in a sort of purgatory”

Brad Frost:

A front-end designer ... lives in a sort of purgatory between worlds:

  • They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios
  • They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons.
  • They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging.
  • They understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc.

A front-end developer is aware.

“Write a script”

Jeremy Keith, on teaching people JavaScript for the first time:

A lot of that boils down to this pattern:

When (some event happens), then (take this action).

We brainstormed some examples of this e.g. "When the user submits a form, then show a modal dialogue with an acknowledgment." I then encouraged them to write a script …but I don't mean a script in the JavaScript sense; I mean a script in the screenwriting or theater sense. Line by line, write out each step that you want to accomplish. Once you've done that, translate each line of your English (or Portuguese) script into JavaScript.

Pseudo code. I'm a big fan.

Writing a code flow out in plain English works great for beginners, and in my experience remains useful forever. I find myself regularly writing pseudo code in Slack and in bug/idea tickets, although I've perhaps graduated from plain English to my own weird non-language:

IF (user_is_pro? AND has_zero_posts)
  OR (signed_up_less_than_three_days_ago) {
    // ajax for stuff
    // show thing
}

Optimizing GIFs for the Web

Ire Aderinokun describes a frustrating problem that we’ve probably all noticed at one point or another:

Recently, I’ve found that some of my articles that are GIF-heavy tend to get incredibly slow. The reason for this is that each frame in a GIF is stored as a GIF image, which uses a lossless compression algorithm. This means that, during compression, no information is lost in the image at all, which of course results in a larger file size.

To solve the performance problem of GIFs on the web, there are a couple of things we can do.

Switching to the <video> element seems to have the biggest impact on file size but there are other optimization tools if you have to stick with the GIF format.

Transparent JPG (With SVG)

Let's say you have a photographic image that really should be a JPG or WebP, for the best file size and quality. But what if I need transparency too? Don't I need PNG for that? Won't that make for either huge file sizes (PNG-24) or weird quality (PNG-8)? Let's look at another way that ends up best-of-both-worlds.

(more…)

Coding CSS for Context

Snook on naming a class:

Here's what's important:

  • We want to identify that this is a variation on our button.
  • We want to indicate the purpose of this button style.
  • We want to avoid tying the code to a particular context that could change.

Creating Non-Rectangular Headers

Over at Medium, Jon Moore recently identified "non-rectangular headers" as a tiny trend. A la: it's not crazy popular yet, but just you wait, kiddo.

We're talking about headers (or, more generally, any container element) that have a non-rectangular shape. Such as trapezoids, complex geometric shapes, rounded/elliptical, or even butt-cheek shaped.

Most of the web really sucks if you have a slow connection

Dan Luu on the sorry state of web performance:

...it’s not just nerds like me who care about web performance. In the U.S., AOL alone had over 2 million dialup users in 2015. Outside of the U.S., there are even more people with slow connections.

This other note is also interesting, and I think that Dan is talking about Youtube’s project “Feather” here:

When I was at Google, someone told me a story about a time that “they” completed a big optimization push only to find that measured page load times increased. When they dug into the data, they found that the reason load times had increased was that they got a lot more traffic from Africa after doing the optimizations. The team’s product went from being unusable for people with slow connections to usable, which caused so many users with slow connections to start using the product that load times actually increased.

SVG Squircle

Amelia Bellamy-Royds:

I wondered if I could come up with an easy formula to create a "squircle" type curve with SVG bezier curves. It wouldn't be the exact shape, but it could be close. The idea:

The "end points" of the curve segments are the mid-points of each side of the rectangle, where everything should be perfectly straight. The control points then stretch out along the edges until the curvature at the corners is about right.

Rogie took a crack at it with CSS a few years ago, as well.

ShopTalk 250: Web Security

For all y'all that want to understand the potential attacks, and potential defenses, of front-end web development.

It's pretty wild. The dangers are big, real, and many. But the tools we have to fight back are up to the job, we just need to know about them and use them.

Build (Custom Styled) Online Forms with Wufoo

Need to put a form on a website? I've been using Wufoo to do that for a decade. It's so simple. Just drag and drop the fields you need and select the options you want. Even things that could be complex aren't, like adding logic (e.g. if they select this, show that) or pagination. Never worry about spam. Never worry about losing data, since it's all stored right in Wufoo itself (with API access!).

There are too many features to explain right here (OK two more: payments! reports!). One of my favorites, though, which might appeal to all y'all CSS people: you have complete CSS control over the forms you build. Let's take a look at how that works.

(more…)

Design Your Content Typography First (and a Look at Type Nugget)

How often have you seen a "completed" site that still has lorem ipsum text lurking in the quiet corners? While we often strive for perfection in our designs and code, I am reminded every time I stumble across a garbled bit of lorem ipsum that not all aspects of web development process are given the attention they deserve.

Developing a complete and detailed suite of typographic elements is an often-overlooked aspect of the process. While not always as prominent or exciting as other graphic elements, typography is an essential part of every site and does most of the heavy lifting to fulfill each page's purpose: transferring information.

While I can't do anything about lazy lorem ipsum use, I've been working on a tool that helps develop beautiful and robust online typography.

(more…)

Performance Under Pressure

Here's a neat transcript of a talk by Mat Marquis where he details how he made the Bocoup website lightning fast, particularly with snazzy font loading tricks and performance tools to help monitor those improvements over time.

Although, my favorite part of the talk is when Mat goes into why he wants to make websites:

I don't get excited about frameworks or languages—I get excited about potential; about playing my part in building a more inclusive web.

I care about making something that works well for someone that has only ever known the web by way of a five-year-old Android device, because that's what they have—someone who might feel like they're being left behind by the web a little more every day. I want to build something better for them.

JavaScript Start-Up Performance

Addy Osmani:

Smaller JavaScript bundles generally do result in a faster load time (regardless of our browser, device & network connection) but 200KB of our JS !== 200KB of someone else's and can have wildly different parse and compile numbers.

Using file size as a metric isn't an awful crime, because it does matter, but it's only part of the JavaScript performance story.

I also found the overview of the discussion of bytecode interesting. Browsers download JavaScript, parse it, turn it into an abstract syntax tree, then turn that into bytecode. What if we could do that during our build steps and ship bytecode?

My opinion is shipping bytecode can increase your load-time (it's larger) and you would likely need to sign the code and process it for security. V8's position is, for now, we think exploring avoiding reparsing internally will help see a decent enough boost that precompilation may not offer too much more, but are always open to discussing ideas that can lead to faster startup times.

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