Tags: guides

Using Fetch [↗]

A detailed guide to making Ajax calls with Fetch.

WebExtensions 101 [↗]

A detailed guide for creating browser extensions using web technologies (HTML, CSS, and JavaScript).

Animated Bézier Curves [↗]

Some nifty interactive animations that show how Bézier curves work.

Golden Guidelines for Writing Clean CSS [↗]

Four simple rules for writing clean CSS.

  • Avoid global and element selectors
  • Omit overly specific selectors
  • Use semantic class names
  • Don’t tie CSS too closely to markup structure

Seems like good advice.

HTML5 Page Structure Basics [↗]

A back-to-basics look at the HTML5 header, section, article, nav, aside and footer elements. The section element still confuses me.

A guide to connecting to Twitter from Python using Twython [↗]

Came across this whilst browsing the Raspberry Pi Learning Resources. I’d not heard of the Twython module and it looks like it could be a lot of fun to play with. I’m thinking I’ll probably dust off my Raspberry Pi for this and I may even attempt a bit of hardware hacking too.

Create a Simple Web Extension [↗]

At Mozilla’s recent all hands event in Hawaii I set out to create my first web extension; I wanted the extension to be useful but simple, something with a real use case. In the end I created a very simple web extension that continuously monitors the document.title to replace foul words with asterisks, a safety measure to avoid embarrassment when sharing your screen or having people looking over your shoulder. Let me walk you through how simple creating a basic web extension is!

A good guide to creating your first web extension.

Learn CSS Flexbox in 3 Minutes [↗]

In this post you’ll learn the most important concepts of the flexbox layout in CSS, which will make your life easier if you find yourself struggling with CSS layouts from time to time.

We’ll only focus on core principles, while leaving out stuff you shouldn’t care about until you’ve understood the basics.

A super simple introduction to using flexbox.

Editing Images in CSS: Filters [↗]

Consider a situation where you have to have high-contrast, blurred or brighter versions of particular images on your website. Prior to CSS filters, your only options were either to upload different versions of these images or manipulate the images with JavaScript.

Unless you want to manipulate the pixels in the original image, CSS filters provide an easy way out. Let’s begin this tutorial with a brief discussion of all available filters.

A nice guide to using CSS filters on images. See demo for testing browser compatibility.

A practical security guide for web developers [↗]

Security issues happen for two reasons –

  1. Developers who have just started and cannot really tell a difference between using MD5 or bcrypt.
  2. Developers who know stuff but forget/ignore them.

Our detailed explanations should help the first type while we hope our checklist helps the second one create more secure systems. This is by no means a comprehensive guide, it just covers stuff based on the most common issues we have discovered in the past.

I can’t think that I’ve ever seen a really exhaustive web development security checklist, so this looks promising. Still in development, but definitely worth keeping an eye on, or contributing to.

◀ Older