Having fun with link hover effects

A designer I work with was presenting comps at a recent team meeting. She had done a wonderful job piecing together the concept for a design system, from components to patterns and everything in between that would make any front-end developer happy.

But there was a teeny tiny detail in her work that caught my eye: the hover state for links was a squiggle.

(more…)

Safari Ripper ☠️

Security researcher Sabri posted a bit of code that will "force restart any iOS device." It's interesting to see HTML & CSS have this kind of dangerous power. It's essentially a ton of <div>s scaled to be pretty huge and then set over a repeating JPG image with each <div> blurring the background via backdrop-filter. It must cause such extreme and unhandled memory usage that it wreaks havoc on the browser as well as the entire operating system.

I was trying to test it out myself and be really careful not to execute it... but of course I did, and it crashed my Chrome 68 on a MacBook Pro. Not the whole operating system, but I had to force quit the browser. Then again, I suppose even while(true) {} can do that!

The comment thread on the gist hast more interesting details, like how it crashes iOS Safari 9+ (including the new version 12!) and weird behavior on the PlayStation 3 native browser.

Introducing the YOOtheme Pro Page Builder

YOOtheme Pro is a powerful theme and page builder developed by YOOtheme that provides a new experience of building websites in WordPress. Designers will get an easy and exciting way to design and create websites due to premium layouts and an intuitive page builder, and developers will especially appreciate its extendability and clean and semantic code. YOOtheme has been known as a leading theme provider for over 10 years, and now with YOOtheme Pro they created the next page builder to be watched for on the WordPress market.

(more…)

Using Scoped Slots in Vue.js to Abstract Functionality

Let’s start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots.

For example, you want to create a wrapper component that is styled in a specific way but you want to be able to pass any content to be rendered inside that wrapper (it might be a string, a computed value, or even another component).

(more…)

Twenty Years as a Freelance Web Developer: Wisdom Gained and Lessons Learned

In the summer of 1998, when President Clinton fended off allegations of sexual impropriety and Donald Trump filmed a cameo in a Woody Allen movie, I embarked on my career as a freelance web developer. Twenty years and more than 300 websites later, I’m still at it—always working on my own and always from home. Over that time, I’ve had the pleasure of partnering with many prominent advertising agencies and boutique design firms as well as scores of local businesses and individuals.

Those interested in making the switch to freelancing have often asked me for advice, and I’ve been happy to help with whatever words of wisdom I can provide. This article is a distillation of much of that. And it may prove helpful not only to developers and programmers who wish to freelance, but also designers, project managers, copywriters—anyone who desires to work independently from home in our industry. It’s a career path that I have loved, but it’s not for everyone.

(more…)

Aspect Ratio Media Elements and intrinsicsize

If you need an aspect-ratio sized <div></div> (or any element that can have children), you can do it. Perhaps the cleanest way is a custom-property-sized pseudo-element that pushes the correct minimum height through padding-based-on-width.

But media elements like <img /> don't have children. The <video></video> tag isn't self-closing, but when it is supported (almost always), the content of it is replaced with a shadow DOM you don't control. Besides, these are the only two elements that "size to an external resource." So, how do you enforce aspect ratio on them when using a variable width like 100% or 75vw? Well, once they load, they will have their natural aspect ratio, so that's nice. But it also means they don't know the height while they are loading and it may cause performance jank-ening reflow.

(more…)

Removing jQuery from GitHub.com frontend

Here’s how and why the team at GitHub has slowly been deprecating jQuery from their codebase:

We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling from jQuery until we were able to completely remove the library. In this post, we will explain a bit of history of how we started depending on jQuery in the first place, how we realized when it was no longer needed, and point out that—instead of replacing it with another library or framework—we were able to achieve everything that we needed using standard browser APIs.

The team explores how using tools like eslint-plugin-jquery discourages developers at GitHub from using jQuery, but the team also notes that they decided to remove certain design behaviors altogether to help them achieve this goal:

As part of our refined approach to building frontend features on GitHub.com, we focused on getting away with regular HTML foundation as much as we could, and only adding JavaScript behaviors as progressive enhancement. As a result, even those web forms and other UI elements that were enhanced using JS would usually also work with JavaScript disabled in the browser. In some cases, we were able to delete certain legacy behaviors altogether instead of having to rewrite them in vanilla JS.

I think all of this is wonderful news. It’s good for jQuery, it’s good for developers, and it’s good for the web. But it also shows just how far browsers have come since the first release of jQuery back in 2006. What will browsers be capable of 12 years from now, I wonder.

Why Designers Don’t Want to Think When They Read

We've all seen articles like "The Top 5 Ways To Fix Your Sign Up Flow and Get On With Your Life." Articles like this aren't wrong or bad, they are just shallow and a bit junk food-y and BuzzFeed-y. Of course, a designer's actual job is complicated, nuanced, and difficult. But deep dives into all that are far less common.

Khoi Vinh has been writing about this and points to some heavy self-reflection from Fabricio Teixeira and Caio Braga, publishers of the very popular UX Collective.

It’s clear that the currency of design discourse is really concerned with the “how” of design, not the “why” of it. As Teixeira and Braga write:

While designers tend to be skeptical of magic formulas—we’re decidedly suspicious of self-help gurus, magic diets, or miraculous career advice—we have a surprisingly high tolerance for formulaic solutions when it comes to design.

That’s a pointed criticism but, from my perspective, it’s also quite accurate.

XOXO 2018

There’s not much talk about frameworks here. There’s no shaming about old techniques, or jokes about JavaScript. There’s just a couple hundred people all around me laughing and smiling and watching talks about making things on the web and it all feels so fresh and new to me. Unlike many other conferences I’ve visited, these talks are somehow inclusive and rather feel, well, there’s no other word for it: inspiring.

I’m sitting in a little room buried underneath the Veterans Memorial Coliseum in Portland and I’m here for my third XOXO. And I can’t stop smiling.

Although the festival is not entirely focused on coding and front-end development, there are a lot of developers here that make art on the web for fun. From Jenn Schiffer’s pixel art to Monica Dinculescu’s emoji projects and Nicole He’s buck-wild enhance.computer, there’s a lot of interesting discussions about coding — but! — it’s from a very different perspective than the one I’m familiar with.

(more…)

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