Creating a Vue.js Serverless Checkout Form: Configure the Checkout Component

This is the fourth post in a four-part series. In Part one, we set up a serverless Stripe function on Azure. Part two covered how we hosted the function on Github. The third part covered Stripe Elements in Vue. This last post shows how to configure the checkout component and make the shopping cart fully functional. Article Series: Setup and Testing Stripe Function and Hosting Application and Checkout Component Configure the Checkout Component (This Post) As a reminder, here’s where we are in our application at this point: Configuring the Checkout Component We have to do a few things to adjust the component in order for it to meet our… Read More

Continue Reading

The Wix Code Database and Data Modeling

(This is a sponsored post.) I happen to know many of the readers of CSS-Tricks are strong web designers and developers. Most of you probably don’t use website builders very often, as you are a website builder. You love the control. You love the possibilities. You want to be close to the metal because that’s your expertise. But you also know the costs. Everything you chose to yourself piles on to the responsibility you take on. Technical debt. Using a site builder like Wix can dramatically reduce that technical debt, and you might be surprised at how little control you have to give up. The following post is about some… Read More

Continue Reading

How to Style a Form With Tailwind CSS

If you’ve been staying in the loop with the latest CSS frameworks, you’ve probably already heard of the newest kid on the block: Tailwind CSS. According to its documentation, « Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. » In practice, this means using a variety of classes that closely map to underlying CSS properties. For example, applying a class like .text-center to an element means that we’re setting its text-align property to center. Simple enough, right? Using utility classes like this allows us to spend more time iterating through designs and avoiding premature abstraction of our CSS. Then, once we’re happy with our designs, Tailwind makes it… Read More

Continue Reading

Creating Vue.js Component Instances Programmatically

This article assumes basic understanding of Vue.js framework and how to create components in it. If you are new to Vue, then this CSS-Tricks series is a good place to start. I have been on a Vue.js project that required the ability to create components programmatically. By programmatically, I mean you create and insert the components completely from JavaScript, without writing anything in the template. This article aims to illustrate how different aspects of using components in a template, such as instantiation, props passing, slots, mounting, translate to JavaScript code. Normally if you are working with the recommended Single File Component style, you would have a Button component like so:… Read More

Continue Reading

Using CSS Clip Path to Create Interactive Effects

Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path. We will discuss how to do the cutting and how we can use these cut-out parts to create some interesting effects, combining these cut-out parts with the original image. I’ll use the following photo as an example. The flower stands out from the rest of the photo. It is a natural focal point to cut out and create our effects around. Image courtesy of Unsplash. Credit: Hermes Rivera Creating the SVG First off,… Read More

Continue Reading

2017/2018 JavaScript

There has been a lot of research on the landscape this year! Here are a few snippets from a bunch of articles. There is a ton of information in each, so I’m just picking out a few juicy quotes from each here. Perhaps the most interesting bit is how different the data looked at is. Each of these is different: a big developer survey, npm data, GitHub data, and StackOverflow data. Yet, they mostly tell the same stories. The Brutal Lifecycle of JavaScript Frameworks Ian Allen of StackOverflow writes: JavaScript UI frameworks and libraries work in cycles. Every six months or so, a new one pops up, claiming that it… Read More

Continue Reading

Secure Contexts Everywhere

Anne van Kesteren for Mozilla says: Effective immediately, all new features that are web-exposed are to be restricted to secure contexts. Web-exposed means that the feature is observable from a web page or server, whether through JavaScript, CSS, HTTP, media formats, etc. A feature can be anything from an extension of an existing IDL-defined object, a new CSS property, a new HTTP response header, to bigger features such as WebVR. In contrast, a new CSS color keyword would likely not be restricted to secure contexts. In other words, if your site isn’t HTTPS, you won’t get new web tech features. Holy jeepers. The reasoning is the web should be using… Read More

Continue Reading

How to use variable fonts in the real world

Yesterday Richard Rutter posted a great piece that explores how the team at Clearleft built the new Ampersand conference website using variable fonts (that’s the technology that allows us to bundle multiple widths and weights into a single font file). Here’s the really exciting part though: Two months ago browser support for variable fonts was only 7%, but as of this morning, support was at over 60%. This means font variations is a usable technology right now. And the nifty thing is that there’s a relatively large number of variable fonts to experiment with, not only in browsers but also in desktop design apps, too: Variable font capable software is… Read More

Continue Reading

Tools for Thinking and Tools for Systems

I’ve been obsessed with design tools the past two years, with apps like as Sketch, Figma and Photoshop perhaps being the most prolific of the bunch. We use these tools to make high fidelity mockups and ensure high quality user experiences. These tools (and others) are awesome and are generally upping our game as designers and developers, but I believe that the way they’ve changed the way we produce work and define UX will soon produce yet another new wave of tools. In the future, I predict two separate categories of design applications: tools for thinking and tools for systems. Let me explain. Tools for Thinking A short while ago… Read More

Continue Reading

Bend any Website’s CSS to Your Will With Stylish or Stylebot

As a self-professed CSS nerd, I take it upon myself to inject my own CSS onto websites when I need to to fix bugs or just fiddle them up to my liking. This is a post that details how I do that using the Stylish and Stylebot browser extensions. Direct Link to Article — Permalink Bend any Website’s CSS to Your Will With Stylish or Stylebot is a post from CSS-Tricks

Continue Reading

Routing and Route Protection in Server-Rendered Vue Apps Using Nuxt.js

This tutorial assumes basic knowledge of Vue. If you haven’t worked with it before, then you may want to check out this CSS-Tricks guide on getting started. You might have had some experience trying to render an app built with Vue on a server. The concept and implementation details of Server-Side Rendering (SSR) are challenging for beginners as well as experienced developers. The challenges get more daunting when you have to do things like data fetching, routing and protecting authenticated routes. This article will walk you through how to overcome these challenges with Nuxt.js. What You will Learn The title might have limited the scope of this article because you’re… Read More

Continue Reading

Building a Good Download… Button?

The semantics inherent in HTML elements tell us what we’re supposed to use them for. Need a heading? You’ll want a heading element. Want a paragraph? Our trusty friend is here, loyal as ever. Want a download? Well, you’re going to want… hmm. What best describes a download? Is it a triggered action, and therefore should be in the domain of the element? Or is it a destination, and therefore best described using an element? Buttons Do Things, Links Go Places There seems to be a lot of confusion over when to use buttons and when to use links. Much like tabs versus spaces or pullover hoodies versus zip-ups, this… Read More

Continue Reading

Boilerform: A Follow-Up

When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I’d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris’ idea struck a chord with me immediately, so I got enthusiastically involved in the comments like an excitable puppy. That excitement led me to go ahead and build out the initial version of Boilerform, which you can check out here. The reason for my initial excitement was that I have a guilty pleasure for forms. In various jobs, I’ve worked with forms at a pretty intense level and have learned a lot about them.… Read More

Continue Reading

People Writing About Style Guides

Are you thinking about style guides lately? It seems to me it couldn’t be a hotter topic these days. I’m delighted to see it, as someone who was trying to think and build this way when the prevailing wisdom was nice thought, but these never work. I suspect it’s threefold why style guides and design systems have taken off: Component-based front-end architectures becoming very popular Styling philosophies that scope styles becoming very popular A shift in community attitude that style guides work That last one feels akin to cryptocurrency to me. If everyone believes in the value, it works. If people stop believing in the value, it dies. Anyway, in… Read More

Continue Reading

Variable Fonts with Jason Pamental

We’ve already hit you with a one-two punch of variable fonts today. Robin shared Richard Rutter’s post on real-world usage of them. Ollie Williams introduced us to the in’s-and-out’s of using them on the web. I figured we’d make it a trifecta and link up our discussion about variable fonts with Jason Pamental. Dave and I talk with Jason for an entire hour digging into the real story, possibilities, and future of all this variable fonts business. Don’t miss his or Mandy Michael’s demo Collections either. Direct Link to Article — Permalink Variable Fonts with Jason Pamental is a post from CSS-Tricks

Continue Reading

One File, Many Options: Using Variable Fonts on the Web

In 2016, an important development in web typography was jointly announced by representatives from Adobe, Microsoft, Apple, and Google. Version 1.8 of the OpenType font format introduced variable fonts. With so many big names involved, it’s unsurprising that all browsers are on-board and racing ahead with implementation. Font weights can be far more than just bold and normal—most professionally designed typefaces are available in variants ranging from a thin hairline ultralight to a black extra-heavy bold. To make use of all those weights, we would need a separate file for each. While a design is unlikely to need every font-weight, a wider variety than bold and normal adds visual hierarchy… Read More

Continue Reading

The Wix Code Database and Data Modeling

I happen to know many of the readers of CSS-Tricks are strong web designers and developers. Most of you probably don’t use website builders very often, as you are a website builder. You love the control. You love the possibilities. You want to be close to the metal because that’s your expertise. But you also know the costs. Everything you chose to yourself piles on to the responsibility you take on. Technical debt. Using a site builder like Wix can dramatically reduce that technical debt, and you might be surprised at how little control you have to give up. The following post is about some new and very powerful new… Read More

Continue Reading

A Site About Serverless Technology

I know some of you have a visceral and negative feeling toward the word serverless. I felt that way at first too, but I’m kinda over it. Even if it’s not a perfect word, it’s done a good job of encapsulating a movement into a single word. That movement is far more than I’m qualified to explain. But I do very much think it’s worth knowing about. Developers of all sorts can take advantage of it, but I’m particularly fascinated about what it can do to extend the front-end developer toolbelt. I made a website called The Power of Serverless for Front-End Developers just for this! Rather than re-hash what… Read More

Continue Reading

Designer-Oriented Styles

James Kyle: Components are a designer’s bread and butter. Designers have been building design systems with some model of “component” for a really long time. As the web has matured, from Atomic Design to Sketch Symbols, “components” (in some form or another) have asserted themselves as a best practice for web designers … Designers don’t care about selectors or #TheCascade. They might make use of it since it’s available, but #TheCascade never comes up in the design thought process. (Okay okay… most designers. You’re special. But we both knew that already.) I think James makes strong points here. I’m, predictably, in the camp in which I like CSS. I don’t… Read More

Continue Reading

Tales of a Non-Unicorn: A Story About the Roller Coaster of Job Searching

Hey there! It’s Lara, author of the infamous« Tales of a Non-Unicorn: A Story About the Trouble with Job Titles and Descriptions » from a couple years back. If you haven’t read that original article, I recommend skimming it to give you some context for this one, but I think you’ll still find value here even if you don’t. A lot has happened since I wrote that article in 2015, and this follow-up has been in the works for a good six months. I ended up, not with a solution for the job titles conundrum or a manifesto about the importance of HTML and CSS, rather a simple, honest story about my… Read More

Continue Reading

Monitoring unused CSS by unleashing the raw power of the DevTools Protocol

From Johnny’s dev blog: The challenge: Calculate the real percentage of unused CSS Our goal is to create a script that will measure the percentage of unused CSS of this page. Notice that the user can interact with the page and navigate using the different tabs. DevTools can be used to measure the amount of unused CSS in the page using the Coverage tab. Notice that the percentage of unused CSS after the page loads is ~55%, but after clicking on each of the tabs, more CSS rules are applied and the percentage drops down to just ~15%. That’s why I’m so skeptical of anything that attempts to measure « unused… Read More

Continue Reading

Making CSS Animations Feel More Natural

It used to be that designers designed and coders coded. There was no crossover, and that’s the way it was. But with the advent of CSS transitions and animations, those lines are blurring a bit. It’s no longer as simple as the designer dictating the design and the coder transcribing—designers must now know something about code, and coders must know something about design in order to effectively collaborate. As an example, let’s say a designer asks a developer to make a box bounce. That’s it—no additional instruction. Without some cross-knowledge and a common vocabulary, both sides are a little lost in this communication: the developer doesn’t have enough information to… Read More

Continue Reading

WordPress User Survey Data for 2015-2017

A grand total of 77,609 responses from WordPress users and professionals collected by Automattic between 2015 and 2017. The stats for 2015 and 2016 have been shared at the annual State of the Word address and 2017 marks the first time they have been published on WordPress News. A few items that caught my attention at first glance: Between 66% and 75% of WordPress users installed WordPress on their own. In other words, they were savvy enough to do it without the help of a developer. Hosting providers were next up and clocked in at 13-14% of installs. WordPress professionals described their clients as large and enterprise companies only 6-7%… Read More

Continue Reading

Careful Now

Tom Warren’s « Chrome is turning into the new Internet Explorer 6 » for The Verge has a title that, to us front-end web developers, suggests that Chrome is turning into a browser far behind in technology and replete with tricky bugs. Aside from the occasional offhand generic, « Chrome is getting so bad lately, » comments you hear, we know that’s not true. Chrome often leads the pack for good web tech. Instead, it’s about another equally concerning danger: developers building sites specifically for Chrome. In theory, that’s not really a thing, because if you build a website with web standards (of which there isn’t really much of an alternative) it’ll work in… Read More

Continue Reading

​Incapsula’s Global DDoS Threat Landscape Report

(This is a sponsored post.) The newly released Q3 2017 Global DDoS Threat Landscape Report features insights on attacks and mitigation. These are some of the key findings: Bitcoin was one of the most targeted industries High packet rate attacks grew more common A third of network layer attacks were highly persistent Botnet activity out of India and Turkey continued to climb Learn about the top attacked countries, industries, and vectors here and how to protect your site with Incapsula. Direct Link to Article — Permalink ​Incapsula’s Global DDoS Threat Landscape Report is a post from CSS-Tricks

Continue Reading

HTML 5.2 is Done, HTML 5.3 is Coming

The W3C has completed its second round of HTML5 recommendations for implementation. The entire announcement is worth a read because there are interesting tidbits that provide more context and personnel changes within W3C, but the highlights of this recommendation are nicely summed up: Many of the features added integrate other work done in W3C. The Payment Request API promises to make commerce on the Web far easier, reducing the risks of making a mistake or being caught by an unscrupulous operator. New security features such as Content Security Policy protect users more effectively, while new work incorporated from ARIA helps developers offer people with disabilities a good user experience of… Read More

Continue Reading

react-perf-devtool

Here’s an interesting and super useful Chrome extension by Nitin Tulswani that measures React component performance: React Performance Devtool is a browser extension for inspecting the performance of React Components. It statistically examines the performance of React components based on the measures which are collected by React using window.performance API. Along with the browser extension, the measures can also be inspected in a console. Also, if you’re interested in learning more about the process of this tool, there’s a great thread that digs into the history of the project. Direct Link to Article — Permalink react-perf-devtool is a post from CSS-Tricks

Continue Reading

The latest ways to deal with the cascade, inheritance and specificity

The cascade is such an intrinsic part of CSS that they put it right there in the name. If you’ve ever needed to use !important to affect specificity in the cascade, you’ll know that it can be a tricky thing to deal with. In the early days of CSS, it was common to see highly specific selectors like this: #sidebar ul li {} We’re all much better at managing specificity nowadays. It’s a widely accepted best practice to keep specificity low and flat—to shun ID selectors, to make liberal use of classes, and to avoid unnecessary nesting. But there are still plenty of situations where a more specific selector will… Read More

Continue Reading

Simplifying the Apple Watch Breathe App Animation With CSS Variables

When I saw the original article on how to recreate this animation, my first thought was that it could all be simplified with the use of preprocessors and especialy CSS variables. So let’s dive into it and see how! The result we want to reproduce. The structure We keep the exact same structure. In order to avoid writing the same thing multiple times, I chose to use a preprocessor. My choice of preprocessor always depends on what I want to do, as, in a lot of cases, something like Pug offers more flexibility, but other times, Haml or Slim allow me to write the least amount of code, without even… Read More

Continue Reading

New flexbox guides on MDN

MDN released a comprehensive guide to Flexbox with new and updated materials by Rachel Andrew. The guide includes 11 posts demonstrating layouts, use cases and everything you could possibly want or need to know on the topic. All of the related Flexbox properties are nicely and conveniently attached to the table of contents, making this extremely easy to use. In this post, Rachel adds helpful thoughts and context about Flexbox. Her comment on Flexbox initially being treated as a silver bullet solution for all our layout issues struck me: Prior to Grid shipping, Flexbox was seen as the spec to solve all of our layout problems, yet a lot of… Read More

Continue Reading

Third-Party Scripts

Trent Walton: My latest realization is that delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts. No matter how solid I think my prototype is, it doesn’t absolve me from paying attention to what happens during implementation, specifically when it comes to the addition of these third-party scripts. I recently had a conversation with a friend working on quite a high profile e-commerce site. They were hired to develop the site, but particularly with performance in mind. They were going the PWA route, but were immediately hamstrung by third-party scripts. One of them, apparently unavoidably, couldn’t be HTTPS, meaning the… Read More

Continue Reading

Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility

For a beginner, accessibility can be daunting. With all of the best intentions in the world, the learning curve to developing compliant, fully accessible websites and apps is huge. It’s also hard to find the right advice, because it’s an ever-changing and increasingly crowded landscape. I’ve written this post to give you some tips on small things that can make a big difference, while hopefully not affecting your development process too much. Let’s dive in! Document Structure and Semantics It probably doesn’t come as much of a surprise that structuring your HTML in an organized, semantic way will make a big difference. Screen readers rely on a well-structured document in… Read More

Continue Reading

Creating a Vue.js Serverless Checkout Form: Application and Checkout Component

This is the third post in a four-part series. In part one, we set up a serverless Stripe function on Azure. Part two covered how we hosted the function on Github. This post will focus on wiring everything up as a Vue.js application. Article Series: Setup and Testing Stripe Function and Hosting Application and Checkout Component (This Post) Configure the Checkout Component (Coming Soon) Stripe has a number of ways to build out a checkout form, the most basic being a single button on the page that you trigger to pull up their custom modal. There’s a repo and component for this, but as easy as that is to implement… Read More

Continue Reading

Creating a Vue.js Serverless Checkout Form: Stripe Function and Hosting

We’re now in the second post of a four-part series where we’re creating a checkout form application in Vue.js that can accept payments via the Stripe API. In part one, we looked at the concept of serverless functions, set one up in Azure, and connected it to a Stripe account. In this post, we’ll focus on setting up Stripe as a serverless function and hosting it all on Github. Article Series: Setup and Testing Stripe Function and Hosting (This Post) Application and Checkout Component (Coming Soon) Configure the Checkout Component (Coming Soon) First, we’re going write our function and test it out in the portal, but eventually we’re going to… Read More

Continue Reading

“Stop Using CSS Selectors for Non-CSS”

I saw Nicole Dominguez tweet this the other day: say it louder for the people in the backhttps://t.co/prDKo5QaZi — nicole (@sodevious) January 11, 2018 I wasn’t at this conference, so I have very little context. Normally, I’d consider it a sin to weigh in on a subject brought up by looking at two out-of-context slides, but I’m only weighing in out of interest and to continue the conversation. The idea seems to be that if you need to select an element in the DOM with JavaScript, don’t use the same selector as you would in CSS. So if you have… …and you need to apply an event listener to that… Read More

Continue Reading

Creating a Vue.js Serverless Checkout Form: Setup and Testing

There comes a time in any young app’s life when it will have to monetize. There are a number of ways to become profitable, but accepting cash is a surefire way to make this more direct. In this four-part tutorial, we’ll go over how to set up a serverless function, make it talk to the Stripe API, and connect it to a checkout form that is setup as a Vue application. This may sound daunting, but it’s actually pretty straightforward! Let’s dig in. Article Series: Setup and Testing (This Post) Stripe Function and Hosting (Coming Soon) Application and Checkout Component (Coming Soon) Configure the Checkout Component (Coming Soon) What is… Read More

Continue Reading

Meet the New Dialog Element

Keith Grant discusses how HTML 5.2 has introduced a peculiar new element: . This is an absolutely positioned and horizontally centered modal that appears on top of other content on a page. Keith looks at how to style this new element, the basic opening/closing functionality in JavaScript and, of course, the polyfills that we’ll need to get cross-browser support right. Also, I had never heard of the ::backdrop pseudo element before. Thankfully the MDN documentation for this pseudo element digs into it a little bit more. Direct Link to Article — Permalink Meet the New Dialog Element is a post from CSS-Tricks

Continue Reading

The Ultimate Guide to Headless CMS

(This is a sponsored post.) The World Has Changed—So Must the CMS Having a responsive website is no longer enough. Your audience expects a seamless and personalized customer experience across all their devices—the age of headless technology is coming. Headless CMS is the next generation in content management for brands that want to stay ahead of the curve by engaging customers through the growing number of channels. Download The Ultimate Guide to Headless CMS ebook for a deep look into what headless CMS is, and why it should be at the top of your list when choosing a new CMS. Download the ebook now! Direct Link to Article — Permalink… Read More

Continue Reading

Get Ready for `display: contents;`

Last year I asked, « Will we be flattening our HTML for CSS Grids?«  The issue is that the only way for elements to participate in the same CSS grid together (or flexbox for that matter) is for them to be siblings. So, in some cases we might be incentivized to forego HTML semantics for the benefit of layout (not great). One answer to this is display: contents;—a magical new display value that essentially makes the container disappear, making the child elements children of the element the next level up in the DOM. Fast forward to today, Chrome is shipping it, WebKit is shipping it, and Firefox has shipped it. Vote… Read More

Continue Reading

A Sliding Nightmare: Understanding the Range Input

You may have already seen a bunch of tutorials on how to style the range input. While this is another article on that topic, it’s not about how to get any specific visual result. Instead, it dives into browser inconsistencies, detailing what each does to display that slider on the screen. Understanding this is important because it helps us have a clear idea about whether we can make our slider look and behave consistently across browsers and which styles are necessary to do so. Looking inside a range input Before anything else, we need to make sure the browser exposes the DOM inside the range input. In Chrome, we bring… Read More

Continue Reading

::part and ::theme, an ::explainer

Monica Dinculescu on ::part and ::theme, two pseudo-elements that are very likely to gain traction and receive more attention in the new year. They’re designed to help us create and style web components, as Monica explains: The current new proposal is ::part and ::theme, a set of pseudo-elements that allow you to style inside a shadow tree, from outside of that shadow tree. Unlike :shadow and /deep/, they don’t allow you to style arbitrary elements inside a shadow tree: they only allow you to style elements that an author has tagged as being eligible for styling. They’ve already gone through the CSS working group and were blessed, and were brought… Read More

Continue Reading

Fragmented HTML5 Video

I have seen various implementations of the Voronoi Diagram. Perhaps you’ve seen one without knowing what it was. It almost looks like random stained glass: Wikipedia: In mathematics, a Voronoi diagram is a partitioning of a plane into regions based on distance to points in a specific subset of the plane. It’s even possible to create a Voronoi diagram by hand, as eLVirus88 has documented. I wanted to give it a try. The Idea My idea is to chop up a video into fragmented parts (called cells) and put them into 3D space on a slightly different z-axis. Then, by moving the mouse, you would rotate the whole experience so… Read More

Continue Reading

Further working mode changes at WHATWG

The Web Hypertext Application Technology Working Group (WHATWG) announced that it has adopted a formal governance structure: The WHATWG has operated successfully since 2004 with no formal governance structure, guided by a strong culture of pragmatism and collaboration. Although this has worked well for driving the web forward, we realized that we could get broader participation by being clear about what rights and responsibilities members of the community have. Concretely, this involves creating an IPR Policy and governance structure. WHATWG was founded by folks at Apple, Mozilla and Opera. The new structure will be comprised of individuals from Apple, Google, Microsoft and Mozilla. The Big Four, you might say. I… Read More

Continue Reading

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`

One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a Grid, and then auto-place items in them. More specifically, our ability to specify how many columns we want in the grid and then letting the browser handle the responsiveness of those columns for us, showing fewer columns on smaller viewport sizes, and more columns as the screen estate allows for more, without needing to write a single media query to dictate this responsive behavior. We’re able to do that using just one line of CSS — the one-liner that reminds me of when… Read More

Continue Reading

Five Design Fears to Vanquish With CSS Grid

CSS grid, along with a handful of other new CSS properties, are revolutionizing web design. Unfortunately, the industry hasn’t embraced that revolution yet and a lot of it is centered around fear that we can trace back to problems with the current state of CSS grid tutorials. The majority of them fall into one of two categories: Re-creating classic web design patterns. Grid is great at replicating classic web design patterns like card grids and « holy grail » pages. Playing around. Grid is also great for creating fun things like Monopoly boards or video game interfaces. These types of tutorials are important for new technology. They’re a starting point. Now is… Read More

Continue Reading

​Wix.com: Make the Web Your Playground

(This is a sponsored post.) Here’s something you can do: kick off 2018 with your own professional website. The only thing you’ll need to get started is your imagination, a little free time, and an innovative website builder. Wix is the world’s most technologically advanced website builder. Sign up for Wix, choose a template, and start customizing it. Whether you’re a novice, a business owner, a sophisticated designer, or a professional website builder, you’ll have full control of your website – from design prototyping to production. Wix takes care of all the heavy lifting. You get reliable, safe, secure hosting that you’ll never need to worry about. You get a… Read More

Continue Reading

Front-End Tools: My Favorite Finds of 2017

Another twelve months have passed and I’m sure all of you have come across some interesting new coding techniques, technologies, CSS tricks (of course!), and other stuff that will make you more productive in 2018. As some of you might know, I curate a weekly newsletter called Web Tools Weekly, in which I feature dozens of links every week to new tools, mostly focusing on stuff that’s useful for front-end developers. So it’s an understatement to say that I’ve come across lots of new tools over the past 12 months. As I’ve done in years past, I’ve put together a brief look at some of my favorite finds in front-end… Read More

Continue Reading

You are what you document

There are so many little gems in this piece by Yevgeniy Brikman all about documentation. He digs into a lot more than simply documenting code though and focuses on how we can document every phase of our work, from design to process and beyond. Here’s my favorite lines that made me sit back and shout “Wahoo!”: When a developer uses your code, they are really learning a new language, so choose the words in it wisely. …programs must be written for people to read, and only incidentally for machines to execute. I like how Yevgeniy suggests that there are kinda two different mindsets that we have to get into when… Read More

Continue Reading

Additive Animation with the Web Animations API

These features have not landed in any stable browsers at the time of writing. However, everything discussed is already in Firefox Nightly by default and key parts are in Chrome Canary (with the Experimental Web Platform Features flag enabled), so I recommend using one of those browsers (when reading this article) to see as many of the features in action as possible. Regardless your preferred method of animation on the web, there will be times that you need to animate the same property in separate animations. Maybe you have a hover effect that scales an image and a click event that triggers a translate — both affecting the transform. By… Read More

Continue Reading