DEV Community

Cover image for Web workers cheatsheet & 4 other webdev tips you may want to know ๐Ÿš€
Mustapha Aouas
Mustapha Aouas

Posted on • Updated on

Web workers cheatsheet & 4 other webdev tips you may want to know ๐Ÿš€

1. Web workers cheatsheet

A worker thread can perform tasks without interfering with the user interface. This can be handy if you want to perform a CPU heavy operation for example:

Web workers cheatsheet

ย 

2. Manipulating placeholders with CSS

๐Ÿ“How to style a placeholder? Use the ::placeholder pseudo element

๐Ÿ“How to target an input with a visible placeholder? Use the :placeholder pseudo class

Manipulating placeholders with CSS

ย 

3. Make your headers look better

You can use the text-rendering CSS property to provides information to the rendering engine about what to optimize for when rendering text:

Make your headers look better

ย 


Hi there! I'm Mustapha, a technical writer, speaker and a passionate JS / TS developer. Follow me on Twitter for daily tech tips ๐Ÿš€


ย 

4. Sass mixins cheatsheet

You can use Mixins to define styles that can be re-used throughout your stylesheets:

Sass mixins

ย 

5. Text alignement with HTML

You can use <sup> HTML element to display a superscripts: a raised baseline using smaller text, and <sub> to render a subscripts: a lowered baseline and smaller text:

Text alignement with HTML

You can achieve the same behaviour with the vertical-align CSS property. More on this below:

ย 
ย 

Let's connect

That's it for this week. I hope you liked it. If you did, please share it with your friends & colleagues and follow me on Twitter @theAngularGuy where I tweet about web development and computer science ๐Ÿš€

Cheers!

Top comments (6)

Collapse
 
jaykobo profile image
Jakob StrauรŸ

Great content series and I really love the style of your images. On point!

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you Jacob! ๐Ÿ™

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi

Super amazing content man!!

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you ๐Ÿคœ๐Ÿค›

Collapse
 
gamerseo profile image
Gamerseo

Good tips. But when designing your website, you should always remember about the appropriate page speed. This is one of the most important aspects of SEO.

Collapse
 
mustapha profile image
Mustapha Aouas

I guess you are referring to the โ€˜ text-renderingยด property. Itโ€™s not something one should use on every element thatโ€™s for sure. Thatโ€™s why I targeted only headers on the snippet, but maybe I should add a note or a warning about this.