Web Design Weekly #229

Headlines

CSS and Scalability

A great reflective piece by Adam Morse on how his experience and thoughts have evolved over that last few years whilst working with large CSS codebases. If you write CSS, this is a must read. (mrmrs.io)

Changes to npm’s unpublish policy (blog.npmjs.org)

Download Anything You Want for 7 Days on GraphicStock

GraphicStock is giving you 7 days to download anything you want. Access over 300,000 choices including high quality graphics, textures, backgrounds, photos, icons, vectors, layouts, and more. (graphicstock.com)

Articles

The Holy Grail Layout with CSS Grid

In this tutorial Ire Aderinokun creates the Holy Grail Layout to help understand the inner workings of the CSS Grid Layout which is quite complex. She looks into some of the 17 new properties and explores a lot of its new concepts. (bitsofco.de)

Houdini – Give developers the power to extend CSS

Houdini is a new W3C task force that plans to introduce a new set of APIs that will, for the first time, give developers the power to extend CSS itself and the tools to hook into the styling and layout process of a browser’s rendering engine. (smashingmagazine.com)

Why I don’t use CSS preprocessors

A refreshing post by Roger Johansson that explains why he doesn’t use CSS preprocessors but does use CSS processors. (456bereastreet.com)

Leveling Up with React: Redux

The final of a three-part React series by Brad Westfall over on CSS Tricks. Brad looks into managing state across an entire application efficiently and in a way that can scale without getting absurdly complex. (css-tricks.com)

Tools / Resources

FT Labs Performance Widget – Insights

Insights is a Chrome extension which runs a set of tests on any page visited by the user and places the results from these tests inside a widget on the page written in a contextualised manner to make the results easier to digest. (labs.ft.com)

Ember FastBoot

An Ember CLI addon that allows you to render and serve Ember.js apps on the server. Using FastBoot, you can serve rendered HTML to browsers and other clients without requiring them to download JavaScript assets. (ember-fastboot.com)

Dyslexia Style Guide

A short and concise style guide that gives some great pointers on making sure your work can be enjoyed by dyslexic users. (bdadyslexia.org.uk)

The Best Methods and Resources to Learn JavaScript:

A large list of books, courses and tips from some really talented developers to help take your JavaScript to the next level. (psdtowp.net)

Public APIs

A collective list of public JSON APIs for use in web development. (github.com)

Snapback Cache

A client side page cache for jQuery. (medium.com)

Need HTML5 Ads? Adobe Animate CC to the Rescue (blogs.adobe.com)

Introducing Safari Technology Preview (webkit.org)

AMA with the webpack Team (hashnode.com)

GitHub for Human Beings (ponyfoo.com)

Inspiration

d’Oh My Zsh

Robby Russell explains how he unexpectedly built a monster of an open source project. (medium.com)

Building the UI for the new The Times website (medium.com)

The Veil of Ignorance (mrmrs.io)

Jobs

Product Design Lead at Zendesk

We are looking for a Design Lead with a demonstrated track record of managing and building product design teams. You’re an empathetic and proven people manager that possesses the leadership abilities needed to hire, motivate and optimize a diverse team of talented product designers and user research professionals. (zendesk.com)

Senior Front End Developer at Shopify

At Shopify we have one of the largest front end architectures in the world, and our front end development team works on making our client side scalable, approachable, and an exceptional experience for hundreds of thousands of shop owners across the world. If you are keen for a massive challenge we would love to hear from you. (shopify.com)

Need to find passionate developers? Why not advertise in the next newsletter

Last but not least…

Commit Logs From Last Night (commitlogsfromlastnight.com)

The post Web Design Weekly #229 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Ruby Interview Questions: Problem Walkthroughs

We've talked a bit about interviewing with Ruby and the basic tools of the game. In this article, we will consider some harder interview questions that ask us to apply some of the concepts we have learned thus far. The point here isn't just to learn how to implement the solutions to the problems, but the train of thought that leads to a solution.

The problem you are presented with while you stand nervously at the whiteboard (by the way, whiteboard coding sucks) might be very different from the stuff you've already seen, but if you truly understand the motivation behind the solutions, you'll be fine. Without further ado, let's look at our first problem.

Closest Ancestors

Here's the first problem:

Given two nodes within a binary tree, find their lowest common ancestor.

Where the lowest common ancestor is the first node (i.e. one with minimum distance) that both given nodes have in common as an ancestor. OK, let's think through this thing.

Continue reading %Ruby Interview Questions: Problem Walkthroughs%

by Dhaivat Pandya via SitePoint

jQuery formBuilder – Drag and Drop Form Builder

formBuilder is a jQuery plugin for drag and drop form creation.

by via jQuery-Plugins.net RSS Feed

Using the SoundCloud API with the JavaScript SDK

SoundCloud has made available an API which allows developers to get almost any data they want. But its usage can be confusing, especially for beginners, because as of now the SoundCloud API documentation and the examples use different versions of the SDK (Software Development Kit).

What is the difference between the API and the SDK? Basically, the API is a collection of URLs that provide access to data from the SoundCloud servers, and the SDK is a pre-written library (or client) for querying the API. To learn more see this discussion.

In this tutorial, we will learn how to access the SoundCloud API and how to simplify the process using the SDK. We will walk though setting up the SDK and then write the JavaScript to get data, play audio and more from SoundCloud.

Getting Started

Knowing the concepts and workings of HTTP and APIs will be helpful. If you want to learn more about APIs, I recommend this short course: An Introduction to APIs. A little knowledge of asynchronous JavaScript, promises and callbacks will also help. jQuery is used in our code examples, so knowing the basics won't hurt.

To start querying the SoundCloud API using JavaScript, we need to download the JavaScript SDK provided by SoundCloud. As mentioned earlier, there are two different versions of the SDK available.

Which Version of the SDK to Use?

The major difference between them is how they return data when an asynchronous request is made to the API. The latest version returns a Promise, while the other requires a callback function as a parameter.

One problem I noticed, is that with the version of SDK used by the documentation, there seems to be an issue with user-login functionality, as the pop-up window doesn't close automatically.

So, for simplicity's sake, and because it is more stable, we will use the old version in the examples throughout this tutorial. This version will require callback functions for asynchronous requests.

Using the SoundCloud API

Setup a Basic HTML Document

We will create a basic HTML page which will serve as our homepage. We will also include the SDK here, so we can make use of its functionality.

<!DOCTYPE html>
<html>
  <head>
    <title>Include SDK - Using SoundCloud API</title>
    <script src="//connect.soundcloud.com/sdk.js"></script>
  </head>
  <body></body>
</html>

Notice that we have included the SDK in our page directly from SoundCloud's servers. You can also download the SDK and reference to it like:

<script src="sdk.js"></script>

To test if the SDK gets loaded in your webpage correctly:

• Open up the page in a browser (Chrome recommended).
• Open up Developer Console in the browser (Ctrl + Shift + J, in Chrome).
• In the Console, type SC and press enter. SC is a Javascript Object created by the SDK which we just included.

If an undefined error shows up then it is not loading correctly. Try refreshing and make sure the path to the SDK file (sdk.js) is correct.

Register a SoundCloud App

To register a SoundCloud app, all you need is a SoundCloud account. If you don't have one already, go ahead and create one. By registering an app, SoundCloud servers will be able to verify our request, so no one else can make a request on our behalf.

Note: We can skip this step, if we are not going to use the user-login feature in our website. It will be explained in the next section.

• Open the SoundCloud apps page. Here any apps we have already created will be listed. Make sure you are logged in to your SoundCloud account. Note: You do not need to make a separate account for this purpose. You can use the same account which you use for personal purposes.

• Click on the Register a new application button.
  

• Give it a name and accept SoundCloud's Developer Policies by checking the checkbox.
  

• Click on the big Register button, to complete the app registration.

After we have successfully registered, we will be redirected to the settings page of our newly created app. There we will find our app's Client ID, which will be used to authorize our requests. We can leave the website and callback fields for now. We'll get to that later.

Initialize the Client

By "initializing the client", we mean to make the client ready to exchange data between itself and SoundCloud API. We can do it in our basic HTML document, which we created earlier, or in an external .js file.

The JavaScript syntax to do so is:

SC.initialize({
  client_id: "CLIENT_ID",
  redirect_uri: "CALLBACK_URL"
});

Let's break it down:

• The CLIENT_ID is provided to us when we register our app.
• CALLBACK_URL is the URL to callback.html, an HTML file which gets called after the user has logged in. We will create it soon.

Now, after initialization, we are ready to query the SoundCloud API. Let's take a look at some examples of what we can do already.

Examples

If we open up browser console and type SC., a list of methods associated with the SC object will appear. SC.get(uri, callback) is one of them, which is used for making GET requests to the API.

Getting a List of Tracks

To get a list of random tracks, we can use SC.get() like this:

SC.get("/tracks", function(response) {
  for (var i = 0; i < response.length; i++) {
    $("ul").append("<li>" + response[i].title + "</li>");
  }
});

Continue reading %Using the SoundCloud API with the JavaScript SDK%

by Mustaghees Butt via SitePoint

Setting IP Restrictions for the WordPress Login Page

According to a study conducted back in 2013, approximately 30,000 websites are hacked every day. It goes without saying that you need to take measures to protect your site from hackers.

Securing your own data is important, but letting your visitors know that their data is safe is even more so. A protected site is a credible site.

There are several methods you can adopt to lower the chances of your WordPress site from being hacked. Limiting access to a pre-defined set of users is one of them. In this article, we’ll walk you through a step-by-step procedure to set IP restrictions for the WordPress login page.

Continue reading %Setting IP Restrictions for the WordPress Login Page%

by Rafay Saeed Ansari via SitePoint

Introducing Our Newest Book: Jump Start Sass

Hey everybody,

I have a huge announcement to make! Just a few days ago, we added the final touches to our latest masterpiece in the Jump Start collection: Jump Start Sass.

I have been working closely with SitePoint for the past months to write a book on Sass dedicated to people wanting to learn more about the preprocessor, its language and how to use it in daily projects to help boost productivity.

[author_more]

Miriam Suzanne (the author of Susy and the True testing framework) and I have joined forces to offer you a result that is not only comprehensive, but also simple and accessible. Basically, it's 157 pages of awesomeness (in my un-biased opinion!).

What’s in there?

Here is the table of contents and a few words on each chapter to get you hungry:

1. Foreword (by no other than Chris Eppstein)
2. Hello World — An introduction to Sass in modern front-end development, its history, its syntaxes (Sass and SCSS) as well as its competitors (LESS, Stylus and PostCSS).
3. Getting Started — A short explanation on how to install Sass binaries (both the Ruby gem and node-sass) and how to use them to compile Sass stylesheets to CSS.
4. Variables — An extensive chapter on variables, how they work, how to use them, when and why, closed with a comparison with CSS Custom Properties.
5. Functions & Mixins — A chapter dedicated to mastering functions and mixins to start building small systems.
6. Loops & Conditions — A concise explanation of how logical structures work in Sass, mainly loops and conditions statements, and how to use them to build powerful mixins.
7. Nesting — A reminder on the nesting feature, mostly focused on selector nesting, providing helpful tips to avoid being lost in the dreaded horizontal pyramid of selectors.
8. Extend — A solid introduction to the @extend directive and how to avoid bloated output when using it.
9. Warnings & Errors — An introduction to the ability to emit warnings and throw errors directly from within stylesheets, as well as why and when doing so makes sense.
10. Architecture — A massive chapter on different approaches to Sass-powered project architecture, including OOCSS, ITCSS, SMACSS and more.
11. Ecosystem — The final chapter introduces you to the Sass ecosystem, its main toolkits, libraries and frameworks such as Bourbon, Susy, Accoutrement, SassDoc, Sass-Guidelines, Modular Scale, SCSS-lint and many many more.

That covers quite a lot, doesn't it?

Who is this book for?

As you can guess from the table of contents, this book is essentially targeted to newcomers and beginners, all the way up to the intermediate level. This is part of SitePoint's Jump Start series, so it's not aimed at advanced Sass users.

However if you feel a bit short on Sass, are not too sure about how to tackle project architecture or simply find yourself in need of a refresher, you’ll be pleased. I promise that.

On top of this book, I recommend you bookmark the SitePoint Sass Reference as a quick reference for features tackled in this book, as well as Sass Guidelines to push the quality of your Sass code to the next level.

It's available on SitePoint Premium, SitePoint's subscription service, or you can order a print or ebook version via O'Reilly.

Alright. Go read it now, and let us know what you think!

Continue reading %Introducing Our Newest Book: Jump Start Sass%

by Hugo Giraudel via SitePoint

A-Frame: The Easiest Way to Bring VR to the Web Today

Web developers around the world don't need to go out and learn entirely new languages or a game engine like Unity or Unreal Engine to start developing virtual reality. There are various ways to start experimenting with VR on the web today and the A-Frame framework is one of the easiest ways to get started.

What is A-Frame?

A-Frame is an open source framework for creating WebVR experiences using custom HTML elements. These elements use three.js and WebGL to create VR-enabled elements in a scene, without requiring developers to learn lower level APIs such as WebGL in order to build simple experiences for VR.

The A-Frame team are striving to create an extensible VR web that allows developers to build competing APIs and ideas which, once widely adopted and established, can become part of a defined standard. This allows us to use new capabilities today via JavaScript frameworks and experimental browser builds, without needing to wait for a standard to be implemented and make its way into the browser.

Device Compatibility

The next — and very important — question most likely to be asked next would be "is A-Frame cross-browser compatible?". Surprisingly, A-Frame experiences work well on a variety of platforms, with the 3D scene (without VR) being visible as a fallback as long as the browser is WebGL compatible. This means Chrome, Firefox, Edge and Opera all show an interactive 3D version of the experience for the desktop. For a VR experience, an Oculus Rift can be connected to WebVR enabled versions of some browsers to bring in VR compatibility (see links below under "What You'll Need").

In terms of smartphones, modern smartphones within the last two generations that run iOS and Android are best (iPhone 6 and up, Samsung Galaxy S6 and up, my HTC One M9 works well). Most of these also support virtual reality when inserted into a Google Cardboard headset, so VR-compatibility can actually be higher and easier to manage than trying to get VR working on your desktop!

What You'll Need

To follow along and try out A-Frame yourself, you will need the following:

• For a basic non-VR experience — A WebGL enabled browser as mentioned above.
• For a desktop VR experience —
  • A browser build with WebVR support such as the latest Chromium WebVR build or Firefox Nightly.
  • An Oculus Rift headset (maybe the HTC Vive too, I haven't been able to test this!).
• For a mobile VR experience — 
  • Most modern smartphones will be capable of at least showing the scene and allowing you to look around in a semi-VR view (one without the headset itself but where moving the phone moves your view around).
  • A Google Cardboard or Gear VR headset.

Getting Started

To get started, head to A-Frame's Getting Started page. The A-Frame team have provided various options for experimenting with A-Frame, including CodePen snippets, an npm build, a downloadable or CDN available JS file of the framework, and a boilerplate with HTML and a local dev server as a guide to best practice. To keep things as simple as possible, we will be downloading and working directly from the A-Frame boilerplate.

Extract the boilerplate wherever you prefer to have web projects on your system. It does not necessarily need to be running on a local web server. The boilerplate uses A-Frame from their CDN, so it is mainly the index.html file that we are after. The package.json provides an npm based local web server for testing, we will use this in this article — however, it is not necessary to test this out.

Running Our Local Server

As mentioned above, the A-Frame Boilerplate comes with its own local web server ready for use. While this isn't always necessary in order to test your A-Frame scenes, it is good practice to do so and can reduce confusion when it comes to various cross-origin policy issues that often arise when it comes to running webpages via the file system on your computer.

To run the local web server, go to the folder with your boilerplate project inside your Terminal/Command Prompt and run the following:

[code language="bash"]
npm install && npm start
[/code]

This will install all the necessary files for the web server and then run it for you. After this point, if you ever want to run the server again, just run npm start.

Upon running the local web server, it should automatically open up our web browser and load our boilerplate webpage. It comes with LiveReload — which means that it will automatically refresh whenever you make changes.

If you need to open the webpage on a different device, or if it does not open automatically after you've run the local web server, you can open it by going to http://localhost:3000 in your browser or http://192.168.0.1:3000, where that IP address is the IP address of your computer.

The initial scene you should see looks like so:

Building a New Scene

Let's clean up the boilerplate code and remove everything within the <body> tag apart from <a-scene>. All of our A-Frame elements will be placed within this <a-scene> component:

[code language="html"]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Our First A-Frame Experience</title>
<script src="http://ift.tt/1MOj001"></script>
</head>
<body>
<a-scene>

</a-scene>
</body>
</html>
[/code]

A-Frame comes with a set of primitives which provide us a series of commonly used elements for VR scenes. Let's add a few of our own to build up a custom scene.

Setting Up Our Sky

Every scene needs a sky (or background of some kind). This can be either a flat color, or a panoramic, equirectangular image. The primitive for this is <a-sky>.

The code for a sky with a single, flat color looks like so:

[code language="html"]
<a-scene>
<a-sky color="#C500FF"></a-sky>
</a-scene>
[/code]

That creates a lovely and natural bright fuchsia sky for our scene:

As glorious as that sky is, it will look better with a panoramic 360 image. One nice spot to find skyboxes you can use to experiment is Flickr. There are a range of equirectangular photos here that are provided with a licence that will allow you to reuse them.

I went onto Flickr and found the following photo from Luca Biada which does require attribution in order to be used in a project (always check the licence terms!):

[caption id="attachment_127747" align="aligncenter" width="800"] Image source: Luca Biada[/caption]

Continue reading %A-Frame: The Easiest Way to Bring VR to the Web Today%

by Patrick Catanzariti via SitePoint