Checking if an input is empty with CSS

Is it possible to know if an input is empty with only CSS?

I had that question when I tried to make an autocomplete component for Learn JavaScript. Basically, I wanted to:

1. Hide a dropdown if the input is empty
2. Show the dropdown if the input is filled

<Image src="/assets/2018/empty-input-validation-css/autocomplete.gif" alt="autocomplete demo from https://learnjavascript.today" />

I found a way to do it. It's not perfect. There are a few nuances involved, but I want to share it with you.

The Gitignore file

If you don't want to commit a file into a Git repository, it makes sense not to have the file show up in the staging area.

You can do this with a Gitignore file.

Why support older browsers?

Why you have to care about old browsers?

Who use old browsers? Probably, users with old computers?

If they use old computers, they probably don't have money to buy a new one.

If they don't have money to buy a new computer, they probably will not buy anything from you as well.

If they will not buy anything from you, why you have to care about supporting their browsers?

To a business person, that's a perfectly reasonable train of thought. But why do we developers still insist on supporting older browsers?

What not to save into a Git repository

You should not commit these four types of files into your Git repository.

1. Files that don't belong to the project
2. Files that are automatically generated
3. Libraries (depends on the situation)
4. Credentials

Supporting older browsers—Part 3: JavaScript

It's easy to provide JavaScript support for older browsers. Most of the time, you just need to use a polyfill.

But there are more things you can do.

Undoing changes in Git

Undoing with Git

At this point, you already know Git is like a save point system. What you've done so far is to learn to save. But how do you undo, and go back to a previous state?

That's what we're going to cover

Supporting older browsers—Part 2: CSS

There are two ways to provide fallbacks for CSS features:

1. Property fallbacks
2. Feature queries

Git Tags

We use Git tags to create releases. In this video, you'll learn how to tags manually without Git Flow.

Supporting older browsers with Polyfills

You don't have to worry much about supporting older browsers today. They've been decent ever since Internet Explorer 8 died.

But the question remains: How should you go about supporting Internet Explorer 9 and other browsers? In the first place, should you even be thinking about supporting Internet Explorer 9?

We'll look at a few things you'd want to consider.

Switching to Dvorak as a web developer

I'm invested in QWERTY. I don't want to change keyboards if I can, but I was forced to switch to Dvorak. My left-hand ached when I typed in QWERTY.

And I didn't like Dvorak.

(At first)

But I've grown to like it.

In this article, I want to share how I switched over to the Dvorak system. This process is the same as learning any other skill.

If you had problems learning how to code, you'll benefit from learning this process.

How to take a good break

When I wrote about my [productive routine](/blog/becoming-more-productive-while-working-less/ 'Becoming more productive while working less') in a previous article, I said I'd work for 1.5 hours and take a break 30 minutes. And I'll repeat this sequence four times a day.

In my experiments, I reduced my work hours to 4.5 hours (3 x 1.5-hour slots) and managed to get 40% more work done.

The key to this routine isn't simply sitting at my desk for 1.5 hours each sprint.

The key is 30-minute break.

If I don't rest properly, I'll waste the next 1.5 hours of work because I'm not focused. When I'm not focused, I can't get work done.

So today, I want to share how I take a proper break.

How to review and edit a pull request

When you submit a pull request, a collaborator will have the right to review your pull request. They'll decide whether to accept your pull request. If they accept your pull request, your code will be merged into the branch you requested for.

You're going to learn how a review process will look like from both points of view:

1. The person who's reviewing the process
2. The person who's submitting the review

Getting out of a productivity funk

It's ironic. I became unproductive after releasing an article about [increasing productivity while working less][1].

I got thrown into a situation where I couldn't find space and time to work for about a month.

I want to share with you what happened, how I handled the situation, and the lessons I learned. This article will help if you found yourself in a productivity funk.

How to submit a pull request

Let's say you wrote some code on the develop branch. You're done with what you were working on, and you want to merge it to the master branch.

But you don't know whether the code you've written is good enough. You want someone to review your code before you merge it into the master branch.

You can do that with a pull request

Creating a simple form with CSS Grid

You learned to create a simple form with Flexbox in the [previous article][1]. Today, you'll understand how to create the same thing with CSS Grid.

Here's what we're building:

<Image src="/assets/2018/simple-form-css-grid/form.png" alt="The simple form we're building consists of one email input and one submit button" />

How to use Git stashes as a temporary storage

Let's say you're coding on your development branch. And you get a notice that there's a bug on the production branch.

You want to check for the bug, but you don't want to lose the work you've created on the development branch. You also don't want to commit what you've written because they're not done yet.

What do you do? You can't commit and you can't switch branches. If you switch branches, things that aren't committed will flow over to the branch you switched to.

What you want to do is save the changes somewhere temporary while you switch over to another branch. **A Git stash is that temporary storage. **

Creating a simple form with Flexbox

The simplest form on the web contains an email field and a submit button. Sometimes, the email field and the submit button is placed on the same row, like this:

<Image src="/assets/2018/simple-form-flexbox/form.png" caption="Email and submit button on the same row" />

This UI looks simple! But it can be difficult to build if you're using older methods like inline-block. The hard part is getting the email field and button to align visually.

The great news is: CSS Grid or Flexbox can help you build this form easily.

How I remember CSS Grid properties

The syntax for CSS Grid is foreign and hard to remember. But if you can't remember CSS Grid's syntax, you won't be confident when you use CSS Grid.

To wield CSS Grid effectively, you need to remember its properties and values.

I want to share how I remember the most common CSS Grid properties today. This will help you use CSS Grid without googling like a maniac.

Semantic Versioning

We created numbers like 1.0.0 and 1.0.1 for releases and hotfixes when we worked on Git Flow. What do these numbers represent, and why do we use them?

These numbers represent the version number of the product we put out in the world. We use them because we're following a best practice called Semantic Versioning.

When we use Semantic Versioning, developers will know whether a change will break their code. The numbers give a clue to the kind of changes that have occurred.

Many popular projects use Semantic Versioning. Examples are React and Vue.

Becoming more productive while working less

I don't have time to learn.

Many people say that to themselves. I say that to myself too.

I haven't learned much this year because I was on a tight schedule to create content. I had to create one article and one video every week for the blog. I also had to create as many Learn JavaScript lessons as I can.

And I was almost burned out. I was unhappy and depressed.

Learning is important to me. When I don't learn, I start to feel guilty.

One day, I decided enough was enough. I had to change up my schedule to allow time for learning. I did some experiments over the next few weeks and found a way where I could give myself 1.5 hours to learn every day. The best part is, I created even more content than I did before!

I want to share with you my experiment and how I tweaked my schedule to allow time for learning. I hope it'll help you find some time to learn as well.