Direction Aware Hover Effects

This is a particular design trick that never fails to catch people’s eye! I don’t know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I’d round a few of them up here. Noel Delagado See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen. The detection here is done by tracking the mouse position on mouseover and mouseout and calculating which side was crossed. It’s a small amount of clever JavaScript, the meat of which is figuring out that direction: var getDirection = function (ev, obj) { var… Read More

Continue Reading

Offline *Only* Viewing

It made the rounds a while back that Chris Bolin built a page of his personal website that could only be viewed while you are offline. This page itself is an experiment in that vein: What if certain content required us to disconnect? What if readers had access to that glorious focus that makes devouring a novel for hours at a time so satisfying? What if creators could pair that with the power of modern devices? Our phones and laptops are amazing platforms for inventive content—if only we could harness our own attention. Now Bolin has a whole magazine around this same concept called The Disconnect! The Disconnect is an… Read More

Continue Reading

The Best UX is No User Interface at All

I have been obsessed with User Interfaces (UI) for as long as I can remember. I remember marveling at the beauty that was Compaq TabWorks while I played “The Incredible Machine” and listened to “Tears For Fears—Greatest Hits” on the family computer. Don’t judge me—I was listening to “Mad World” way before Donny Darko and that creepy rabbit. If none of those references landed with you, it’s probably because I’m super old. In the words of George Castanza, “It’s not you, it’s me.” That’s another super old reference you might not get. You know what—forget all that, let’s move on. I really got into UI when I bought my own… Read More

Continue Reading

A Short History of WaSP and Why Web Standards Matter

In August of 2013, Aaron Gustafson posted to the WaSP blog. He had a bittersweet message for a community that he had helped lead: Thanks to the hard work of countless WaSP members and supporters (like you), Tim Berners-Lee’s vision of the web as an open, accessible, and universal community is largely the reality. While there is still work to be done, the sting of the WaSP is no longer necessary. And so it is time for us to close down The Web Standards Project. If there’s just the slightest hint of wistful regret in Gustafson’s message, it’s because the Web Standards Project changed everything that had become the norm… Read More

Continue Reading

Using Default Parameters in ES6

I’ve recently begun doing more research into what’s new in JavaScript, catching up on a lot of the new features and syntax improvements that have been included in ES6 (i.e. ES2015 and later). You’ve likely heard about and started using the usual stuff: arrow functions, let and const, rest and spread operators, and so on. One feature, however, that caught my attention is the use of default parameters in functions, which is now an official ES6+ feature. This is the ability to have your functions initialize parameters with default values even if the function call doesn’t include them. The feature itself is pretty straightforward in its simplest form, but there… Read More

Continue Reading

Wufoo Forms Integrate With Everything

(This is a sponsored post.) Wufoo helps you build forms you can put on any website. There’s a million reasons you might need to do that, from the humble contact form, to a sales lead generation form, to a sales or registration form. That’s powerful and useful all by itself. But Wufoo is even more powerful when you consider that it integrates with over 1,000 other web services. Wufoo integrates with over a dozen CRM solutions, including Salesforce, Nutshell, Highrise, Nimble, and more. Wufoo integrates with the most popular email marketing services like MailChimp, Campaign Monitor, Sendloop, and more. Wufoo integrates with payment processors like Stripe, PayPal, Chargify, and more.… Read More

Continue Reading

Website Sameness™

Here’s captain obvious (yours truly) with an extra special observation for you: BAR WITH SPECIAL MESSAGE LOGO PLATFORM↓ SOLUTIONS↓ PRICING BOLD STATEMENT CALL TO ACTION GRID OF LITTLE ILLUSTRATIONS LARGE BOLD FOOTER©2018 — Chris Coyier (@chriscoyier) January 30, 2018 It came across as (particularly trite) commentary about Website Sameness™. I suppose it was. I was looking at lots of sites as I was putting together The Power of Serverless. I was actually finding it funny how obtuse the navigation often is on a SaaS sites. Products? Solutions? Which one is for me? Do I need to buy a product and a solution? Sometimes they make me feel dumb, like I’m… Read More

Continue Reading

ABEM. A more useful adaptation of BEM.

BEM (Block Element Modifier) is a popular CSS class naming convention that makes CSS easier to maintain. This article assumes that you are already familiar with the naming convention. If not you can learn more about it at getbem.com to catch up on the basics. The standard syntax for BEM is: block-name__element-name–modifier-name I’m personally a massive fan of the methodology behind the naming convention. Separating your styles into small components is far easier to maintain than having a sea of high specificity spread all throughout your stylesheet. However, there are a few problems I have with the syntax that can cause issues in production as well as cause confusion for… Read More

Continue Reading

Creating Cue Files from Markdown

Pretty specific, huh? While we’re going to do exactly what the title says, this post is more about a learning exercise and an example of getting help on the internet. My podcast editor, Chris Enns, is always looking for ways to improve his work and make podcasting better. One kinda cool way to do that is to offer “chapters” so that people can jump around in a podcast to specific points. Through TimeJump, we already offer that on the website itself. Those happen in the format of hash links like this: #t=12:18. Believe it or not, relative links like that, in the show notes, actually work in some podcatchers (podcast… Read More

Continue Reading

Turn that frown upside down

I got an email that went like this (lightly edited for readability): CSS makes me sad. I’ve been programming web apps for more than a decade now. I can architect the thing, load every required data, make all the hops and jumps until I have a perfectly crafted piece of markup with relevant info. And then I need to put a box to the left of another box. Or add a scrollbar because a list is too big. Or, god forbid, center some text. I waste hours and feel worthless and sad. This only happens with CSS. I think this is a matter of practice. I bet you practice all… Read More

Continue Reading

Take a coding quiz, get offers from top tech companies

(This is a sponsored post.) That’s how TripleByte works. The companies that find hires from TripleByte (like Dropbox, Apple, Reddit, Twitch, etc) don’t have as many underqualified applicants to sort through because they’ve come through a technical interview of sorts already. Direct Link to Article — Permalink Take a coding quiz, get offers from top tech companies is a post from CSS-Tricks

Continue Reading

Recreating the GitHub Contribution Graph with CSS Grid Layout

Ire Aderinokun sets out to build the GitHub contribution graph — that’s the table with lots of green squares indicating how much you’ve contributed to a project – with CSS Grid: As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of my CSS ended up being less than 30 lines, with only 15 declarations! I’m so excited about posts like this because it shows just how much fun CSS Grid can be. Likewise, Jules Forrest has been making a number of brilliant experiments on this front where… Read More

Continue Reading

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable. The result we want to reproduce. In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This polyfill is great for getting started to play with conic-gradient(), as it allows us to use them to build stuff that works across the board. Sadly, it doesn’t work with CSS… Read More

Continue Reading

​HelloSign API: Your development time matters

(This is a sponsored post.) We know that no API can write your code for you, but ours comes close. We’ve placed great importance on making sure our API is the most developer-friendly API available — prioritizing clean documentation, an industry-first API dashboard for easy tracking and debugging, and trained API support engineers to personally assist with your integration.  Meaning, you won’t find an eSignature product with an easier or faster path to implementation.  It’s 2x faster than other eSignature APIs.   If you’re a business looking for a way to integrate eSignatures into your website or app, test drive HelloSign API for free today. Direct Link to Article — Permalink ​HelloSign API: Your… Read More

Continue Reading

Slate’s URLs Are Getting a Makeover

Greg Lavallee writes about a project currently underway at Slate, where they’ve defined a new goal for themselves: Our goal is speed: Readers should be able to get to what they want quickly, writers should be able to swiftly publish their posts, and developers should be able to code with speed. They’ve already started shipping a lot of neat improvements to the website but the part that really interests me is where they focus on redefining their URLs: As a web developer and product dabbler, I love URLs. URLs say a tremendous amount about an application’s structure, and their predictability is a testament to the elegance of the systems behind… Read More

Continue Reading

An Open Source Etiquette Guidebook

Open source software is thriving. Large corporations are building on software that rests on open collaboration, enjoying the many benefits of significant community adoption. Free and open source software is amazing for its ability to bring together many people from all over the world, and join their efforts and skills by their interests. That said, and because we come from so many different backgrounds, it’s worth taking a moment to reflect on how we work together. The manner in which you conduct yourself while working with others can sometimes impact whether your work is merged, whether someone works on your issue, or in some cases, why you might be blocked… Read More

Continue Reading

A Front End Developer’s Guide to GraphQL

No matter how large or small your application is, you’ll have to deal with fetching data from a remote server at some point. On the front end, this usually involves hitting a REST endpoint, transforming the response, caching it, and updating your UI. For years, REST has been the status quo for APIs, but over the past year, a new API technology called GraphQL has exploded in popularity due to its excellent developer experience and declarative approach to data fetching. In this post, we’ll walk through a couple of hands-on examples to show you how integrating GraphQL into your application will solve many pain points working with remote data. If… Read More

Continue Reading
react_lecon_1

Formulaires en React.js : Dans quels cas Utiliser Refs?

React.js fournit deux manières de récupérer les valeurs depuis les éléments. La première méthode consiste à implémenter ce qu’on appelle les “controlled components” (voir ce billet sur le sujet) et la seconde est d’utiliser la propriété ref de React. Les “Controlled components” sont assez lourds à mettre en place. La définition des caractéristiques d’un controlled component est que la valeur affichée est liée à l’état du component . Pour mettre à jour la valeur on execute une fonction attachée à l’écouteur onChange sur l’élément form. La fonction onChange met à jour l’état de la propriété, qui à son tour met à jour la valeur de l’élément form. (Avant de s’enfoncer plus loin, si vous voulez… Read More

Continue Reading