How I Built a Pure CSS Crossword Puzzle

CSS Crossword Puzzle

Recently I created a pure CSS crossword puzzle implemented using CSS grid that does not need JavaScript in order to work. It gained heavy interest pretty quickly on CodePen. As of this writing, it has more than 350 hearts and 24,000+ page views!

The great CSS Grid Garden tutorial inspired me to build something with Grid Layout features. I wondered if these features could be put to good use in building a crossword puzzle — then I thought, let’s try to create the whole thing without using JavaScript.

Building the Board/Grid

So, first thing’s first, let’s create the board itself!

I ended up with the following basic structure, with HTML comments included to show what the different sections will accomplish:

[code language=”html”]
<div class=”crossword-board-container”>

<div class=”crossword-board”>

<!– input elements go here. Uses CSS Grid as its layout –>

<div class=”crossword-board crossword-board–highlight crossword-board–highlight–across”>
<!– highlights for valid ‘across’ answers go here. Uses CSS Grid as its layout –>

<div class=”crossword-board crossword-board–highlight crossword-board–highlight-down”>
<!– highlights for valid ‘down’ answers go here. Uses CSS Grid as its layout –>

<div class=”crossword-board crossword-board–labels”>
<!– row and column number labels go here. Uses CSS Grid as its layout –>

<div class=”crossword-clues”>

<dl class=”crossword-clues__list crossword-clues__list–across”>
<!– clues for all the ‘across’ words go here –>

<dl class=”crossword-clues__list crossword-clues__list–down”>
<!– clues for all the ‘down’ words go here –>




That puts our basic skeleton in place so we can add more elements and start styling things.

Using Form Elements for the Squares

The crossword puzzle I’m creating is a 13×13 grid with 44 blank spaces so I need to create 125 input elements each with its own ID in the format item{row number}-{column number}, i.e. item4-12. Here’s what the grid will look like:

Empty crossword

Each of the inputs will get have a minlength and maxlength of “1” to emulate the behaviour of a crossword puzzle (i.e. one letter per square). Each input will also have the required attribute so that HTML5 form validation will be used. I take advantage of all of these HTML5 attributes using CSS.

Using the General Sibling Selector

The input elements are visually laid out in groups (exactly how a crossword puzzle is). Each group of input elements represents a word in the crossword. If each of the elements in that group is valid (which can be verified using the :valid pseudo selector), then we can use CSS to style an element that appears later in the DOM (using an advanced CSS selector called the general sibling selector) that will indicate that the word is correct.

Due to how sibling selectors work, and how CSS works in general, this element has to appear later in the DOM. CSS can only style elements that are after the currently selected element. It cannot look backwards in the DOM (or up the DOM tree) and style something before the current element (at the moment at least anyway).

This means I can use the :valid pseudo-class to style valid elements:

[code language=”css”]
.input:valid {
border: 2px solid green;
.input:invalid {
border: 2px solid red;

See the Pen Valid Pseudo Selector Example by SitePoint (@SitePoint) on CodePen.

To style an element later on in the DOM that is a sibling of another element, I can use the ~ (tilde/general sibling) selector, e.g. A ~ B. This selector will select all elements that match B, that are a sibling of A and appear after A in the DOM. For example:

[code language=”css”]
#input1:valid ~ #input2:valid ~ #input3:valid ~ #input4:valid ~ #input5:valid ~ .valid-message {
display: block;

With this code, if all these input elements are valid, the valid-message element will be displayed.

See the Pen Using Sibling Selector to Display a Message by SitePoint (@SitePoint) on CodePen.

The general sibling selector is extremely useful here. To make the crossword work, I needed to make sure that everything was laid out in a way that allowed me to take advantage of the general sibling selector.

Continue reading %How I Built a Pure CSS Crossword Puzzle%

Source: Sitepoint

What Is Snapshot Testing, and Is It Viable in PHP?

A vector image of a polaroid glued to a transparent background

Ah-ha moments are beautiful and rare in programming. Every so often, we’re fortunate enough to discover some trick or facet of a system that forever changes how we think of it.

For me, that’s what snapshot testing is.

You probably write a lot of PHP code, but today I want to talk about something I learned in JavaScript. We’ll learn about what snapshot testing is and then see how it can help us write better PHP applications.

Building Interfaces

Let’s talk about React. Not the kick-ass async PHP project, but the kick-ass JavaScript project. It’s an interface-generation tool in which we define what our interface markup should look like as discrete parts:

function Tweet(props) {
  return (
    <div className="tweet">
      <img src={props.user.avatar} />
      <div className="text">
        <div className="handle">{props.user.handle}</div>
        <div className="content">{props.content}</div>

function Tweets(props) {
  return (
    <div className="tweets">
      {, i) => {
        return (
          <Tweet {...tweet} key={i} />

This doesn’t look like vanilla Javascript, but rather an unholy mix of HTML and Javascript. It’s possible to create React components using regular Javascript syntax:

function Tweet(props) {
  return React.createElement(
    { className: "tweet" },
    React.createElement("img", { src: props.user.avatar }),
      { className: "text" },
        { className: "handle" },
        { className: "content" },

To make this code, I pasted the Tweet function (above) into the Babel REPL. That’s what all React code is reduced to (minus the occasional optimization) before being executed by a browser.

Before I talk about why this is cool, I want to address a couple of issues…

“Why Are You Mixing HTML and Javascript?!”

We’ve spent a lot of time teaching and learning that markup shouldn’t be mixed with logic. It’s usually couched in the phrase “Separation of Concerns”. Thing is, splitting HTML and the Javascript which makes and manipulates that HTML is largely without value.

Splitting that markup and Javascript isn’t so much separation of concerns as it is separation of technologies. Pete Hunt talks about this in more depth in this video.

“This Syntax Is Very Strange”

That may be, but it is entirely possible to reproduce in PHP and works out the box in Hack:

class :custom:Tweet extends :x:element {
  attribute User user;
  attribute string content;

  protected function render() {
    return (
      <div class="tweet">
        <img src={$this->:user->avatar} />
        <div class="text">
          <div class="handle">{$this->:user->handle}</div>
          <div class="content">{$this->:content}</div>

I don’t want to in detail about this wild syntax except to say that this syntax is already possible. Unfortunately, it appears the official XHP module only supports HHVM and old versions of PHP…

Testing Interfaces

There are many testing approaches – some more effective than others. An effective way to test interface code is by faking (or making) a web request and inspecting the output for the presence and content of specific elements.

Perhaps you’ve heard of things like Selenium and Behat? I don’t want to dwell too much on them. Let’s just say that Selenium is a tool we can use to pretend to be a browser, and Behat is a business-friendly language for scripting such pretense.

Unfortunately, a lot of browser-based testing can be brittle. It’s tied to the exact structure of markup, and not necessarily related to the logic that generates the markup.

Snapshot testing is a different approach to doing the same thing. React encourages thinking about the whole interface in terms of the smallest pieces it can be broken down into. Instead of building the whole shopping cart, it encourages breaking things up into discrete parts; like:

  • each product
  • the list of products
  • the shipping details
  • the progress indicator

In building each of these pieces, we define what the markup and styles should be, given any initial information. We define this by creating a render method:

class Tweets extends React.Component {
  render() {
    return (
      <div className="tweets">
        {, i) => {
          return (
            <Tweet {...tweet} key={i} />

…or by defining a plain function which will return a string or React.Component. The previous examples demonstrated the functional approach.

This is an interesting way of thinking about an interface. We write render as though it’ll only be called once, but React is constantly reconciling changes to the initial information, and the component’s own internal data.

And it’s this way of thinking that leads to the simplest way to test React components: Snapshot Testing. Think about it for a minute…

We build React components to render themselves, given any initial information. We can work through all possible inputs in our head. We can even define strict validation for what initial information (or properties) we allow into our components.

Continue reading %What Is Snapshot Testing, and Is It Viable in PHP?%

Source: Sitepoint

12 of the Best Dribbble Designers to Follow

Most designers, whether they’re web designers, mobile app designers or graphic designers, are familiar with Dribbble. This powerhouse designer community is not only a social network of creative artists, but it’s also a magnificent hub of endless inspiration, and some of the best Dribbble designers also offer free design resources.

While Dribbble’s invite-only membership system has been criticized, there’s no doubt that this barrier has helped to maintain a high level of quality amongst its members. You’ll certainly find an abundance of talented designers!

Looking for a Dribbble invite? Our co-editor, Daniel Schwarz, has one invite to give away! In the comments below, share a link to your design portfolio (personal website, Behance, etc), and of course your Dribbble username.

Alternatively, you can try to get drafted using or Cribbble.

First, let’s take a look at 12 of the best Dribbble designers to follow.

Once inspired by these 12 talented Dribbble designers, why not take Canva for a spin? It’s surprisingly becoming a quick n’ easy browser-based alternative for designers, check out our Canva course!

1. Leo Leung

Specialty: Web/App Design, Motion Graphics and Front-End Development.

Leo Leung Motion Graphics

At a whopping 15,000+ Dribbble followers, it’s not hard to understand why Chinese artist Leo Leung makes this list. With a keen eye for web and app design, and as a specialist in motion graphics and front-end development, his is top-notch.

Leung’s Dribbble shots showcase what he’s capable of as he elegantly demonstrates his love for motion design with smooth, animated GIFs. For those who’re into app and motion design, Leo Leung is certainly a designer worth following on Dribbble. Bonus Points: While Leo doesn’t offer free design resources, he does at times hold Dribbble invite giveaways.

2. Nick Slater

Specialty: Graphic Design, Icon/Logo Design, Branding and Illustration.

Nick Slater Patterns for Asana

Nick Slater Logo Design

You don’t have to be into app design to thrive on Dribbble, as California-native Nick Slater boldly demonstrates with his 66,000+ followers. With a strong understanding of design, his illustrations are rather eye-catching too. His use of color and clean line work adds flavor to everything he makes! Whether Nick’s designs make the cut or not, he always shares his creations with his followers — designer, illustrator and Dribbble superstar Nick Slater is in a league of his own!

3. Shawna X

Specialty: Visual Design and Illustration.

Shawna X Illustration for Adobe

Shawna X Colorful Illustration

Eye-candy design and flat-style visuals might not be your thing, which makes Shawana X a breath of fresh air on Dribbble. Although she may not have as many followers as Leo Leung and Nick Slater, she more than deserves a mention on this list. With her vibrant and rich illustrations, her work is a sight to behold! Injecting a plethora of color into every design, Shawna has worked with a host of big-name clients, including Adobe, Nike, Vice and Refinery 29 (to name a few!).

When she’s not working as a visual designer, she’s teaching Mobile Design at Parsons.

4. Aurelien Salomon

Speciality: Interaction, UI/UX and Web Design.

Aurelien Salomon Web Design

French UI/UX designer Aurelien Salomon is one of those exceptionally talented designers who bring their own flavor into their work. Aurelien’s designs are pretty fresh and it’s obvious that he’s quite innovative with his UI/UX, as he always looks to find ways to incorporate more interactive features. It’s probably why he’s already racked up 22,000+ followers on Dribbble and has managed to work with clients such as Apple and Google. Those who are interested in UI, UX and even AR (Augmented Reality) motion will certainly find some inspiration in Aurelien Salomon’s stunning design work.

Bonus Points: Salomon, although seemingly always busy, does make an effort to release freebies to his followers whenever he can. He also has a few items for purchase on Creative Market (fun fact: Dribbble and Creative Market have partnered to allow Dribbble designers to sell their design resources via Dribbble more easily).

Continue reading %12 of the Best Dribbble Designers to Follow%

Source: Sitepoint

12 Best Contact Form PHP Scripts

Contact forms are a must have for every website. They encourage
your site visitors to engage with you while potentially lowering the amount of
spam you get.

For businesses, this engagement with visitors increases the
chances of turning them into clients or customers and thus increasing revenue.

Whether your need is for a simple three-line contact form or
a more complex one that offers loads of options and functions, you’re sure to
find the right PHP contact form here in our 12Best Contact Form PHP Scripts on CodeCanyon.

1. Perfect Contact Us Form

Perfect Contact Us Form is a Bootstrap-based form which is
fully customisable and easy to use. It integrates easily with HTML and PHP
pages, and all fields use jQuery validation script.

Perfect Contact Us Form

Best features:

  • AJAX based
  • both SMPT and PHP
    email script
  • jQuery-based Captcha
    is included for anti spam
  • and more

The PerfectContact Us Form is an easy-to-use form that will appeal to both beginners
and more experienced alike.

2. Quform- Responsive AJAX Contact Form

Quform is a versatile AJAX contact form that can
be adapted to be a register form, quote form, or any other form needed.

Quform - Responsive AJAX Contact Form

Best features:

  • three ready-to-use themes with six variations
  • ability to integrate into your own theme design
  • ability to create complex form layouts
  • file uploads supported
  • and more

With tons of other customisations available, Quform- Responsive AJAX Contact Form is bound to keep the most discerning
user happy.  

3. PHP Form Builder

A CodeCanyon top
seller, PHP Form Builder includes the jQuery live validation plugin which enables
you to build any type of form, connect your database, insert, update or delete
records and send your emails using customizable HTML/CSS templates.

PHP Form Builder

Best features:

  • over 50 prebuilt templates included
  • accepts any HTML5 form elements
  • default options ready for Bootstrap
  • email sending with advanced options
  • and more

With loads of options for creating a variety of elegant
contact forms and extensive documentation to help you on your way, PHP Form Builder is definitely a top choice for PHP site owners.

4. SLEEK Contact Form

Having made its debut in April 2017, SLEEK
Contact Form is the newest contact form PHP Script on CodeCanyon, and with its
simple and beautiful design and functionality, it promises to have a great

SLEEK Contact Form

Best features:

  • invisible Google
    reCaptcha anti-spam system
  • ability to add
    attachments of any type
  • automatically get
    the IP and location of the sender inside email
  • easy to modify and
    implement new fields
  • and more

If you want a simple
contact form with a bit of a wow factor, SLEEK Contact Form may be just what you’re looking for.

5. Ultimate PHP, HTML5 & AJAX Contact Form

The Ultimate PHP,
HTML5 and AJAX Contact Form replaces the hugely successful AJAX Contact Form
and allows you to easily place and manage a self-contained contact form on
any page of your existing PHP website.

Ultimate PHP HTML5  AJAX Contact Form

Best features:

  • supports file uploads to attach to email
  • field type validation
  • multiple forms per page allowed
  • Google reCAPTCHA capable
  • and more

The Ultimate PHP, HTML5 & AJAX Contact Form is loaded with useful features that will
satisfy PHP site owners looking for a reliable contact form.

6. Contact Form Generator – Easy & Powerful Form Builder

Contact Form
Generator is one of CodeCanyon’s best-selling Contact Form PHP
Scripts.  It features a user-friendly
drag-and-drop interface that helps you build contact forms, feedback
forms, online surveys,
event registrations etc. and
get responses via email in a matter of minutes.

Contact Form Generator - Easy  Powerful Form Builder

Best features:

  • instant email or SMS notifications
  • custom email auto-responder
  • integrated with MailChimp, AWeber and five other email
    subscription services
  • anti-spam protection
  • and more

Contact Form Generator – Easy & Powerful Form Builder is a highly
effective form builder that enables you to create well-designed contact forms
and extend their range to include other functions.

7. KONTAKTO – AJAX Contact Form with Styled Map

entered the market in March of 2017 but has already developed a name for
itself as one of the top-rated scripts in this category. The standout feature
of this beautifully designed contact form is the stylish map with a location
pin that comes integrated in the form.

KONTAKTO - AJAX Contact Form with Styled Map

Best features:

  • required field
  • anti spam with
    simple Captcha math
  • defaults to PHP mail
    but SMTP option available
  • repeat submission
  • and more

Simple yet stylish, KONTAKTO – AJAX Contact Form with Styled Map can be easily integrated with your HTML
or PHP page and will be a fast favourite with many PHP site owners.

8. ContactPLUS+ PHP Contact Form

ContactPlus+ is
another clean and simple contact form which comes in three styles: an un-styled
version that you can build to suit your taste, a normal form with just the
essential information needed on a contact form, and a longer form to accommodate
an address.

ContactPLUS - PHP Contact Form

Best features:

  • Captcha verification
  • successful
    submission message
  • two styled and one
    un-styled version
  • and more

If you’re looking
for a clean and simple contact form that will integrate easily on you PHP
website, ContactPLUS+ PHP Contact Form is the one for you.

9. AJAX Contact Pro – Multi-language HTML5, Bootstrap Contact Form

Built using jQuery and PHP, AJAX Contact Pro comes
in eight style variations and has four HTML email templates. One of the
features that make this form so special is that it enables users to translate
the form fields into their language in real time. If a preferred language isn’t present in the
predefined list, the site administrator can add it to the list.

AJAX Contact Pro - Multi-language HTML5 Bootstrap Contact Form

Best features:

  • AJAX form
  • field validations
  • animations
  • modular construction
    so it can be integrated in an existing project
  • and more

AJAXContact Pro – Multi-language HTML5, Bootstrap Contact Form is certainly a
cool addition to the contact form PHP scripts offerings.

10. Hello Form Builder – Contact Form

Powered by AJAX and jQuery,
the Hello Form Builder employs an easy-to-use drag-and-drop function to help site
owners custom build contact forms with a variety of fields and features like
file upload, file attachment, Captcha system, etc.

Hello Form Builder - Contact Form

Best features:

  • 50 background images
  • ability to customise
    error messages
  • one-click
  • auto responder
  • and more

Hello Form Builder – Contact Form is a user-friendly builder that will appeal to
a wide cross-section of users.

11. Responsive Contact Form

The Responsive
Contact Form has just one main option to configure—your email address—to make
the script functional on your PHP site.

Responsive Contact Form

Best features

  • AJAX back end to save
    your bandwidth
  • uses JavaScript jQuery
  • very easy to
    integrate into any existing HTML or PHP page on your website
  • all fields have a
    validation script
  • and more

See Responsive Contact Form in action over at Code Canyon.

12. ContactForm with Custom Auto Responder

Another of Code Canyon’s top sellers, Contact Form with Custom Auto Responder is easy to edit and add to
your PHP or HTML pages.

Contact Form With Custom Auto Responder

Best features:

  • dropdown subject selection with different emails
  • custom auto responder message
  • custom Captcha filter
  • no separate page needed for thank you message
  • and more

ContactForm With Custom Auto Responder has been around for a while but is
still holding its own among the newcomers.


These 12 Best Contact Form PHP Scripts just scratch the surface of products available
at Envato Market, so if none of them fit your needs, there are plenty of other great
options you may prefer.

And if you
want to improve your PHP skills, check out the ever so useful free PHP tutorials
we have on offer

Source: Nettuts Web Development

Designing The Perfect Accordion



Design patterns. An almost mythical phrase that often inspires either awe or resentment. As designers, we tend to think of design patterns as generic off-the-shelf solutions that can be applied to various contexts almost mechanically, often without proper consideration. Navigation? Off-canvas! Deals of the day? Carousel! You get the idea.

Designing The Perfect Accordion (With A Checklist)

Sometimes we use these patterns without even thinking about them, and there is a good reason for it: Coming up with a brand new solution every time we encounter an interface problem is time-consuming and risky, because we just don’t know how much time will be needed to implement a new solution and whether it will gracefully succeed or miserably fail in usability tests.

The post Designing The Perfect Accordion appeared first on Smashing Magazine.

Source: Smashing Magazine

Free Icon Set: Happy 4th Of July 🇺🇸 (20 Icons, PNG, EPS, AI, SVG)



Every once in a while, we publish freebies related to different occasions and themes. Today, we’d like to share an icon set dedicated to a well-known upcoming American holiday.

Free Flat Icon Set: 🇺🇸 Happy 4th Of July (20 Icons, PNG, EPS, AI, SVG)

Some of you may already be working on the usual flyers or brochures, so we thought we’d help you out with a set of colorful icons to spice up your designs a bit differently this year. Thank us later!

The post Free Icon Set: Happy 4th Of July 🇺🇸 (20 Icons, PNG, EPS, AI, SVG) appeared first on Smashing Magazine.

Source: Smashing Magazine

A Beginner’s Guide to Testing Functional JavaScript

Functional programming and testing. Maybe you’ve given them a try in isolation, but somehow you never made either a part of your regular practice. They may sound innocent by themselves, but together testing and functional programming can create an irresistible temptation, almost compelling you to write cleaner, tighter, more maintainable code.

Testing Functional JavaScript — A crash test dummy sits at a computer with a mug of coffee

Well the good news is that working with both techniques together can offer some real advantages. In fact, once you’ve tasted how sweet this combination can be, you might find yourself as addicted to it as I am, and I’d be willing to bet that you’ll be coming back for more.

In this article, I’ll introduce you to the principles of testing functional JavaScript. I’ll show you how to get up and running with the Jasmine framework and build out a pure function using a test-driven approach.

Why Test?

Testing is about making sure that the code in your application does what you expect it to do, and keeps doing what you expect it to do when you make changes so you have a working product when you’re done. You write a test that defines your expected functionality under a defined set of circumstances, run that test against the code, and if the result isn’t what the test says it should be, you get a warning. And you keep getting that warning until you’ve fixed your code.

Then you get the reward.

And yes, it will make you feel good.

Testing comes in a lot of flavors, and there is room for healthy debate about where the borders are drawn, but in a nutshell:

  • Unit tests validate the functionality of isolated code
  • Integration tests verify the flow of data and the interaction of components
  • Functional tests look at the behavior of the overall application

Note: Don’t get distracted by the fact that there’s a type of testing called functional testing. That’s not what we’ll be focusing on in this article about testing functional JavaScript. In fact, the approach you’ll use for functional testing of the overall behavior of an application probably won’t change all that much whether or not you’re using functional programming techniques in your JavaScript. Where functional programming really helps out is when you’re building your unit tests.

You can write a test at any point in the coding process, but I’ve always found that its most efficient to write a unit test before writing the function you’re planning to test. This practice, known as test-driven development (TDD), encourages you to break down the functionality of your application before you start writing and determine what results you want from each section of code, writing the test first, then coding to produce that result.

A side benefit is that TDD often forces you to have detailed conversations with the people who are paying you to write your programs, to make sure that what you’re writing is actually what they’re looking for. After all, it’s easy to make a single test pass. What’s hard is determining what to do with all the likely inputs you’re going to encounter and handle them all correctly without breaking things.

Why Functional?

As you can imagine, the way you write your code has a lot to do with how easy it is to test. There are some code patterns, such as tightly coupling the behavior of one function to another, or relying heavily on global variables, that can make code much more difficult to unit test. Sometimes you may have to use inconvenient techniques such as “mocking” the behavior of an external database or simulating a complicated runtime environment in order to establish testable parameters and results. These situations can’t always be avoided, but it is usually possible to isolate the places in the code where they are required so that the rest of the code can be tested more easily.

Functional programming allows you to deal with the data and the behavior in your application independently. You build your application by creating a set of independent functions that each work in isolation and don’t rely on external state. As a result, your code becomes almost self-documenting, tying together small clearly defined functions that behave in consistent and understandable ways.

Functional programming is often contrasted against imperative programming and object-oriented programming. JavaScript can support all of these techniques, and even mix-and-match them. Functional programming can be a worthwhile alternative to creating sequences of imperative code that track the state of the application across multiple steps until a result is returned. Or building your application out of interactions across complex objects that encapsulate all of the methods that apply to a specific data structure.

How Pure Functions Work

Functional programming encourages you to build your application out of tiny, reusable, composable functions that just do one specific thing and return the same value for the same input every single time. A function like this is called a pure function. Pure functions are the foundation of functional programming, and they all share these three qualities:

Continue reading %A Beginner’s Guide to Testing Functional JavaScript%

Source: Sitepoint

How to Backup Your WordPress System

Few people care about backups until it’s too late. The question “do we have backups?” is only asked after a catastrophic loss has occurred. Backups are essential. If you fail to prepare then prepare to fail.

The five steps to backup success:

  1. Educate your boss/client
    If they understood the technicalities of web development, they wouldn’t need you. Explain the situation in simple monetary terms, e.g. if our server crashed today, we would lose everything. It would take M months to rebuild the system at a cost of $X and we could lose $Y in business. A viable backup system would cost $Z to implement and we would be back within N hours. I’m going presume you’ve terrified your boss/client and they’re willing to proceed.
  2. Identify what you need to backup
    Backing up a WordPress system is a little complex because it depends on specific files and a database. A backup will only be viable if you have up-to-date copies of both.
  3. Implement appropriate backup technology
    This will depend on the technologies you’re using and the service you offer. For example, a weekly backup may be suitable for a blog receiving a few updates a month. At worst, you could lose an article or two. A WordPress-powered online shop may need continual backups to ensure customer orders cannot be lost.
  4. Automate
    Backups should be taken out of human hands. Consider a system which requires a single click once a day to initiate the backup. You will start with good intentions but it will soon become a chore. What happens when you go on vacation? What if you leave the company? Computers are very good at scheduling so let them handle the work.
  5. Verify and test your backup
    Your system is only as good as the last successful backup. Ideally, you should automate verification of the backup’s integrity, move backup files off-site, periodically test your restore procedures, and retain previous backups for a reasonable time (three old versions is typical).

Continue reading %How to Backup Your WordPress System%

Source: Sitepoint

Connecting With Users: Incorporating Humor In Web Design



Joan is applying for a small loan on She’s becoming frustrated with the number of financial-disclosure forms she has to fill out. She’s thinking about visiting her local bank to ask for a loan instead.

Connecting With Users: Incorporating Humor In Web Design

While waiting for a page to load, the application presents a cartoon image of a person wearing a business suit sitting in a jail cell. The image caption says, “Hey, everyone hates disclosures. We know you do, too. We’re doing our best to keep everyone out of jail. Please bear with us for a few more clicks. You won’t regret it, and our loan officers will stay out of jail.” Joan smirks at the image. She might not appreciate the number of forms she has to complete, but she understands the serious nature of applying for a loan.

The post Connecting With Users: Incorporating Humor In Web Design appeared first on Smashing Magazine.

Source: Smashing Magazine

How to Build a Real-Time GitHub Issue To-Do List with CanJS

CanJS is a collection of front-end libraries that make it easier to build complex and innovative web apps that are maintainable over a long period of time. It’s broken up into dozens of individual packages, so you can pick-and-choose what you’d like in your application without being bogged down by a huge 100kb+ dependency.

CanJS promotes the MVVM (Model-View-ViewModel) architecture with the following key packages:

In this tutorial, we’re going to make a to-do list app that uses a GitHub repository’s issue list as its source. Our app will update in real-time thanks to GitHub’s Webhook API and we’ll be able to reorder issues thanks to jQuery UI’s sortable interaction.

You can find the finished source code for this app on GitHub. Here’s what the final app will look like:

Gif of adding issues and sorting them in our example app

If you’re interested in taking your JavaScript skills to the next level, sign up for SitePoint Premium and check out our latest book, Modern JavaScript


Before we start our project for this tutorial, let’s dive into what MVVM means within a CanJS application.

Data Models

The “Model” in MVVM is for your data model: a representation of the data within your application. Our app deals with individual issues and a list of issues, so these are the data types that we have in our model.

In CanJS, we use can-define/list/list and can-define/map/map to represent arrays and objects, respectively. These are observable types of data that will automatically update the View or ViewModel (in MVVM) when they change.

For example, our app will have an Issue type like this:

import DefineMap from 'can-define/map/map';
const Issue = DefineMap.extend('Issue', {
  id: 'number',
  title: 'string',
  sort_position: 'number',
  body: 'string'

Each instance of Issue will have four properties: id, title, sort_position, and body. When a value is set, can-define/map/map will convert that value to the type specified above, unless the value is null or undefined. For example, setting the id to the string "1" will give the id property the number value 1, while setting it to null will actually make it null.

We’ll define a type for arrays of issues like this:

import DefineList from 'can-define/list/list';
Issue.List = DefineList.extend('IssueList', {
  '#': Issue

The # property on a can-define/list/list will convert any item in the list to the specified type, so any item in an Issue.List will be an Issue instance.

View Templates

The “view” in a web application is the HTML user interface with which users interact. CanJS can render HTML with a few different template syntaxes, including can-stache, which is similar to Mustache and Handlebars.

Here’s a simple example of a can-stache template:

  {{#each issues}}

In the above example, we use {{#each}} to iterate through a list of issues, then show the title of each issue with {{title}}. Any changes to the issues list or the issue titles will cause the DOM to be updated (e.g. an li will be added to the DOM if a new issue is added to the list).

View Models

The ViewModel in MVVM is the glue code between the Model and View. Any logic that can’t be contained within the model but is necessary for the view is provided by the ViewModel.

In CanJS, a can-stache template is rendered with a ViewModel. Here’s a really simple example:

import stache from 'can-stache';
const renderer = stache('{{greeting}} world');
const viewModel = {greeting: 'Hello'};
const fragment = renderer(viewModel);
console.log(fragment.textContent);// Logs “Hello world”


The concept that ties all of these things together is a component (or custom element). Components are useful for grouping functionality together and making things reusable across your entire app.

In CanJS, a can-component is made up of a view (can-stache file), a view-model (can-define/map/map), and (optionally) an object that can listen for JavaScript events.

import Component from 'can-component';
import DefineMap from 'can-define/map/map';
import stache from 'can-stache';

const HelloWorldViewModel = DefineMap.extend('HelloWorldVM', {
  greeting: {value: 'Hello'},
  showExclamation: {value: true}

  tag: 'hello-world',
  view: stache('{{greeting}} world{{#if showExclamation}}!{{/if}}'),
  ViewModel: HelloWorldViewModel,
  events: {
    '{element} click': () => {
      this.viewModel.showExclamation = !this.viewModel.showExclamation;

const template = stache('hello-world');

In the example above, our template will either show “Hello world!” or just “Hello world” (no exclamation mark), depending on whether the user has clicked our custom element.

These four concepts are all you need to know to build a CanJS app! Our example app will use these four ideas to build a full-fledged MVVM app.

Prerequisites for this tutorial

Before getting started, install a recent version of Node.js. We’ll use npm to install a backend server that will handle the communication with GitHub’s API.

Additionally, if you don’t already have a GitHub account, sign up for one.

Set up our local project

Let’s start by creating a new directory for our project and switching to that new directory:

mkdir canjs-github
cd canjs-github

Now let’s create the files we’ll need for our project:

touch app.css app.js index.html

We’ll use app.css for our styles, app.js for our JavaScript, and index.html for the user interface (UI).

CanJS Hello World

Let’s get coding! First, we’re going to add this to our index.html file:

<!DOCTYPE html>
  <meta charset="utf-8">
  <title>CanJS GitHub Issues To-Do List</title>
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="app.css">

<script type="text/stache" id="app-template">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <h1 class="page-header text-center">

<script type="text/stache" id="github-issues-template">

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="https//"></script>
<script src="app.js"></script>

This has a bunch of different parts, so let’s break it down:

  • The two link elements in the head are the stylesheets for our project. We’re using Bootstrap for some base styles and we’ll have some customizations in app.css
  • The first script element (with id="app-template") contains the root template for our app
  • The second script element (with id="github-issues-template") will contain the template for the github-issues component we will create later in this tutorial
  • The script elements at the end of the page load our dependencies: jQuery, jQuery UI, CanJS,, and our app code

In our app, we’ll use jQuery UI (which depends on jQuery) to sort the issues with drag and drop. We’ve included can.all.js so we have access to every CanJS module; normally, you would want to use a module loader like StealJS or webpack, but that’s outside the scope of this article. We’ll use to receive events from GitHub to update our app in real-time.

Next, let’s add some styles to our app.css file:

form {
  margin: 1em 0 2em 0;

.list-group .drag-background {
  background-color: #dff0d8;

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

Lastly, let’s add some code to our app.js file:

var AppViewModel = can.DefineMap.extend('AppVM', {
  pageTitle: {
    type: "string",
    value: "GitHub Issues",

var appVM = new AppViewModel();
var template = can.stache.from('app-template');
var appFragment = template(appVM);

Let’s break the JavaScript down:

  • can.DefineMap is used for declaring custom observable object types
  • AppViewModel is the observable object type that will serve as the root view-model for our app
  • pageTitle is a property of all AppViewModel instances that defaults to the value GitHub Issues
  • appVM is a new instance of our app’s view-model
  • can.stache.from converts the contents of a script tag into a function that renders the template
  • appFragment is a document fragment of the rendered template with the appVM data
  • document.body.appendChild takes a DOM node and appends it to the HTML body

Continue reading %How to Build a Real-Time GitHub Issue To-Do List with CanJS%

Source: Sitepoint