The Ultimate Guide to Flexbox Centering

Flexbox is a popular CSS layout module that helps you position HTML elements on the screen. There are multiple use cases when it can be a godsend; horizontal and vertical centering is one of them. Flexbox centering solves common alignment problems you might encounter when working with the traditional CSS box model. It allows you… continue reading

Facebook Placeholders

Content Placeholders ? A while ago, the great and (not always) glorious Facebook introduced content placeholders that appear to users while the page content is still being loaded, yielding a fantastic user experience. It’s not always possible to load content as fast as we would want to, but at least, we can make the wait… continue reading

Move from jQuery to Vue

As someone who has used jQuery for many. years and has recently become a Vue convert, I thought it would be an interesting topic to discuss the migration process of working with one to the other.

Handling broken images with the service worker

A few years ago, I wrote about how we can use css to style broken images. The technique leveraged on the fact that any styling to the ::before or ::after pseudo-elements on the <img> element will only be applied if the image doesn’t load. So, we could style those elements and they would only display… continue reading

The best front-end hacking cheatsheets 

It’s rather impossible to remember all the APIs by hearert. This is when cheatsheets jump in! Here are the best front-end cheatsheets I’ve gathered. Javascript ES2015 features https://devhints.io/es6 Javascript http://overapi.com/javascript Javascript Regular expression https://www.debuggex.com/cheatsheet/regex/javascript React https://devhints.io/react Redux https://github.com/linkmesrl/react-journey-2016/blob/master/resources/egghead-redux-cheat-sheet-3-2-1.pdf Vuejs https://vuejs-tips.github.io/cheatsheet/ Vuex https://vuejs-tips.github.io/vuex-cheatsheet/ Angular 4 https://angular.io/guide/cheatsheet Flexbox https://yoksel.github.io/flex-cheatsheet/ SCSS https://devhints.io/sass Stylus https://devhints.io/stylus GraphQL Missing your favorite cheatsheet?… continue reading

Hamburger Menu Animations

Four different menu animations for menu button toggle between hamburger, cross and back icon. See the Pen Hamburger Menu Animations by Tamino Martinius on CodePen. Prefer Dots? See the Pen Dot Menu Animations by Tamino Martinius on CodePen.

Scrolling Gradient

If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that. But, what if you don’t want a perfectly vertical gradient? Like you want just the top left corner… continue reading

Styling elements based on sibling count

The original idea belongs to André Luís, but I think it could be improved to be much less verbose. André’s solution is like this: /* one item */ li:nth-child(1):nth-last-child(1) { width: 100%; } /* two items */ li:nth-child(1):nth-last-child(2), li:nth-child(2):nth-last-child(1) { width: 50%; } /* three items */ li:nth-child(1):nth-last-child(3), li:nth-child(2):nth-last-child(2), li:nth-child(3):nth-last-child(1) { width: 33.3333%; } /*… continue reading