I am not the most talented coder in the world. True. So I try to write as little code as possible. The less code I write, the less code can break, be maintained, and require explanation.

And I'm lazy - honey, and yes even with a spoon (I decided to use food analogies in the article).

But it turns out that the only guaranteed way to improve performance on the web is to write less code. Minify? Okay. Compress? Well yes. To cache? Sounds good. Generally refuse to code or use someone else's code initially? And now - in the apple! What is in the inlet must come out in one form or another, regardless of whether your picker was able to dissolve and digest this with his gastric juices (I, perhaps, give up on food analogies).

And that's not it. In addition to visible performance improvements, where you need the same amount of code, but you first need to chew it (could not resist), you can also save. It does not matter to my provider whether I am sending a bunch of small letters or one big one: it all adds up.

In the quest for diminishing, I like the most about it: in the end, only what is really needed, only what the user really needs, remains. Huge photo of some dude drinking latte? Throw out. Buttons of social networks that suck up a bunch of left code and break the page design? Kick ass them. Is this damn JavaScript that intercepts the right click and shows a custom modal window? Set in the cold!

It is not only about connecting pieces that break the interface. The way you write your own code also plays a big role in the quest for code reduction. Here are some tips and ideas. I wrote about them earlier, but in the context of convenience and responsive design. It just so happens that a flexible, user-friendly web requires less control on our part and is harder to break.

WAI-ARIA

First, WAI-ARIA! = Web accessibility. It’s just a tool to improve compatibility with some assistive technologies like a screen reader. Therefore, the first rule of ARIA is not to use it if not required.

LOL, no:

<div role="heading" aria-level="2">Subheading</div> 

Yes:

 <h2>Subheading</h2> 

The advantage of using native elements is that you will often not need to encode your own behavior. The following checkbox implementation is not only too verbose, but also depends on JavaScript, which controls state changes and overrides the standard for working with attributes and the GET method. The code is bigger and less reliable. Beauty!

 <div role="checkbox" aria-checked="false" tabindex="0" id="checkbox1" aria-labelledby="label-for-checkbox1"></div> <div class="label" id="label-for-checkbox1">My checkbox label</div> 

Styles? Do not worry, everything is under control. If you need custom styles at all, of course.

 <input type="checkbox" id="checkbox1" name="checkbox1"> <label for="checkbox1">My checkbox label</label> 

Grid

Have you ever enjoyed using or reading a website with more than two columns? Too much information that needs attention. “I wonder which of these navigation-like things really is the navigation I need?” This is a rhetorical question: I do not know what to do next and leave the site.

Of course, sometimes you want to put some thing next to another thing. For example, search results or something else. But why pull a ton of grid libraries here? Flexbox can do it literally with two blocks of definitions.

 .grid { display: flex; flex-flow: row wrap; } .grid > * { flex-basis: 10em; flex-grow: 1; } 

Now everything will stretch to about 10em wide. The number of columns depends on how many cells approximately 10em in size fit in the viewport. Is done. Go ahead. And, by the way, let's discuss such a thing:

 width: 57.98363527356473782736464546373337373737%; 

Do you know this number is based on a mystical proportion? The proportions that should evoke a sense of calm and awe? No, I did not know about it and I do not care. Just make the "Porn" button large enough to be seen.

Indentation

We know how to do it. Indent all elements using universal selectors. And redefine when necessary. Much will not be required.

 body * + * { margin-top: 1.5rem; } 

No, the universal selector will not degrade performance. This is heresy.

View

You do not need a whole Angular or Meteor to divide a simple page into "views". Views are just pieces of a page that are visible in moments when others are not visible. This can be done with CSS:

 .view { display: none; } .view:target { display: block; } 

“But single-page applications run the code when loading the view!”, You will say. I understand. There is an onhashchange event for this. You do not need libraries, and your links will be normal, standard, you can add them to bookmarks. That's cool. You can read more about this if interested.

Font size

Fine-tuning the font size can greatly inflate your media blocks. So you need to put this in the hands of CSS. One line of code.

 font-size: calc(1em + 1vw); 

Uh-uh ... that's all. There is even a minimum size, so there will not be unreadable tiny letters on mobile devices.

10k apart

As I said, I'm not the best coder in the world. I just know a few tricks. But with a little knowledge you can do a lot. This is the essence of the competition "10k Apart" - find out what can be achieved with 10kb or less. There are big prizes. I, as a judge, cannot wait to take up the study of all the cool applications, ideas and implementations that I would like to come up with myself. And what will you think of?