Druct

The Web in 2020: Extensibility and Interoperability

In the past few years, we’ve seen a lot of change and diversion in regard to web technologies. In 2020, I foresee us as a web community heading toward two major trends/goals: extensibility and interoperability. Let’s break those down.

Extensibility

Extensibility describes how much someone can take a particular technology and extend it to their own needs. We’ve built a componen..

Bad accessibility equals bad quality

Here’s a smart post from Manuel Matuzovic where he digs into why accessibility is so important for building websites:

Web accessibility is not just about keyboard users, color contrast or screen readers. Accessibility is a perfect indicator for the quality of a website. Accessibility is strongly interlocked with other areas of web design and web development. If your website is accessible, it usually ..

Hamburger ☰ Heaven

A pleasant little romp through iconography and culture from Sophia Lucero. The "hamburger" menu icon we're familiar with now is really a sign from Taoist cosmology.

Besides ☰, which represents heaven 天, we have ☱ for lake/marsh 澤, ☲ for fire 火, ☳ for thunder 雷, ☴ for wind 風, ☵ for water 水, ☶ for mountain 山, and ☷ for ground 地.

We

Pair Programming: Benefits, Tips & Advice for Making it Work

Pair Programming — a pair that's greater than the sum of its parts. You may have heard about pair programming and wondered whether it was worth trying in your workplace. On the surface it sounds simple, but two developers sitting together are not all that it takes to achieve productive..

Edgium

January 15th, 2020 was the day Microsoft Edge went Chromium. A drop in browser engine diversity. There is a strong argument to be made that's not good for an ecosystem. Looked at another way, perhaps ..

Searching the Jamstack

Here's Raymon Camden on adding site search functionality to a site that is statically hosted. A classic trick! Just shoot 'em to Google and scope the results to your site:

<form action="https://www.google.com/search" method="get"<input type="search" name="q" value="site:https://www.raymondcamden.com " autofocus size="50"<input type="submit" value="Search"</form

..

The Mozilla Developer Roadshow: Asia Tour Retrospective and 2020 Plans

November 2019 was a busy month for the Mozilla Developer Roadshow, with stops in five Asian cities —Tokyo, Seoul, Taipei, Singapore, and Bangkok. Today, we’re releasing a playlist of the talks presented in Asia, with subtitles available for all these talks in languages spoken in the countries on this tour: Japanese, Korean, Chinese, Thai, as well as English. We covered CSS Subgrid, Mixed Reality, Web Compatibility, and more.

The post ..

JAMstack vs. Jamstack

It's just a word to evoke the idea that serving as much as you can statically while using client-side code and hitting serverless APIs for any needs after that.

The "official website" changed their language from JAMstack (evoking the..

What makes a site Jamstack?

I admit I didn’t know the ins and outs of what the Jamstack is until recently, despite having heard the term so frequently. I think I’m not alone in this. It’s an elusive term — how is it different from what came before, especially considering it shares so many similarities? Thankfully, Divya Sasidharan is breaking down so many aspects of Jamstack every day of January in a series of posts called..

positionstack

(This is a sponsored post.)

Say you have an address that your user typed in, like 1600 Pennsylvania Avenue NW, Washington, DC, USA, and now you need more information about it. Maybe you need the proper country code. Maybe you need the latitude and longitude. Maybe you need the postal code.

positionstack is an API

Using MySQL with Node.js and the mysql JavaScript Client

NoSQL databases are rather popular among Node developers, with MongoDB (the "M" in the MEAN stack) leading the pack. When starting a new Node project, however, you shouldn't just accept Mongo as the default choice. Rather, the type of database you choose should depend on your projec..

How to Turn a Procreate Drawing into a Web Animation

I recently started drawing on my iPad using the Procreate app with Apple Pencil. I’m enjoying the flexibility of drawing this way. What usually keeps me from painting at home are basic things, like setup, cleaning brushes, proper ventilation, and other factors not really tied to the painting itself. Procreate does a pretty nice job of emulating painting and drawing processes, bu..

The Best Color Functions in CSS?

I've said before that HSL is the best color format we have. Most of us aren't like David DeSandro, who can read hex codes. HSL(a) is Hue, Saturation, Lightness, and alpha, if we need it.

hsl(120, 100%, 40%)

Hue isn't intuitive, but it's not t..

Getting Started with Front End Testing

Amy Kapernick covers four types of testing that front-end devs could and should be doing: