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/
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 … Continued
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.
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 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.
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 … Continued
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 … Continued
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.
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.
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.
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?).