Select Page

Category: Intermediate

POSTing an Indeterminate Checkbox Value

There is a such thing as an indeterminate checkbox value. It’s a checkbox () that isn’t checked. Nor is it not checked. It’s indeterminate. We can even select a checkbox in that state and style it with CSS! Some curious points though: It’s only possible to set via JavaScript. There is no HTML attribute or value for it. It doesn’t POST (or GET or whatever else) or have a value. It’s like being unchecked. So, say you had a form like this: And, for whatever reason, you make that checkbox indeterminate: let veg = document.querySelector(".veg"); veg.indeterminate = true; If...

Read More

What makes a good front-end developer?

Defining what a front-end developer is and what they do is tough as it is. So, how do we set the bar for what makes for a good front-end developer? Here’s what a few folks have to say on the topic. I’ll argue that front-end developers need to master four different skills. Empathy Code Design Communication Zell Liew Front-End Developers, having learnt HTML, CSS and JS, are forced to take functionality into account when creating user experiences or making sure that the two disciplines work as one from a development perspective. They become all-rounders, having to understand what is actually happening between the AJAX data and the PHP file that’s sending off a mail or returning errors. Daine Mawer In my opinion, what defines a good front-end developer is one that has skilled knowledge of HTML, CSS, JS with a vast understanding of User design thinking as they’ll be building web interfaces with accessibility in mind. They should also be excited to learn, as the world of Front-End Development keeps evolving. The ability to stay in the loop is critical. Egwuenu Gift After I started to feel more comfortable with my responsibilities … I soon found my next challenge: to help build a stronger connection between the design and development teams. Though we regularly collaborated to produce high-quality work, these teams didn’t always speak the same language. Ronald Méndez...

Read More

Native-Like Animations for Page Transitions on the Web

Some of the most inspiring examples I’ve seen of front end development have involved some sort of page transitions that look slick, like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. There are a number of ways to accomplish these types of movement! Here’s what we’ll be building: Demo Site GitHub Repo We’ll build out the simplest possible distallation of these concepts so that you can apply them to any application, and then I’ll also provide the code for this more complex app if you’d like to dive in. Today we’ll be discussing how to create them with Vue and Nuxt. There are a lot of moving parts in page transitions and animations (lol I kill me), but don’t worry! Anything we don’t have time to cover in the article, we’ll link off to with other resources. Why? The web has come under critique in recent years for appearing “dated” in comparison to native iOS and Android app experiences. Transitioning between two states can reduce cognitive load for your user, as when someone is scanning a page, they have to create a mental map of everything that’s contained on it. When we move from page to page, the user has to remap that entire space. If an element is...

Read More

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 fully realize the designer’s vision, but the designer doesn’t really know what the options are and how to communicate them. With a very basic interpretation, you might end up with something that looks like this: See the Pen Bouncing Box 1 by Brandon Gregory (@pulpexploder) on CodePen. Not very exciting. Although, to be fair, this does meet all of the criteria given. We can definitely do better than this, though. The first thing to look at is the timing function. In the above example, we’re using a linear timing function, which means that the box is constantly moving at the same speed. In some cases, this is desirable; however, in the real world, motion usually doesn’t work like that....

Read More

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...

Read More
  • 1
  • 2
000webhost logo