Recent Blog Posts
Blogs » JavaScript & CSS
Stylish Scripting
: JavaScript & CSS BlogUsing JSON for Language-independent Configuration Files
The growing availability of JSON parsing in server-side frameworks elevates the usefulness of JavaScript beyond client-side programming, to providing base syntax for a generalized data interchange format. Well duh.
But a not-immediately-obvious advantage of this is the ability to have language-independent configuration files for Ajax development.
In a nutshell — a JavaScript object-literal can be parsed as JSON with (say) PHP to create a corresponding associative array.
Consider a simple config object like this:
const config = {
‘lang’ : ‘en’,
‘host’ : ’sitepoint.com’
};
We can include that in a regular <script> and get access to its properties with JavaScript:
alert(config[’lang’]); //outputs “en”
All good. But we can also import it into PHP and parse it like this:
$datastring = file_get_contents(’config.js’);
$regexes = array(
array(”p”=>”/[\w]*(\/\/).*$/m”, “r”=>”"), //remove comments
array(”p”=>”/’/m”, “r”=>”\”") //replace single-quotes with double-quotes
);
foreach($regexes as $regex)
{
$datastring = preg_replace($regex[’p'], $regex[’r'], $datastring);
}
preg_match(”/config[ ]?=[ ]?\{([^\;]+)\\;/”, $datastring, $matches);
$config = json_decode(’{’ . $matches[1], true);
And then we have that same data in a PHP associative array:
echo $config[’lang’]; //outputs “en”
Availability of JSON parsing in PHP
The native functions json_encode and json_decode were not added to PHP until Version 5.2. If you’re using an …
ECMAScript Harmony: New Life for JavaScript
One by one, the core standards that define the Web are getting a new lease on life. First, the W3C rebooted its development of HTML by abandoning its single-minded focus on XHTML and embracing HTML 5. Now, at a meeting in Oslo, JavaScript has a shot at being saved too.
Blockquote: Then and Now
As “The Ultimate HTML Reference” author Ian Lloyd puts it, “blockquote has been around a long time, but it hasn’t aged a day.” Let Kevin show you how to make use of a largely-forgotten attribute to add a little more meaning to your blockquotes.
Mining the SitePoint CSS Reference
Having served as the Technical Editor on The Ultimate CSS Reference, Andrew Tetlaw has taken the opportunity to dive into the book and pull out a handful of little-known facts about CSS.
Custom Web Fonts: Pick Your Poison
Back in 1998, CSS2 proposed an approach for allowing custom fonts to be displayed on the Web—the @font-face at-rule. 10 years later, we’re still grappling with licensing issues, browser support and clashes in philosophies relating to font piracy. Kevin gives us the state of play.
Regex Matching Attribute Selectors
Wouldn’t it be handy if you could use regular expressions in CSS to match classes or ids in your HTML code? It would make style sheets enormously powerful, more portable, and would consume less code.
JavaScript Event Delegation is Easier than You Think
If you’re into adding a little JavaScript interactivity to your web pages, you may have heard of JavaScript event delegation and thought it was one of those convoluted design patterns that only hardcore JavaScript programmers worry about. You’d be wrong.
CSS Theme Week… And That’s All Folks!
We conclude our first ever CSS-themed week with a classic article that collates the most important CSS positioning properties.
Nigel Peck’s article CSS Positioning Properties At-A-Glance Guide was first published back in 2003, but five years later still stands strong as a compact summary of the basics of CSS positioning (although we updated a few points before republishing). In fact, the concept of this article formed the basis for the SitePoint CSS Reference, which was then expanded to include the HTML Reference, and we have a JavaScript Reference under development, so the article was quite seminal from our perspective.
In case you missed an article along the way, here’s the complete list of articles that we published this week:
- Monday: Nifty Navigation Tricks Using CSS (Rachel Andrews) — an article that is still popular for beginners looking to create visually interesting site navigation elements that are based on semantic markup
- Tuesday: Breaking Out of the Box With CSS Layouts (Jina Bolton) — a terrific example of what can be done to dispel the myth that all CSS layouts are boxy
- Wednesday: Warning: This Secret CSS Technique Will Surprise You! (Alex Walker) — just when you thought you’d seen everything that could …
CSS Animation: The Ultimate Web Design Easter Egg
Our third tutorial for CSS Theme Week went live today — a new article titled Warning: This Secret CSS Technique Could Surprise You!.
Read previous articles from CSS Theme Week:
- Monday: Nifty Navigation Tricks Using CSS
- Tuesday: Breaking Out of the Box With CSS Layouts
Today’s article was written by our own Alex Walker, a man with an unhealthy obsession for spotting an anomaly and exploring it in great detail (I sit next to Alex, so I know how much time he put into this tutorial). This article is the result of that exploring.
A while back Alex published a blog post about the fun that could be had when you explored overlapping CSS background images. At that stage, the effect he had produced was interesting and useful, though admittedly in limited cases (we applied it to the ad on the front page of sitepoint.com to promote our Art & Science of JavaScript book). While not immediately practical in every situation, it demonstrated one way of embedding a hidden feature into your page — an “easter egg” for your users.
Those easter eggs aren’t going to make or break your design — in fact, chances are that most of them won’t notice it …
CSS Theme Week: More CSS Tutorials Than You Can Handle!
It’s CSS Theme week on SitePoint!
What does that mean for you, dear reader?
Well, it means that we’ve trawled through the archives and hand-picked our favourite (and your favourite) CSS tutorials, and will be republishing one article per day for the next five days on the front page of sitepoint.com. Be sure to bookmark (you might even want to subscribe to the RSS feed for our articles if you haven’t done so yet). CSS has evolved and techniques have changed, but rest assured that these articles hold the test of time.
But that’s not all!
We also have a jaw-droppingly awesome new CSS technique that we’ll be throwing in there in the middle of the week. We’ve published some cutting-edge stuff in the past, but this is definitely up there in terms of pushing the envelope. I promise you haven’t seen CSS do this before … it’s awesome stuff.
In the mean time, though, I’d like to introduce you to our first article for CSS Theme Week. Allow me to reacquaint you with Rachel Andrew’s seminal article from last year …
Nifty Navigation Using CSS
This article is an excerpt from Rachel’s popular book The CSS Anthology, 2nd edition, and is one of …
Sponsored Links
Logo Design, Web page Design and more!
- Custom logo designs created ‘just for you’.
- Pick the design you like best.
- Only pay if you’re satisfied with the result.
Download sample chapters of any of our popular books.
