    
|
I somewhat regularly ask questions about WordPress stuff on Twitter. Usually when I don't know how to do something or I'm seeing behavior that I didn't expect. I did write a book about WordPress at one time, but even when I was immersed in that, I wasn't an expert on every aspect of WordPress. Especially the deep developer-y stuff. When I ask a question, I'll always get at least a few responses like:
Just use Jekyll / Octopress!
Just use Kirby!
Just use Drupal!
Just use ExpressionEngine!
As if up and changing which CMS I'm using would somehow solve this small issue I'm having. Sometimes it's a friendly poke, sometimes it's trollish, but more often than not I think they truly believe that moving CSS-Tricks off WordPress to whatever their favorite CMS is would be a smart move.
I don't think that. I figured I'd write up my reasoning.
CSS-Tricks is a fairly complicated site. There is no simple automated export/import procedure for moving a site like CSS-Tricks.
There is a blog with over 1,500 posts and 62,000 comments. This tends to be the thing that is easiest to move between platforms. So moving on, there are about 1,200 pages. These represent things like videos, almanac entries, and snippets. These use about 20 different unique page templates in a moderately nested structure. That's a lot of custom content in custom structures at custom URL's.
There are forums on the site with about 130,000 unique posts. Only recently have I gotten the forums into WordPress itself which was a huge win. I wouldn't move unless the new CMS supported this forum structure as well. There is also a custom post type I use for The Gallery area on the site which is a totally different unique structure.
There are public user accounts on CSS-Tricks. At the most basic level they are just an identity for people so they can comment on the blog without entering their information each time. But they are also tied to the forums so you can have an identity and forum-specific functionality there. They are also tied to The Lodge, a paid-access area, so payment profiles and permissions are involved there. And then there is permissions in general. Any given user might be a basic subscriber, or a forums moderator, or forums admin, or site admin, or blog contributor, or lodge member at one of the different levels, or any combination. The new CMS would need an extremely sophisticated user management system.
Moving all the data and maintaining the structure of URL's, as well as all the users, would be a monumental task.
So moving would be hard. But people do hard things all the time on the web. We shouldn't be afraid of doing hard things if it's the right thing to do. But moving CMS's for CSS-Tricks isn't the right thing to do because there is very little to gain.
I think the biggest perceptions of what I would gain are:
Features is out. There is nothing I wish I could do but can't on WordPress.
If the potential CMS change was to a static site generator, security and speed are definitely benefits of those. They are safe because there is no public database or backend code in which to hack. They are fast because it's essentially a pre-cached site. However, I don't have big problems with either of these things, and I require a database because of the user accounts and comments. I'll go into more about security later.
I'm not worried so much about speed because it's a fairly fast loading site anyway. Good servers that are overpowered if anything. Everything is cached. Assets are on a CDN. And I use Mobify Performance Suite. The caching and CDN? WordPress helps with that. I used W3 Total Cache which works with MaxCDN.
I can't even imagine. I don't even want to think about it. Just planning out all the things that need to change and how would take weeks. I'd have to hire the majority of it out, so in addition to the time, the cost would be huge.
Again, there is no automatic export/import that is going to get anywhere close. This would be an entirely custom job.
Possibly the most important point: I like WordPress. I like the software. I think it works great. I like the UI. I like the APIs. I think building sites with it is practical and productive.
When I have a complaint or problem, it's usually something fairly minor and absolutely not a show-stopper. I wish that thing was better, but I move on with my life. I recently was slightly annoyed that the_excerpt() didn't work as I expected it to. So I filed a ticket. Chances are someone is going to look at that and either fix it or tell me why they aren't going to. That's satisfaction, one way or another.
The releases are frequent, impressive, easy to install, and nicely varied in focus including frequent security and clean-up releases. The (large) team not only care about the software, they care about the vision behind the software, they care about the company, and they have incentive both personal and business to keep it working well.
I started writing out a list of people here, and it became so long it was distracting and I started feeling bad because I knew I would forget people. You know who you are and I love you all.
When I have issues, I have a great support network. Why would I leave that behind?
Outside of my friends and acquaintances in the WordPress community, I find I tend to generally like and get along with other WordPress-lovers. Kinda like how you might enjoy mountain biking partially because you like the activity of mountain biking but also because you generally like mountain bikers. I've been to a couple WordCamps and they were good fun.
That may seem surprising because of how often you hear about WordPress sites getting hacked. I have been as well, many times on various sites. But I know how to deal with that on WordPress. I'm good at dealing with it. And it hasn't happened in quite a while because I'm also good at preventing it now. If I moved to different software, I wouldn't be good at it until I spent years getting more comfortable with that.
99% of the hours spent working on and building CSS-Tricks was just me. It didn't take a team. I feel like CSS-Tricks is a pretty large/complex site to be handled by one person. And it's not even the primary focus of my time. Combined, I spend much more time on CodePen, ShopTalk, and administrative busywork. That's a powerful and understated testament to the software right there.
I remember back working at Wufoo it seems like everybody and their sister had a feature request for us. "It's easy!" they would tell us - knowing nothing about how our site was built, the history, and the challenges involved. We get some of that now at CodePen too although a bit less since it's smaller, newer, and we can be more nimble - but we still get it.
It's impossible to know from the outside what's going on in the inside of other people's websites. Best to just be helpful when you can.
Just Use [insert CMS here]! Or, Why I Still Love WordPress is a post from CSS-Tricks
]]>|
|
|
|
|
|
If you tweet about your life, a new algorithm can identify your most significant events and assemble them into an accurate life history, say the computer scientists who built it
With web users bombarded with so much information, web designers are constantly exploring new ways to deliver content. One-page websites are now being widely adopted with some of the biggest brands in the world using them to provide users with a fast, clean and simple experience that is simultaneously effective and beautiful.
Over the past few years, we’ve seen the trend towards one-page websites grow thanks to the introduction of HTML5 and jQuery, which make it easy to build stunning websites with nifty transitions and effects.
Below are 30 stunning one-page HTML5 websites, covering everything from minimalist design and simple navigation to parallax scrolling. If you’re looking for inspiration for your new single page HTML5 website, take a look at the list below:
Having won several awards, Trionn Design’s one-page HTML5 website uses parallax scrolling to make it easier for users to navigate through the site. This responsive design uses attractive images to keep users engaged, and also incorporates some great CSS effects.
Oakley have created this entertaining and eye catching site, combining parallax scrolling and amazing photography to showcase the new Airbrake MX goggles in a unique way.
Not only is this site stunning but it also provides useful information on your ’5 a day’, encouraging visitors to eat more fruit. The site makes use of clever parallax scrolling for a bright, almost video-like feel.
Graphic designer Laura Baffari has created a stunning interactive portfolio that uses horizontal scroll and touch swipe for smartphones and tablets. When entering the site you’ll see tiles displaying her work which can be scrolled through in any direction.
This one’s for all the romantics out there. This has to be the most unique way to confirm your attendance to a wedding. A beautiful story of a couple who met many years ago, this site uses parallax scrolling with some great animation and inventive typography.
Another portfolio bound to provide you with inspiration, freelance digital designer Ian James Cox has created an inventive doodle effect one-page website based around the “Duffy Bold” font and the popular Scroll Path jQuery plugin.
Footwear specialists Nike created a captivating website for the Air Jordan 2012. Built around the footwear itself, the site uses parallax scrolling to take visitors through the creation of the trainer and the materials used as it’s assembled.
Pizza fanatic Renato has created this alluring site for his pizza party business. Not only does this site make you hungry but the use of graphical elements throughout the page adds a nice touch.
Created by Martin Ringlein, Design Manager at Twitter, this one page design is truly unique. Use the arrows at the bottom to set the presentation slideshows in motion and see what Martin has been up to since 1999. If you’re looking for inspiration for an original navigation, do check this site out!
Smart Phood is a research project about how people eat. This colourful HTML5 one-pager has a unique scroll that gives it the ‘wow’ factor.
I can’t imagine how much work has gone into creating this one-page website. It uses parallax scrolling and loads of amazing transitions and graphic elements that you’re unlikely to see on any other site. Simply breathtaking!
An excellent interactive experience using parallax scrolling and amazing transitions and effects to present the complete journey of the shoe coming together.
This one-pager is as epic as the movie itself. It’s a stunning HTML5 parallax scrolling site that takes a behind-the-scenes look at some of the greatest moments of the movie.
The new Skoda Octavia’s dedicated HTML5 website invites visitors to discover it through an immersive animated experience. This stunning one-pager uses parallax scrolling and a unique type of navigation that creates an engaging experience.
An informative website which takes an in-depth look at how much water the average person consumes every day in the UK. The site uses graphic elements and transitions to spark conversation on an important issue.
Stylistically similar to Minecraft, Reverend Danger uses a range of animation and CSS techniques to create a fun experience for visitors. This one-pager combines an interesting slider at the top where visitors can change the images from ‘reverend to danger’.
Festa Italiana is another fun website that uses bright colours and graphical elements that move as you scroll down.
Quench your thirst with this website by Activate. As you scroll down the site you are presented with clickable floating bottles. The site has some excellent transitions and effects throughout.
D’Angelico guitars were embraced by many and remained popular until the 70′s. Now the legend is reborn with a stunning HTML5 one-pager that makes great use of sound and parallax scrolling to take you through the journey.
A unique take on the popular concept of the traditional infographic, this HTML5 one-page site present statistics from a report that reveals critical factors for small and midsize business success in 2013. Scroll down to see the transitions and effects that reveal the stats.
A fantastic one-page portfolio site in HTML5 with a zoomable user interface powered by SVG.
Jules Bassoleil’s single page portfolio has an amazingly logical and effective navigation with the graphics jumping out at you.
Italian web designer Sergio Pedercini has created an elegant site to display his portfolio. The bright colours and the bouncing navigation make it attractive and easy to use.
Fashion label Von Dutch’s use of parallax scrolling adds a sense of movement to its story. Icons and images move in and out of place as you scroll down the page, providing a fluid experience.
A simple yet attractive HTML5 one-pager that uses animation to provide a great floating effect.
Horizontal scrolling is quite common on creative agency websites, and Pixelmess’s site is an example of it working particularly well. The combination of retro fonts and illustrations makes you feel like you’re playing an old school video game which is even more engaging.
Renault uses a combination of parallax scrolling, audio and video to create an interactive and amazing experience for visitors.
This is one of the best product presentation sites I’ve seen lately. The site use of parallax scrolling to present swivelling chairs specifically designed for women.
This responsive HTML5 one-pager features a fluid layout that includes several interactive elements and animations to make it more engaging.
Children’s photographer Evi Hermans has created this fun and playful one-page website. Not only are the photos lovely, but this beautiful site is made even more interactive through the use of animations.
Do you wish you’d built these sites? Have you built a better one? Let us know in the comments.
| Quirky Lunchbox Typeface (1,500+ glyphs) – only $17! |  |
|
|
 |
During the past four or five years of blogging regularly and doing research for other writing projects, I’ve come across probably thousands of articles on JavaScript.
To me, it seems that a big chunk of these articles can be divided into two very general categories:
Yes, I’ve likely stumbled upon a ton of other articles that don’t fall into either of these categories or that are more specific. But somehow it feels that most of the ones that really get pushed in the community fall under one of the two categories above.
I think those articles are great, and I hope we see more of them. But sometimes the simplest JavaScript features are sitting right under our noses and we just haven’t had a lot of exposure to them. I’m talking about native, more-or-less cross-browser features that have been in the language for some time.
So, in this article, I won’t be talking about jQuery, and I won’t be looking at structural code concepts or patterns. Instead, I’m going to introduce you to some pure JavaScript features that you can use today and that you might not have ever considered before.
Years ago, Microsoft introduced a method called insertAdjacentHTML() as a way to insert a specified string of text as HTML or XML into a specific place in the DOM. This feature has been available in Internet Explorer (IE) since version 4. Let’s see how it works.
Suppose you have the following HTML:
<div id="box1">
<p>Some example text</p>
</div>
<div id="box2">
<p>Some example text</p>
</div>
And suppose you want to insert another snippet of HTML between #box1 and #box2. You can do this quite easily using insertAdjacentHTML():
var box2 = document.getElementById("box2");
box2.insertAdjacentHTML('beforebegin', '<div><p>This gets inserted.</p></div>');
With that, the generated DOM ends up like this:
<div id="box1">
<p>Some example text</p>
</div>
<div><p>This gets inserted.</p></div>
<div id="box2">
<p>Some example text</p>
</div>
The insertAdjacentHTML() method takes two parameters. The first defines where you want to place the HTML, relative to the targeted element (in this case, the #box2 element). This may be one of the following four string values:
beforebeginafterbeginbeforeendafterendAgain, these are string values, not keywords, so they must be placed inside of single or double quotes.
The second parameter is the string you want to insert, also placed in quotes (or else it would be a variable holding a string that was previously defined). Note that it should be a string, not a DOM element or element collection; so, it could just be text, with no actual markup.
insertAdjacentHTML() has, as outlined in a post on Mozilla Hacks, a couple of advantages over something more conventional, like innerHTML(): It does not corrupt the existing DOM elements, and it performs better.
And if you’re wondering why this one hasn’t received a lot of attention so far, despite being well supported in all in-use versions of IE, the reason is probably that, as mentioned in the Mozilla Hacks article, it was not added to Firefox until version 8. Because all other major browsers support this, and Firefox users have been auto-updating since version 5, it’s quite safe to use.
For more on this method:
You can obtain the coordinates and, by extension, the dimensions of any element on the page using another lesser-known method, the getBoundingClientRect() method.
Here’s an example of how it might be used:
var box = document.getElementById('box'),
x, y, w;
x = box.getBoundingClientRect().left;
y = box.getBoundingClientRect().top;
if (box.getBoundingClientRect().width) {
w = box.getBoundingClientRect().width; // for modern browsers
} else {
w = box.offsetWidth; // for oldIE
}
console.log(x, y, w);
Here, we’ve targeted an element with an ID of box, and we’re accessing three properties of the getBoundingClientRect() method for the #box element. Here’s a summary of six fairly self-explanatory properties that this method exposes:
topleftrightbottomwidthheightAll of these properties are read-only. And notice that the coordinate properties (top, left, right and bottom) are all relative to the top-left of the viewport.
What about the if/else in the example from above? IE 6 to 8 don’t support the width and height properties; so, if you want full cross-browser support for those, you’ll have to use offsetWidth and/or offsetHeight.
As with insertAdjacentHTML(), despite the lack of support for width and height, this method has been supported in IE since ancient times, and it has support everywhere else that’s relevant, so it’s pretty safe to use.
I will concede something here: Getting the coordinates of an element using offset-based values (such as offsetWidth) is actually faster than using getBoundingClientRect(). Note, however, that offset-based values will always round to the nearest integer, whereas getBoundingClientRect()’s properties will return fractional values.
For more info:
If you’ve ever manipulated elements on the fly with JavaScript, then you’ve likely used methods such as createElement, removeChild, parentNode and related features. And you can manipulate HTML tables in this way, too.
But you may not realize that there is a very specific API for creating and manipulating HTML tables with JavaScript, and it has very good browser support. Let’s take a quick look at some of the methods and properties available with this API.
All of the following methods are available to be used on any HTML table element:
insertRow()deleteRow()insertCell()deleteCell()createCaption()deleteCaption()createTHead()deleteTHead()And then there are the following properties:
captiontHeadtFootrowsrows.cellsWith these features, we can create an entire table, including rows, cells, a caption and cell content. Here’s an example:
var table = document.createElement('table'),
tbody = document.createElement('tbody'),
i, rowcount;
table.appendChild(tbody);
for (i = 0; i <= 9; i++) {
rowcount = i + 1;
tbody.insertRow(i);
tbody.rows[i].insertCell(0);
tbody.rows[i].insertCell(1);
tbody.rows[i].insertCell(2);
tbody.rows[i].cells[0].appendChild(document.createTextNode('Row ' + rowcount + ', Cell 1'));
tbody.rows[i].cells[1].appendChild(document.createTextNode('Row 1, Cell 2'));
tbody.rows[i].cells[2].appendChild(document.createTextNode('Row 1, Cell 3'));
}
table.createCaption();
table.caption.appendChild(document.createTextNode('A DOM-Generated Table'));
document.body.appendChild(table);
The script above combines some customary core DOM methods with methods and properties of the HTMLTableElement API. The same code written without the table API might be considerably more complex and, thus, harder to read and maintain.
Once again, these table-related features have support all the way back to IE 7 (and probably earlier) and everywhere else that’s relevant, so feel free to use these methods and properties where you see fit.
For more info:
This discussion of specific native JavaScript features has been a reminder of sorts. We can easily become comfortable with the features of a language that we know well, without looking deeper into the language’s syntax for simpler and more maintainable ways to solve our problems.
So, from time to time, look inside the box, so to speak. That is, investigate all that vanilla JavaScript has to offer, and try not to rely too much on plugins and libraries, which can unnecessarily bloat your code.
(Credits of image on front page: nyuhuhuu)
(al ea)
© Louis Lazaris for Smashing Magazine, 2013.
]]>