How to Build a HTML Canvas Vanishing Point Cube

How to Build a HTML Canvas Vanishing Point Cube

These last few months I’ve taken a deeper interest in math, physics, and art. I wanted to make a fun and interesting project. So I took inspiration from something I learned in art class along time ago – Vanishing Points. I built a 3D cube representation in HTML canvas using plain javascript. This tutorial below will show you how to create one as well.

Modular Sass Media Queries for Responsive Webdesign

Modular Sass Media Queries for Responsive Webdesign

What is responsive webdesign?

It is a designing a website that looks good on both desktop and mobile. Something that appears great on mobile, might not scale well into a desktop view. Or vice versa.

When you design a site, there’s generally 2 approaches you can make

  • Mobile First
  • Desktop First

Designing a responsive site generally means you will be doing both of these things, but more so one over the other. There’s no right away to go about it. For instance, if you are designing a site dedicated to food recipes, a mobile first approach makes more sense. Designing a site specialized in legal contracts would benefit from a desktop first approach.

How to Make a CSS Mega Menu

How to Make a CSS Mega Menu

Megamenu’s are an essential frontend component found in many sites. From sites like bloomberg.com, nike, etc – these enhance the user experience so a user can find what they need quickly. Especially for sites hosting a lot of nested content, such as an ecommerce site. Example from Nike:

How to add PrismJS Codesnippets To WordPress

How to add PrismJS Codesnippets To WordPress

This is a guide on how to implement prismJS (a code snippet editor) to wordpress. And how to use prismJS both inside the admin panel, and wordpress.com’s writing tool. So you can write and add code snippets seamlessly.

What is prismJS?

It’s a popular syntax code highlighter, commonly used in webdevelopment blogs and documentation. Examples include reactJS, css-tricks, sitepoint, and smashing magazine. You’re in good hands if the all top CSS blogs use prismJS.

Windows VS MacOs for Development

Windows VS MacOs for Development

About 3 months ago, I attended my first hackathon ever. I dusted off my 4 year -dated windows laptop.

Long story short, it didn’t pan out. Windows decided to update at the worst time possible. Right when things were getting good, a project scope was established, and everyone was ready to get working. read more

Explaining Cryptocurrencies with a Treasure Map Analogy

Explaining Cryptocurrencies with a Treasure Map Analogy

Cryptocurrencies have been the latest craze for some time. Bitcoin and many other blockchain currencies have exploded in growth over the past few years. They are here to stay long term.

But what is a cryptocurrency and how does it work?

Any complex subject can always be broken down to an analogy. In this case, I will be using treasure maps. Like the ones in Pirates of the Carribean. read more

Dedicated Desktop Icon Shortcut Keys

Dedicated Desktop Icon Shortcut Keys

One of my biggest producitity drains is seamlessly switching to different applications. Windows doesn’t have good native ways to do this. Especially when I have 10 or 20 different things open. A picture is worth 1000 words, so take a look at my work environment: read more