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

Turn Sublime Text 3 into a JavaScript IDE

Sublime Text is one of the most popular editors for web development and software development in general. But it’s only a text editor and not an IDE. In fact, Sublime doesn’t offer features like debugging tools, built-in tools for compiling and running applications, intelligent code suggestions, or code refactoring. Instead it offers a set of… continue reading

Eloquent JavaScript

This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here, or get your own paperback copy of the second edition. A paper third edition is being worked on, but it isn’t clear yet when it’ll be available.

CSS & JS Table Examples From CodePen

<Table> has always been a difficult HTML element to style across multiple browsers. But with CSS and JS you can easily achieve that and can create impressive table designs that fit your project. Here’s a list of some of the best CSS and JS tables I found on CodePen. Accordion CSS Table Mobile friendly accordion… continue reading

CSS Menu Examples From CodePen

Menus are an essential part of any mobile application or website. Because they help you navigate them, it’s important to get them right. With CSS3 you can make simple HTML menus into amazing navigation bars that will enhance your user experience. That’s why I put together a list of useful CSS menus effects that I… continue reading

25+ Best Vue.js Frameworks

vue.js is a progressive JavaScript Framework that focuses on building user interfaces. It is very small and light weight compared to other more complex front-end frameworks like AngularJS, Backbone.js and another kind of javascript frameworks. vue.js Very simple to use and easy to get started. It is important to know that it can do anything… 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