This section of Impressive Webs contains articles and tutorials that describe a particular front-end development technique in detail with code samples and often a demo page and download links. Some tutorials are step by step, and others are more generic.
Back in July I wrote a post called JavaScript String Methods Reference, outlining many of the ways strings can be manipulated in JavaScript.
Another area where JavaScript has a number of different methods available for use is Array manipulation, which I’ll cover in this post. As usual, I’ll do my best to keep it simple and accurate, but if I’ve erred or if you think I’ve omitted anything important, please comment.
Every element in an HTML document accepts a value for the CSS display property. The possible values you can use for display are many.
The three most commonly used values are none, block, and inline. But what if you don’t define a display value for an element? Well, all elements have an initial or default state for their display value. Let’s consider some of these and see some interesting things you might not have known.
This is a follow-up post to my previous article, posted yesterday, that discussed how to get up and running with Sass on Windows. At the end of that post I introduced an alternative to all the command-line based instructions.
So here I’ll quickly cover that alternative — Scout App, a free Mac and Windows-based native app produced and maintained by developers at Mutually Human.
There’s a ton of information floating around on preprocessors nowadays. Most of that info is geared towards Mac users, so in this post I’m providing a very simple guide to help Windows-based developers get up and running quickly with Sass (my preprocessor of choice).
Overall, Sass is not difficult at all to get set up, even if you’re doing it on the command-line. But if you have no interest in going through all these steps, but still want to use Sass on Windows, well, just skip to the final heading in this post for a reference to an app that lets you start using Sass on Windows with minimal setup.
On many sites and apps, you’ll often have to mark up and style a button that is not part of a list of links, and that basically stands alone, apart from surrounding content.
How should a single, standalone link or button be marked up? As with many things in web development, there isn’t really a right or wrong way to do this, but here’s a summary of some of the different methods.
If you haven’t heard yet, last week the jQuery team announced on their blog that jQuery 2.0, which is scheduled for an early 2013 release “removes support for IE 6/7/8 oddities such as borked event model, IE7 ‘attroperties’, HTML5 shims, etc.”
In this post, I’m just briefly showing everyone a simple solution for serving a different version of jQuery (or really, any script) to Internet Explorer versions 6-8.
When writing JavaScript, I often find myself Googling for info, or using Mozilla’s reference to find the exact syntax and argument definitions for methods associated with string manipulation.
A lot of references I come across have far too much info, so this post will give examples and brief descriptions of some of the most common and useful string-related methods. I tried to put the most common ones near the top, for quick reference.
You’ve probably heard of CSS’s clip property. It has some unique features and syntax, and in this post I’ll outline how it’s used.
At the end of the post you’ll find a link to a demo page where some photos are used to animate the clip property, just to visually demonstrate what this property does.
The CSS3 Transitions spec maintains a list of properties that are animatable. This list, as far as I know, covers animatable properties for both transitions and keyframe animations.
But that’s a list of properties. And so, since CSS3 gradients are not really properties, but are actually images created by the browser, they aren’t in that list of animatable properties. But that doesn’t mean you can’t animate gradients.
Gradients, just like standard images, are subject to certain background-related properties that are animatable. These include background-size and background-position.
Although my knowledge of HTML and CSS seems somewhat rounded and complete, I don’t feel the same way about JavaScript. I always seem to be learning something new, or else reminding myself of stuff I might have learned years ago but have forgotten.
So here are a few things I’ve recently learned or read about that might be useful to you.