Comparing Javascript & jQuery Through Building a Pomodoro Timer

Modern web development offers an incredible variety of tools, libraries, and frameworks to build web sites/applications. As of 2016, jQuery, React, Angular, and Vue are the most popular front-end libraries/frameworks in use. They can all be used to build and accomplish similar things, but in different ways. What are the advantages/disadvantages of each? How does […]


No More Janky CSS: Using OOCSS, SMACSS and BEM

Janky: Of extremely poor or unreliable quality. If you are writing just a few lines of CSS, it may not make a difference how you structure it. But as a project grows and the CSS becomes larger, the question of structuring CSS becomes more pertinent. There are a number of methodologies for writing better CSS. […]


CSS Background-image tricks and gotchas

Using a css background-image property is CSS allows for versatility in creating a background element. The css background image property can be applied to a graphic which includes, PNG, JPG, GIF, WEBP, and SVG, alongside the special case of using a gradient as the background.           There are then multiple files that can be used for […]


CSS Position Tricks and Gotchas

A position property is what allows you to manipulate the location of an element. It has multiple values and properties so that you can change the location based to your own liking. These assist when dealing with multiple elements or a parent and child element. One of the first code examples we’re going to show […]


How to Use CSS Native Variables

Variables in CSS (or custom properties or CSS native variables) are becoming more widely adopted across the major browsers. CSS variables allow for enhanced control over your code as well as the ability to reduce clutter and avoid repetition in your code. What’s more, with CSS native variables you can use JavaScript to update application and values based on […]


What is SVG and Why use it?

Scalable Vector Graphics or SVG is an image format which allows you to draw two-dimensional vector graphics to be used on websites. The graphics are defined in XML format. The scalable aspect lets you resize and zoom without compromising image quality. SVG images can be static or animated. SVG is a W3C standard so it […]


What are CSS sprites used for?

CSS sprites combine multiple images into a single image. What is a CSS image sprite? A webpage normally contains several images. These include icons, buttons, logos, relevant pictures and other graphics. Let’s say you have a blog and want to display four images. You have icons to indicate next page and a FAQ section, a […]


Introduction to CSS animations

Humans are drawn to moving shiny objects. Our natural reflexes to notice movement is one of the reasons adding an animation to a website or app is a powerful tool. It has the capability to accentuate certain parts of the website or draw interest to a product. When done well with beautiful design elements and […]


How to Make Circular/Curved Text with JavaScript

Creating circular text, or text on an curved path, in webpages may seem like somewhat of a intimidating task. There isn’t really a straightforward way to achieve it with standard HTML and CSS. There is a JavaScript plugin or two out there with some pretty decent results, but using plugins means extra dependency and load time associated tacked on to your project. […]


Accessibility 102: Beyond alt=””

Communication is a fundamental social process, a basic human need and the foundation of all social organization. It is central to the Information Society. Everyone, everywhere should have the opportunity to participate and no one should be excluded from the benefits the Information Society offers. — Geneva Declaration of Principles, United Nations World Summit on […]