Pumpkins, Spooky Fellows And Fall Inspiration For Your Desktop (October 2017 Edition)




 


 

Bright, colorful leaves, rainy days, Halloween. That’s October — at least if you’re living in the Northern hemisphere. To provide you with some fresh inspiration even when the weather is gray, artists and designers from across the globe once again challenged their creative skills to design beautiful, one-of-a-kind (and this time around also spooky) wallpapers for you to indulge in.

Desktop Wallpaper Calendars October 2017

This monthly wallpapers mission has been going on for nine years already, and we are very thankful to everyone who has and still is contributing to it each month anew. The wallpapers in this collection all come in versions with and without a calendar for October 2017 and can be downloaded for free. Happy October!

The post Pumpkins, Spooky Fellows And Fall Inspiration For Your Desktop (October 2017 Edition) appeared first on Smashing Magazine.


Source: Smashing Magazine

Using Preact as a React Alternative

Preact is an implementation of the virtual DOM component paradigm just like React and many other similar libraries. Unlike React, it’s only 3KB in size, and it also outperforms it in terms of speed. It’s created by Jason Miller and available under the well-known permissive and open-source MIT license.

Why Use Preact?

Preact logoPreact is a lightweight version of React. You may prefer to use Preact as a lightweight alternative if you like building views with React but performance, speed and size are a priority for you — for example, in case of mobile web apps or progressive web apps.

Whether you’re starting a new project or developing an existing one, Preact can save you a lot of time. You don’t need to reinvent the wheel trying to learn a new library, since it’s similar to, and compatible with, React — to the point that you can use existing React packages with it with only some aliasing, thanks to the compatibility layer preact-compat.

Pros and Cons

There are many differences between React and Preact that we can summarize in three points:

  • Features and API: Preact includes only a subset of the React API, and not all available features in React.
  • Size: Preact is much smaller than React.
  • Performance: Preact is faster than React.

Every library out there has its own set of pros and cons, and only your priorities can help you decide which library is a good fit for your next project. In this section, I’ll try to list the pros and cons of the two libraries.

Preact Pros

  • Preact is lightweight, smaller (only 3KB in size when gzipped) and faster than React (see these tests). You can also run performance tests in your browser via this link.
  • Preact is largely compatible with React, and has the same ES6 API as React, which makes it dead easy either to adopt Preact as a new library for building user interfaces in your project or to swap React with Preact for an existing project for performance reasons.
  • It has good documentation and examples available from the official website.
  • It has a powerful and official CLI for quickly creating new Preact projects, without the hassle of Webpack and Babel configuration.
  • Many features are inspired by all the work already done on React.
  • It has also its own set of advanced features independent from React, like Linked State.

React Pros

  • React supports one-way data binding.
  • It’s backed by a large company, Facebook.
  • Good documentation, examples, and tutorials on the official website and the web.
  • Large community.
  • Used on Facebook’s website, which has millions of visitors worldwide.
  • Has its own official developer debugging tools extension for Chrome.
  • It has the Create React App project boilerplate for quickly creating projects with zero configuration.
  • It has a well-architectured and complex codebase.

React Cons

  • React has a relatively large size in comparison with Preact or other existing similar libraries. (React minified source file is around 136KB in size, or about 42KB when minified and gzipped.)
  • It’s slower than Preact.
  • As a result of its complex codebase, it’s harder for novice developers to contribute.

Note: Another con I listed while writing this article was that React had a grant patent clause paired with the BSD license, making it legally unsuitable for some use cases. However, in September 2017, the React license switched MIT, which resolved these license concerns.

Preact Cons

  • Preact supports only stateless functional components and ES6 class-based component definition, so there’s no createClass.
  • No support for context.
  • No support for React propTypes.
  • Smaller community than React.

Getting Started with Preact CLI

Preact CLI is a command line tool created by Preact’s author, Jason Miller. It makes it very easy to create a new Preact project without getting bogged down with configuration complexities, so let’s start by installing it.

Open your terminal (Linux or macOS) or command prompt (Windows), then run the following commands:

npm i -g preact-cli@latest

This will install the latest version of Preact CLI, assuming you have Node and NPM installed on your local development machine.

You can now create your project with this:

preact create my-app

Or with this, ff you want to create your app interactively:

preact init

Next, navigate inside your app’s root folder and run this:

npm start

This will start a live-reload development server.

Finally, when you finish developing your app, you can build a production release using this:

npm run build

Continue reading %Using Preact as a React Alternative%


Source: Sitepoint

Extracting Website Data and Creating APIs with WrapAPI

Today, almost all services we use have some sort of API. Some web applications are even built from API points alone, being passed to some kind of front-end view. If you’re a consumer of a service that provides an API, you’ll sometimes need more features or find limits to what the API can offer. In this article, we’ll cover a service that’s useful both for API consumers and creators.

I always go with the saying that, if there’s a web interface, you can build your own API over it. WrapAPI tries to make this process easier. If you’re familiar with the process of web scraping/crawling (or extracting data from websites), you’ll see the magic of WrapAPI.

WrapAPI offers a service that allows you to easily extract information from websites and create APIs from the data. It provides an easy, interactive way of selecting what information you want to get. With just a few clicks, you can have your API online.

To follow along with this tutorial, I recommend you head over to wrapapi.com and create an account.

How To Get Around WrapAPI

On the WrapAPI site, you’ll see that you can start to build your project right away — although, unless you create an account, your work won’t be saved.

Once you’ve signed up, click the Try building an API button.

WrapAPI Web Builder

You’ll be presented by a browser-like interface. On top of the site we’re presented with a URL bar. As an example, WrapAPI uses Hacker News (https://news.ycombinator.com/). If you click the URL to change it to something else, you’ll see more options related to the request you want to make. We’ll use the default options, and only change the URL to https://www.sitepoint.com/javascript/. We’re covering only the GET method, as we only want to get data in this example.

Below the URL bar there are four buttons that give you different information regarding the site you’re viewing. Browser view displays the site as you would visit it from your browser. Code view displays the source code of the site. Headers shows the response you get from the server. This is useful if you want to see what response you get from the server: it gives you information like the HTTP status codes (200, 404, 400 etc.), content types, web servers and so on. You can also view the request’s Cookies directly from the builder.

Getting the Data

By now you should be able to see SitePoint inside the Browser View frame.

Preview of SitePoint inside WrapAPI Builder

Let’s create a very simple API that shows us the latest post titles of the JavaScript channel. If you hover over the titles, images or any other element in the site, you’ll notice a selection color covering it. Let’s scroll down a bit, to the LATEST articles part. Hover over the title from one of the articles and click on that title. You’ll notice that it doesn’t switch to that particular link we clicked. We see that every title in this section is highlighted. WrapAPI guessed that these are all the titles we want. Sometimes it can also select parts of the sites we don’t want. That’s usually the case when the CSS class selectors are not well-defined or used by other elements in the site.

Besides CSS selectors, WrapAPI supports regular expressions, JSON selectors, headers, cookies, form outputs, and a bunch more options. You can use them all together and extract exactly what you’re aiming for. In this example, we’ll only use CSS selectors.

Selecting titles in the builder

In the right part of the interface, you’ll see three tabs. Let’s take a look at the current Build tab. Outputs will show us the selectors (in our case CSS selectors), and you’ll get more details on what you would like to select. We’re interested only in extracting the title, which is text. There are more options on cleaning the result output, but we won’t get into these details. If you’d like to create another selector, to select description, author, date, etc., just click the Create a new collection/output. Naming your selectors is also important, as this will make it easier if you use multiple selectors in the site. By clicking the pencil icon, you can edit your selectors.

Extract/Ouput options

The Preview tab will show a representation of our data in JSON, and you probably get the idea of what the API will look like. If you’re happy with the results, you can click the Save button to save a version of the API.

Saving API endpoints

You’ll need to enter the repository and the endpoint name of the API. It helps you manage and organize your APIs. That will also be part of your API’s name in the end. After entering the information, you’ll return to the builder. Our API is saved, but now we need to test and publish it.

Tips:

  • If the site has pagination (previous/next pages), you can use the query string options. (More on that here.)
  • Name your selectors correctly, as they’ll be part of the JSON output.

Continue reading %Extracting Website Data and Creating APIs with WrapAPI%


Source: Sitepoint

Conditionally Applying a CSS Class in Vue.js

There are times you need to change an element’s CSS classes at runtime. But when changing classes, it’s sometimes best to apply style details conditionally. For example, imagine your view has a pager. Pagers are often used to navigate larger sets of items. When navigating, it can be helpful to show the user the page they’re currently on. The style of the item is conditionally set, based on the current page that’s being viewed.

A pager in this case may look something like this:

Pager

In this example, there are five pages. Only one of these pages is selected at a time. If you built this pager with Bootstrap, the selected page would have a CSS class named active applied. You’d want this class applied only if the page was the currently viewed page. In other words, you’d want to conditionally apply the active CSS class. As discussed in my Vue.js tutorial, Vue provides a way to conditionally apply a CSS class to an element. I’m going to show you this technique in this article.

To conditionally apply a CSS class at runtime, you can bind to a JavaScript object. To successfully complete this task, you must complete two steps. First, you must ensure that your CSS class is defined. Then, you create the class bindings in your template. I’m going to explain each of these steps in detail in the rest of this article.

Step 1: Define Your CSS Classes

Imagine, for a moment, that the five page items shown in the image above were defined using the following HTML:

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item active"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
    </ul>
  </nav>
</div>

Notice that each page in this code snippet has a list item element (<li …). That element references the page-item CSS class. In the code for this article, this class is defined in the Bootstrap CSS framework. However, if it weren’t defined there, it would be your responsibility to ensure that it was defined somewhere. The second CSS class is the one that’s most relevant to this article, though.

The active CSS class is used to identify the currently selected page. For this article, this CSS class is also defined in the Bootstrap CSS. As shown in the snippet above, the active class is only used in the third list item element. As you can probably guess, this is the CSS class that you want to apply conditionally. To do that, you need to add a JavaScript object.

Continue reading %Conditionally Applying a CSS Class in Vue.js%


Source: Sitepoint

CSS Grid Gotchas And Stumbling Blocks




 


 

In March this year, CSS Grid shipped into production versions of Chrome, Firefox and Safari within weeks of each other. It has been great to see how excited people are about finally being able to use it to solve real problems.

CSS Grid Gotchas And Stumbling Blocks

CSS Grid is such a different way of approaching layout that there are a number of common questions I am asked as people start to use the specification. This article aims to answer some of those, and will be one in a series of articles on Smashing Magazine about layouts.

The post CSS Grid Gotchas And Stumbling Blocks appeared first on Smashing Magazine.


Source: Smashing Magazine

Learn Computer Science With JavaScript: Part 3, Loops

Introduction

Suppose you have been given the task to write a program that displays the numbers 1–100. One way you could accomplish this is to write 100 console.log statements. But I’m sure you wouldn’t because you would have become fed up by the 9th or 10th line.  

The only part that changes in each statement is the number, so there should be a way to write only one statement. And there is with loops. Loops let us perform a set of steps in a code block repeatedly.  

Contents

  • While loops
  • Do-while loops
  • For loops
  • Arrays
  • For-in loops
  • For-of loops
  • Review
  • Resources

While Loops

While loops will execute a set of statements repeatedly while some condition is true. When the condition is false, the program will exit the loop. This kind of loop tests the condition before performing an iteration. An iteration is an execution of the loop’s body. The following example will not display anything because our condition is false.

This is the general form of a while loop:

One thing to be careful of when using while loops is creating loops that never end. This happens because the condition never becomes false. If it happens to you, your program will crash. Example:

Task

How many times will the body of this loop be executed:

Do-While Loops

A do-while loop will execute the body of statements first, and then check the condition. This kind of loop is useful when you know you want to run the code at least once. The following example will display “eat” once, even though the condition is false.

This is the general form for a do while-loop:

Task

Write a do-while loop that will display the numbers 1–10.

For Loops

A for-loop will repeat execution of a code block for a specific number of times. The following example displays the numbers 1–10:

This is the general form of a for-loop:

Initial is an expression that sets the value of our variable. Condition is an expression that must be true for the statements to execute. And step is an expression that increments the value of our variable.

One programming pattern is to use a for loop to update the value of a variable with itself and a new value. This example sums the numbers 1–10:

The += is an assignment operator that adds a value back to a variable. This is a list of all the assignment operators:

OperatorExampleEquivalent
+=x += 2 x = x + 2
-=x -= 2x = x – 2
*=x *= 2x = x * 2
/=x /= 2x = x / 2
%=x %= 2x = x % 2

Task 

Write a for loop that calculates the factorial of a number. The factor of a number n is the product of all the integers from 1 to n. For example, 4! (4 factorial) is 1 x 2 x 3 x 4 which equals 24.

Arrays

An array is an object that holds a list of items, called elements, which are accessed by their index. The index is the position of the element in the array. The first element is at the 0 index. The following are some common array operations.

Create an empty array:

Initialize an array with values:

Get an element from an array:

Update an element in an array:

Loop over an array:

A two-dimensional array is an array whose elements are arrays. Example:

This is how you would loop over the array and display each element:

Task 

What element is displayed when i = 1 and j = 0 in the above for loop?

For-In Loop

This kind of loop lets us loop through the keys in an object. An object is a data structure that has keys mapped to values. Here are some common operations that can be performed on an object.

Create an empty object:

Initialize an object with values:

Get a property from an object:

Update a property in an object:

Loop over the keys of an object:

Task

What does the above for loop display given obj = {foo: “Hello”, bar: “World”}?

For-Of Loop

This kind of loop lets us loop over the values of iterable objects. Examples of iterable objects are arrays and strings.

Loop over an array:

Loop over a string:

Task

Using any of the loops, write a program that will display this staircase pattern:

Review

Loops let us reduce duplication in our code. While loops let us repeat an action until a condition is false. A do-while loop will execute at least once. For loops let us repeat an action until will we reach the end of a count. The for-in loop is designed so we can access the keys in an object. The for-of loop is designed so we can get the value of an iterable object. 

Next, in part 4, we will learn about functions.

Resources


Source: Nettuts Web Development

How to Design Highly Memorable Experiences, and Why

According to Gartner, by 2017, 89% of marketers expect customer experience to be their primary differentiator. In order to create terrific customer experiences that set our apps and websites apart, we need to learn a bit more about how our brains work, and how we can create experiences that are memorable.

Fact: human brains are lazy. We love a shortcut.

Let’s take a look at how that impacts on the way we design user experiences, and how we can design for lazy brains.

The Peak—end Rule

Nobel Prize winner Daniel Kahneman suggested that modern-day humans employ a a psychological heuristic (basically, a mental shortcut) called the peak—end rule, which states:

People judge an experience largely based on how they felt at its peak (i.e., its most intense point) and at its end, rather than based on the total sum or average of every moment of the experience. The effect occurs regardless of whether the experience is pleasant or unpleasant.

Let’s think about that for a second. It’s a big deal.

When we remember experiences, we tend to recall only snapshots of the key events that happened. This means that we might easily recall a singular negative event (like a rude customer service representative) and forget the better but smaller aspects of the experience (like a well-designed website). Or, vice versa, we might dislike an experience overall (bad website UX), but what we’ll remember later is the terrific customer service received.

The Peak-end Rule: an Everyday Example

An everyday example of this is movies. Have you ever watched a brilliant movie, only for it to be spoiled by a disappointing ending? Two hours of spellbinding suspense can be rendered useless with a bad ending, much like an exciting online shopping experience can be ruined by a confusing/frustrating checkout.

Even if the middle of the experience was faultless, that’s not the aspect of the experience that users will remember.

Boost Peak Moments with Friction

So we know that our brains like shortcuts. We know they remember the end and the most intense moments of an experience more than any other moment. In addition to that, we should also remember that our memories are faulty; they aren’t always correct. People won’t always remember what you said to them, but they’ll remember how you made them feel.

So, with that in mind, we can then make changes to the experience to ensure that users forget negative moments, and remember positive ones. Some menial tasks, such as filling out a form, users won’t want to remember. By simplifying the experience and removing friction, users can breeze through this step. We don’t want the peak moment to be a horrendous one.

Airbnb Example

The same applies to positive experiences. Let’s say you’ve booked an apartment on Airbnb. That’s pretty exciting, right? Of course it is: you’re going on holiday! To ensure the possibly frustrating search experience doesn’t overshadow the excitement of your booking, Airbnb adds friction to keep you excited for a little longer. Here’s what Airbnb does:

  • shows you things to do in the area
  • lets you read the house manual
  • lets you send the itinerary to your travel buddies
  • helps you find directions to the address
  • sends you an exciting “You’re going away!” message

Not only does this often overshadow the somewhat long/boring search for an Airbnb, but it improves the user experience towards the end as well. Now, when the user remembers Airbnb, they’ll remember how exciting it all was. Even though Airbnb bothers us with sending itineraries and recommendations, this is the sort of friction we’re happy to engage in.

In short: stretch out positive moments, and relieve the user of negative pain points quickly by removing friction.

Uber Example

Remember taxis? Remember arriving at your destination and then fiddling around for cash? Yeah, this can be awkward. You realize you don’t have the right change, so you pay with credit card; the card machine isn’t working, so you have to drive to the ATM.

It’s a rather awful, frustrating, embarrassing experience.

Your Uber account is linked to your bank card. Once you’ve arrived at your destination, you hop out of the car and you’re done. Fiddling around for cash is not necessary; that pain point has been removed, and so the user walks away with their final experience with Uber being one of delight.

Embrace “Flat” Moments

Flat moments are moments that are neither fun nor boring.

An excellent example of a “flat moment turned memorable” might be from way back in the early 2000s, from an e-commerce website called CD Baby. Typically, when you make a purchase online, you receive an email confirmation to notify you that your purchase went through smoothly. This is fairly standard, and important.

Derek Sivers at CD Baby knew how flat this experience would be, and didn’t want to end it with something that wasn’t memorable, so he thought he’d have some fun. He put on his best copywriting mitts and came up with the following confirmation email:

CD Baby email

People loved it. It went viral. Derek had turned a boring aspect of the experience into an unexpected delight. People were suddenly purchasing from CD Baby just to see the email (remember, this was the early 2000s!). If we map out the customer journey, we’ll find that the email had become a peak moment, and a surefire way to create a memorable experience as the user — hopefully temporarily — departs from CD Baby.

Continue reading %How to Design Highly Memorable Experiences, and Why%


Source: Sitepoint

An Overview Of The Most Common UX Design Deliverables




 


 

What do UX designers do on a daily basis? A lot of things! UX professionals need to communicate design ideas and research findings to a range of audiences. They use deliverables (tangible records of work that has occurred) for that purpose.

A Comprehensive Overview Of UX Design Deliverables

I’ve created a list that contains the most common deliverables produced by UX designers as they craft great experiences for users. For better readability, I’ve combined the deliverables according to UX activities.

The post An Overview Of The Most Common UX Design Deliverables appeared first on Smashing Magazine.


Source: Smashing Magazine

Learn Computer Science With JavaScript: Part 4, Functions

Introduction

Suppose you have a file that is 82 lines long and consists only of a series of statements. (I hope this is isn’t true, but anything is possible.) How would you understand what the program does? How would you modify it or use it? It would be kind of hard to do anything with this code because there is no structure to it.  

To solve this problem, you could use functions. A function is a group of statements that perform a specific task. Functions allow us to break up a program into smaller programs, making our code more readable, reusable, and testable.

Contents

  • Void functions
  • Value returning function
  • Scope
  • Parameters
  • Modules

Void Functions

This kind of function lists steps for the program to perform. Consider we are writing a program to log a user into a website. The program might consist of the following tasks:

  • Get the username
  • Get the password
  • Check if the username and password exist
  • Redirect the user to their dashboard

Each of these steps might be contained inside a login function. This is an example function:

This is the general form of a function:

To execute the function (also known as calling the function, or invoking the function), you write a statement that calls it.

The () is where we pass input to the function. When we are defining the function, the input is called a parameter. When we call the function, the input will be the actual value and is called the argument. Example:

With JavaScript ES6, you can define functions using arrow syntax. Here is our greet function defined using arrow syntax:

A function with one parameter:

A function with more than one parameter:

A function with multiple statements:

Because an arrow function is an anonymous function, we give our function a name by assigning it to a variable. Arrow functions can be useful when your function body only has one statement.

Value Returning Function

This kind of function returns a value. The function must end with a return statement. This example returns the sum of two numbers.

This is the general form defining a value returning function:

The value of expression is what gets output by the function. This kind of function is useful when it is stored in a variable. 

Scope

A variable’s scope is the part of the program where a variable can be accessed. A variable can be local or global. A local variable’s scope is inside the function it was created in. No code outside of the function can access its local variables. 

Also, when you use let or const to declare a variable, they have block scope. A block is a set of statements that belong together as a group. A block could be as simple as wrapping our code in curly braces:

The variable a is local to the block it is in. A block can also be a loop or an if statement. Example:  

Because our console statement is in the same scope as our first variable a, it displays that value, which is 1. It does not have access to the variables inside the if block. Now, consider this example:

Now 2 will be displayed because the scope of variables that our console statement has access to is within the if block. A function’s parameters are also local variables and can only be accessed by code inside the function. Global variables, on the other hand, can be accessed by all the statements in a program’s file. Example:

In this example, a is a global variable, and we have access to it inside the foo function. The first console statement will display 1. After calling foo, the value of a is set to 2, making the second console statement display 2. 

Global variables should be used very little, ideally not at all. Because global variables can be accessed by any part of a program, they run the risk of being changed in unpredictable ways. In a large program with thousands of lines of code, it makes the program harder to understand because you can’t easily see how the variable is being used. It is better to create and use local variables.

However, if you need to use a variable in multiple places in your program, it is OK to use a global constant. Declaring a variable with the const keyword prevents it from being changed, making it safer to use. You only need to worry about updating the value of the constant in the place it was declared.

Parameters

Recall that a parameter is a variable a function uses to accept data. The parameter is assigned the value of a function’s arguments when the function is called. As of ES6, parameters may also be given default values with the format parameterName=value. In this case, you can call a function without arguments, and it will use default values. Example:

The spread/rest operator is new to ES6 and can be used to either expand an array or object into individual values or gather the parameters of a function into an array. This is an example of using a rest parameter:

Modules

Suppose now you have a file that has 1,082 lines. (I have seen this, and you should run if you encounter such a thing.) The file is organized into functions, but it is difficult to see how they relate to each other. 

To group together related behavior, we should put our code in modules. A module in ES6 is a file that contains related functions and variables. Modules let us hide private properties and expose public properties that we want to use in other files. The filename would be the name of the module. Modules also have their own scope. To use variables outside of the module’s scope, they have to be exported. Variables that aren’t exported will be private and can only be accessed within the module.  

Individual properties can be exported like this:

Alternatively, all properties can be exported with one export statement:

To use a module’s variables, you import it into the file. You can specify what you want to import from the module like this:

You can also rename your import:

Or you can import all of the properties of the module:

Review

Functions allow us to divide our programs into smaller programs that we can easily manage. This practice is known as modularizing. There are two kinds of functions: void functions and value returning functions. A void function executes the statements inside of it. A value returning function gives us back a value.  

Scope is the part of the program where a variable can be accessed. Variables declared inside a function, including the function’s parameters, are local. Blocks also have scope, and local variables can be created inside of them. 

Variables not enclosed in a block or module will be global. If you need a global variable, it is acceptable to have a global constant. Otherwise, try to contain your code to modules because modules have their own scope. But even better, modules give your code structure and organization.  

Resources


Source: Nettuts Web Development