- The most recent blog articles - mostly about PHP, Golang, databases or general website dev ops.
How to: Enable Web Components in Firefox (Shadow DOM)
Web components, sometimes mixed up with the Shadow DOM, are now available in Firefox v29+ under this flag – but they won’t be available to the average end-user. How to Enable: In your address bar, go to: about:config Search for the property: dom.webcomponents.enabled and mark it as true. If your already on a development page, remember to reload it. Further Reading http://css-tricks.com/modular-future-web-components/ http://oliversmith.io/technology/2012/05/19/inspecting-the-shadow-dom-in-google-chrome-inspector/ http://soledadpenades.com/2014/01/02/shadow-dom-in-firefox/Load HTML once with AJAX
While working on a project recently, a dynamically loaded section was needed. It was used in a transition between step one and two in the user’s journey, after an API call had been made. The user was allowed to go back to step one at any time, resulting in a new API call – which was to be expected – but the call to get the HTML for step two was also made again. The same HTML which had just been loaded the first time around.How to: Create Panels with matching Heights
Flexbox & History One of the best ways to achieve a row of boxes which match in their heights is with an up-and-coming feature called flexbox. This is particularly important when presenting dynamic content, if you’re using pre-selected, static content then often the best approach to take is just to add a min-height within the CSS for the columns. As soon as the content extends a min-height however they will escape and have differing heights.Submit an Array with a HTML Form
Most of us will know how HTML forms work: inputs contained within the form send data to a url, by either a GET or POST request. This will result in the server being able to access this data on the other end. The way to do this usually goes something like this:Kerning your Typography on the Web
Kerning is the process of adjusting the spacing between two specific letters or pairs within typography. It’s not to be confused with tracking which is the spacing between letters (letter-spacing) or leading which is the spacing between lines (line-height). The kerning process has been used throughout the history of printed text but is less commonly used on the web.3 Reasons to Start using Sass Today
Sass is great! So I thought I would write a few brief reasons why you should start using Sass today (if you’re not already – in which good on you!). For those of you who haven’t heard of Sass, it’s a CSS preprocessor. This means that as you write your CSS it gets processed and converted into standard CSS. This means that all the work is done before reaching the browser, so you don’t need any special libraries or extra JavaScript to use it.Blur a Background Image (with help from blur.js)
Recently, in a very small project of mine, I wanted to create a full-size image as the background and to blur it a little to create an abstract but interesting backing image. Initially, webkit filters were looked at, which are admittedly limited in terms of browser support, but also gave a nasty looking white edge to the images. So a JavaScript option was considered instead.Avoid Spam Online: How to Show your E-mail Safely
We all know about spam and up until recently there wasn’t an e-mail address shown on this blog (just a contact form) for this very reason. Most of us have also tried different methods of stopping spam bots picking up our favorite e-mail addresses (ever written [at] instead of @? Or shown your e-mail address as an image?). This article should outline a few different methods of showing your e-mail address publicly and safely – and hopefully without any impact to the usability of the end user.New SASSy Blog!
Thought I would mention that I’ve just created another blog, named SASS-Tutorials, for web designers wanting to learn about popular subject of pre-processors. It focuses on SASS, the ‘Syntactically Awesome Stylesheets’ and gives readers a step by step guide on different aspects. Each of the aspects is chosen as a lesson and will be written about.How to: Speed up Your Website
Getting your website to load faster is not like running the 100m – or a marathon. It doesn’t need training or a team behind you to make noticeable improvements. All it takes is a little know-how (which I’ll help you with), an actual website and a few minutes of your time.Smart CSS layouts with Calc()
A few weeks ago I wrote about the Traditional Box Model and the ‘box-sizing’ CSS property, which, in essence, allowed you to easily create two adjacent boxes with a width of 50% and any amount of padding, because padding was included in the width. In this article I will talk about a different method of achieving this with the help of the ‘calc()’ expression.Traditional Box Model vs. W3C Box Model
One of the first things you come to learn about when first introduced to CSS is the box model. It works on the condition that every element within HTML is square and the box model defines how each element is then subsequently defined in terms of width and height. Although not explicitly mentioned, it was introduced in 1996 with the CSS1 specification (those were they days ‘ey?).Responsive Images, Now & The Future
With the huge flurry of mobile users now using the internet and browsing the web on those tiny screens of theirs – websites must adapt to accommodate this. One of the many big issues at the moment in the web design community is responsive design and if it should be used over mobile only sites (Google thinks so). If you are one of the lucky few making a new responsive design or trying to make your current design responsive then this article might just help you with making your images responsive.HTML5 WebKit Speech Input
With the addition and extension of input types with HTML5 forms, one newcomer to the scene is the microphone input. This allows you to fill inputs, like a search or name field, through the use of your microphone. It is closely connected with mobile use and is currently only available on Chrome 11+ but not to worry because it shouldn’t be relied upon anyway and should, currently, only be used to enhance your forms.Choose an Open Graph Image with WordPress
Facebook uses it’s Open Graph technology along with specific Open Graph meta tags to get information about pages with the iconic Like button on them. These are documented extensively on ‘Facebook Developers‘ and are introduced well by David Walsh on his blog.18+ Web Resources & Tools
Here are a few web tools and resources which I use on a regular basis to help build reliable and fast websites. Most of them are online and well worth checking out (if you haven’t already). They are ruffly split into the categories, ‘Testing & Checking’, ‘Conversion & Compression’, ‘Frameworks & Libraries’ and ‘Text Editors’. Also, if you like this page, but sure to share it with your friends.CSS Speech Bubbles & Triangles
You may have seen various types of speech bubbles across the web, some use images and others use pure CSS to create this effect. In this article we will be looking at how you can create a triangle with CSS and how you can use a triangle to then create simple speech bubbles.CSS Text Multi-Columns
Columns are lovely things. They allow you to read text easier, make chunks of text look nicer and now with the power and beauty of CSS3 you can make columns dynamically – yey! No more table columns and splitting of paragraphs to achieve the same effect.Stop CSS Caching After a Change in WordPress
If you’re in the process of developing a WordPress theme, browser caching isn’t necessary and it can be a pain because your theme won’t always update after you have made a change. On the other hand caching plays a crucial role in the speed and download times of websites. So what are we to do? In WordPress it’s actually very simple, if you know what you’re doing, to set up a function to force the browser cache into re-downloading the CSS file again. Depending on your level of PHP knowledge, there is a plugin already built for this task called CSS Cache Buster, or you can write your own function.CSS3 Transitions : The Basics
JavaScript libraries, such as jQuery, make easy work of animations and effects when working with websites. They allow you to move, change and fade different DOM elements in your web page, which can improve your website visually and sometimes make it more usable. There are, however, disadvantages to using jQuery, for example, most modern web browsers have the ability to turn JavaScript off and Firefox has a popular addons called ‘NoScript‘ which will also disable JavaScript – and your effects too. CSS, with version three of its specification, has CSS transitions which allow you to do very similar animations and effects as jQuery.