Collective #430

Original Source:


Inspirational Website of the Week: An Interesting Day

No animations but a brilliant layout and a unique design with some nice details. Our pick this week.

Get inspired


Our Sponsor
Bloom: eMail Opt-In And Lead Generation Plugin For WordPress

Bloom gives you the power to display opt-in forms using integrations of the most popular email marketing systems available.

Check it out



Publii is a static-website-building tool for every skill level with a GUI to build a safe, fast and stylish website.

Check it out


CSS Grid in IE: CSS Grid and the New Autoprefixer

Daniel Tonon’s three-part series on CSS Grid in Internet Explorer. In this second part he tackles the common misconception that the IE implementation of CSS grid is extremely difficult.

Read it


Introduction to Feature Policy

Learn everything about “Feature Policy” which allows web developers to selectively enable, disable, and modify the behavior of certain APIs and web features in the browser. By Eric Bidelman.

Read it


CSS Grid Level 2: Here Comes Subgrid

Rachel Andrew explains the new features of CSS Grid Level 2.

Read it


CSS Doodles

A lovely set of CSS doodles by Agathe Cocco.

Check it out


The Mutable Gallery

A collection of generative artworks by Heydon Pickering.

Check it out



Textalytic is a free Natural Language Processing service that handles pre-processing, analyzing, and visualization in an easy to use web interface.

Check it out


The guide to integrating and styling icon systems?- SVG sprites, SVG symbols and icon fonts

The second part in a two-part series on icon systems with focus on SVG image sprites, SVG symbols and icon fonts. By Sebastiano Guerriero.

Read it


Physics-Based Background Scroll Effects

In case you missed it: a tutorial on how to create an animated background effect with Matter.js.

Read it


Infinitely drawing icons

A great loading animation of icons by Mikael Ainalem.

Check it out


Clock Shop

A collection of beautiful and unusual clock demos.

Check it out


The Link Bar, an Ecommerce Mobile Homepage Navigation Alternative (to the Hamburger Menu)

Some interesting AB test results of using the link bar navigation pattern in mobile sites.

Check it out


Beyond Likert scales: how we made boring form-filling more fun

Read how the team at JotForm made their forms more fun to use.

Read it


picCSSel Art

A tool to create CSS pixel art made by Kushagra Gour.

Check it out


Ghost Mouse

A fantastic demo by Liam Egan where a blob like element moves with the mouse/finger.

Check it out


Brad’s Homelab

Brad Fitzpatrick’s home lab setup for highly-available internet.

Check it out


Clearfix: A Lesson in Web Development Evolution

Jason Hoffman takes a look at the history of the famous CSS clearfix hack.

Read it



A Linux terminal recorder written in Python that renders your command line sessions as standalone SVG animations.

Check it out


Free Font: Akrotiri

A playful rounded font made by Ilya Zakharov.

Get it

Collective #430 was written by Pedro Botelho and published on Codrops.

Better Collaboration By Bringing Designers Into The Code Review Process

Original Source:

Better Collaboration By Bringing Designers Into The Code Review Process

Better Collaboration By Bringing Designers Into The Code Review Process

Ida Aalen


Smooth collaboration between developers and designers is something everyone aspires to, but it’s notoriously difficult. But with today’s advanced web, it’s difficult — if not impossible — to build a truly great product without collaborating across disciplines. Because of the range of technologies required to build a product, the product can only truly succeed when all disciplines — developers and designers, content creators, and user experience strategists — are deeply involved from the early stages of the project. When this happens, all ends of what it takes to build a product come naturally together into a unified whole, and a thus great product.

Because of this, no one is really promoting waterfall processes anymore. Nevertheless, involving other people early on, especially people from other disciplines, can feel scary. In the worst case scenario, it leads to “design by committee.”

Moreover, both designers and content strategists often have backgrounds in fields in which a sole creative genius is still the ideal. Having someone else proof your work can feel like a threat to your creativity.

So how can you involve people early on so that you’re avoiding the waterfall, but also making sure that you’re not setting yourself up for design by committee? I found my answer when learning about code reviews.

Getting workflow just right ain’t an easy task. So are proper estimates. Or alignment among different departments. That’s why we’ve set up “this-is-how-I-work”-sessions — with smart cookies sharing what works well for them. A part of the Smashing Membership, of course.

Explore features →

Smashing TV, with live sessions for professional designers and developers.

The Aha! Moment

In July 2017, I founded Confrere together with two developers, and we quickly hired our first engineer (I’m not a developer myself, I’m more of a UX or content designer). Our collaboration was running surprisingly smoothly, so much so that at our retrospectives, the recurring theme was that we all felt that we were “doing it right.”

Three people are smiling and sitting next to each other around a computer. From left to right, they are Dag-Inge (CTO), Ida (CPO) and Ingvild (Sr. Engineer).

Dag-Inge (CTO), myself (CPO) and Ingvild (Sr. Engineer). (Large preview)

I sat down with my colleagues to try to pinpoint what exactly it was that we were “doing right” so that we could try to preserve that feeling even as our company grew and our team expanded. We came to the realization that we all appreciated that the whole team was involved early on and that we were being honest and clear in our feedback to each other. Our CTO Dag-Inge added: “It works because we’re doing it as peers. You’re not being berated and just getting a list of faults”.

The word “peer” is what gave me the aha moment. I realized that those of us working within UX, design, and content have a lot to learn from developers when it comes to collaboration.

Peer reviewing in the form of code reviews is essential to how software gets built. To me, code reviews offer inspiration for improving collaboration within our own fields, but also a model for collaborating across fields and disciplines.

If you’re already familiar with code reviews, feel free to skip the next section.

What Is A Code Review?

A code review can be done in various ways. Today, the most typical form of code review happens in the way of so-called pull requests (using a technology called git). As illustrated below, the pull requests let other people on the team know that a developer has completed code that they wish to merge with the main code base. It also allows the team to review the code: they give feedback on the code before it gets merged, in case it needs improvement.

Pull requests have clearly defined roles: there is an author and a reviewer(s).

Ingvild and Dag-Inge is setting next to each other and smiling. An arrow indicated that Ingvild has sent code to Dag-Inge.

Ingvild (the author) requests a review from Dag-Inge (the reviewer). (Large preview)

As an example, let’s say our senior engineer Ingvild has made a change to Confrere’s sign-up flow. Before it is merged into the main code base and gets shipped, she (the author) creates a pull request to request a review from our CTO Dag-Inge (the reviewer). He won’t make any changes to her code, only add his comments.

Ingvild and Dag-Inge is setting next to each other. An arrow indicates that Dag-Inge has sent comments on code back to Ingvild.

Dag-Inge comments on Ingvild’s code. (Large preview)

It’s up to Ingvild how she wants to act on the feedback she received in the review. She’ll update her pull request with the changes she sees fit.

Ingvild and Dag-Inge are sitting next to each other. An arrow indicates that Ingvild is sending back her code to Dag-Inge, having looked through the code he commented on.

Ingvild updates her code with the changes she sees fit in light of Dag-Inge’s comments. (Large preview)

When the reviewer(s) approve the pull request, Ingvild can then merge her changes with the main code base.

Ingvild and Dag-Inge are sitting next to each other. A thumbs-up is displayed on the code review Dag-Inge has sent to Ingvild. And arrow indicates she pushes this code to the main repository.

After Dag-Inge gives the thumbs up, Ingvild can push the fix to production. (Large preview)

Why Bother Doing Code Review?

If you’ve never done code review, the process above might sound bureaucratic. If you have doubts, here’s a ton of blog posts and academic research about the advantages of code review.

Code reviews set the tone for the entire company that everything we do should be open to scrutiny from others, and that such scrutiny should be a welcome part of your workflow rather than viewed as threatening.

— Bruce Johnson, co-founder of Full Story

Code review reduces risk. Having someone proof your work, and also knowing someone will proof your work, helps weed out
 errors and
 heightens quality. In addition, it ensures consistency and helps every team member familiarize with more of the code base.

When done right, code review also builds a culture for collaboration and openness. Trying to understand and critique other people’s work is an excellent way to learn, and so is getting honest feedback on your work.

Always having at least two people look over the code also curtails ideas of “my” code 
and “your” code.
 It’s our code.

Considering these advantages, a review shouldn’t just be for code.

Review Principles For All Disciplines, Not Just Code

With reviews, there is always one author and one or more reviewers. That means you can involve people early on without falling into design by committee.

First, I have to mention two important factors which will affect your team’s ability to do beneficial reviews. You don’t necessarily have to have mastered them, but as a minimum, you should aspire to the following:

You and your colleagues respect each other and each other’s disciplines.
You’re sufficiently self-assured in your own role so that you feel like you can both give and receive criticism (this is also connected to the team’s psychological safety).

Even if we’re not reviewing code, there’s a lot to learn from existing best practices for code reviews.

Within our team, we try to adhere to the following principles when doing reviews:

Critique the work, 
not the author.
Be critical, but remain 
affable and curious.
Differentiate between a) Suggestions b) Requirements, c) Points that need discussion or clarification.
Move discussions from
 text to face-to-face. (Video counts)
Don’t forget to 
praise the good parts! What’s clever, creative, solid, original, funny, nice, and so on?

These principles weren’t actually written down until after we discussed why our collaboration was working so well. We all felt we were allowed to and expected to ask questions and suggest improvements already, and that our motivations were always about building something great together, and not about criticising another person.

Because we were being clear about what kind of feedback we were giving, and also remembered to praise each other’s good work, doing reviews was a positive force rather than a demotivating one.

An Example

To give you an idea of how our team uses review across disciplines and throughout a process, let’s look at how the different members of our team switched between the roles of author and reviewer when we created our sign-up flow.

Step 1: Requirements gathering

Author: Ida (UX)

Reviewers: Svein (strategy), Dag-Inge (engineering), Ingvild (engineering).

A whiteboard is showing rough sketches of a sign-up form. A man (Svein) and a woman (Ingvild) are smiling and discussing.

The team gathered around the whiteboard. Svein (CEO) to the left, Ingvild (Sr. Eng), to the right. (Large preview)

Whiteboard sessions can be exhausting if there’s no structure to them. To maintain productivity and creativity, we use the author/reviewer structure, even for something as seemingly basic as brainstorming on a whiteboard. In this case, in which we were coming up with the requirements for our sign-up flow, I got to be the author, and the rest of the team gave their feedback and acted as reviewers. Because they also knew they’d be able to review what I came up with in step 2 (plenty more opportunity for adjustments, suggestions, and improvements), we worked swiftly and were able to agree upon the requirements in under 2 hours.

Step 2: Mockup with microcopy

Author: Ida (UX)

Reviewers: Ingvild (engineering), Eivind (design), Svein (strategy).

A screenshot of a Google Doc mocking up a sign-up form with comments from team members Ingvild and Ida.

By mocking up in Google docs, it’s easy for people from all disciplines to provide feedback early on. (Large preview)

As an author, I created a mockup of the sign-up flow with microcopy. Did the sign-up flow make sense, from both the user and engineering perspective? And how could we improve the flow from a design and frontend perspective? At this stage, it was essential to work in a format in which it would be easy for all disciplines to give feedback (we opted for Google Docs, but it could also have been done with a tool like InvisionApp).

Step 3: Implementing the sign-up flow

Author: Ingvild (engineering)

Reviewer: Ida (UX) and Dag-Inge (engineering).

We had agreed upon the flow, the input fields, and the microcopy, and so it was up to Ingvild to implement it. Thanks to Surge, we can automatically create preview URLs of the changes so that people who can’t read code are able to give feedback at this stage as well.

Step 4: User testing

Author: Ida (UX)

Reviewer: The users.

Two women (Ida and a user) sitting next to eachother in front of a laptop.

Ida doing user testing on a small budget. (Large preview)

Yes, we consider user testing a form of review. We brought our newly built sign-up flow face-to-face with actual users. This step gave us a ton of insight, and the most significant changes in our sign-up flow came as a result.

Step 5: Design

Author: Eivind (design)

Reviewers: Ingvild (engineering) and Ida (UX).

A screenshot from Slack. Eivind, the designer, has posted a screenshot, and Ida replies with enthusiasm.

The first version of the sign-up flow was based on existing design components. In this stage, Eivind developed some new components to help improve the design. (Large preview)

When design suddenly shows up here in step 5, it might look a lot like a waterfall process. However, our designer Eivind had already been involved as a reviewer since step 2. He gave a bunch of useful feedback at that stage and was also able to start thinking about how we could improve the design of the sign-up flow beyond the existing modules in our design system. At this step, Eivind could also help solve some of the issues that we identified in the user testing.

Step 6: Implementation

Author: Ingvild (engineering)

Reviewer: Eivind (design), Ida (UX) and Dag-Inge (engineering).

And then we’re back to implementing.

Why review works

In summary, there’s always just one author, thus avoiding design by committee. By involving a range of disciplines as reviewers early on, we avoid having a waterfall process.

People can flag their concerns early and also start thinking about how they can contribute later on. The clearly defined roles keep the process on track.

Regular Review Walkthroughs

Taking inspiration from code walkthroughs, we also do regular review walkthroughs with different foci, guided by the following principles:

The walkthrough is done together.
One person is in charge of reviewing and documenting.
The idea is to identify issues, not necessarily to solve them.
Choose a format that gives as much context as possible, so that it’s easy to act upon the findings later (e.g. InvisionApp for visual reviews, Google Docs for text, and so on).

We’ve done review walkthroughs for things such as accessibility audits, reviewing feature requests, auditing the implementation of the design, and doing heuristic usability evaluations.

When we do our quarterly accessibility reviews, our accessibility consultant Joakim first goes through the interface and documents and prioritizes the issues he’s found in a shared Google Sheet. Joakim then walks us through the most important issues he’s identified.

Meeting face-to-face (or at least on video) to go through the issues helps create an environment for learning rather than a feeling of being supervised or micromanaged.

Three people in a sofa gathered around a laptop. They’re discussing and smiling.

Accessibility review: Joakim (right) walks Ingvild and Dag-Inge through the accessibility issues he found in his audit. (Large preview)

If you find yourself always being tied up with something that’s due for release, or fixing whatever is at the top of your inbox, reviews can help remedy that. If you set aside regular half days for reviewing work you’ve already done, you can identify issues before they become urgent. It can also help you refocus and make sure you’re priorities are keeping along the right lines. Your team should maybe not begin building that new feature before you’re confident that the existing features are living up to your standards.

User Testing Is A Form Of Review

An important motivation for code reviews is to reduce risk. By doing it every single time you introduce a change or add something new to your product, and not just when you suspect something is maybe not up to par, you diminish the chance of shipping bugs or subpar features. I believe we should look at user testing from the same perspective.

You see, if you want to reduce the risk of shipping with major usability issues, user testing has to be part of your process. Just having your UX designers review the interface isn’t enough. Several studies have found that even usability experts fail in identifying every actual usability problems. On average, 1 in 3 issues identified by experts were false alarms — they weren’t issues for users in practice. But worse, 1 in 2 issues that users did in fact have, were overlooked by the experts.

Skipping user testing is just as big a risk as skipping code review.

Does Review Mean Death To Creativity?

People working within design, user experience, and content often have educational backgrounds from art schools or maybe literature, in which the sole creator or creative artistic genius is hailed as the ideal. If you go back in history, this used to be the case for developers as well. Over time, this has changed by necessity as web development has grown more complex.

If you cling to the idea of creativity coming from somewhere deep within yourself, the idea of review might feel threatening or scary. Someone meddling in your half-finished work? Ouch. But if you think about creativity as something that can spring from many sources, including dialogue, collaboration, or any form of inspiration (whether from the outside or from someplace within you), then a review is only an asset and an opportunity.

As long as we’re building something for the web, there’s no way around collaborating with other people, be it within our own field or others. And a good idea will survive review.

Let’s create something great together.

Smashing Editorial
(rb, ra, yk, il)

97% Off: Get the Youtube Mastery Bundle for Only $41

Original Source:

Youtube is the second largest social media platform, with over a billion monthly active users. In fact, almost of one-third of internet users visit Youtube regularly. If you’re reading this blog post, chances are you have thought of creating your own Youtube channel. But with such an oversaturated platform, it can be difficult to gain […]

The post 97% Off: Get the Youtube Mastery Bundle for Only $41 appeared first on

Collective #428

Original Source:


Inspirational Website of the Week: 2018 Foosball World Cup

A fantastic table football implementation for this year’s soccer world cup. Our pick this week.

Get inspired


Our Sponsor
Need a course to broaden your skill set?

From web dev beginners courses to accelerated JavaScript training, Udemy has something for everyone. Learn basically anything and discover new skills and passions.

Pick your course



A JavaScript API for face detection and face recognition in the browser implemented on top of the Tensorflow.js core API.

Check it out


Drawing Images with CSS Gradients

An in-depth tutorial on how to use CSS gradients to draw complex shapes by Jon Kantner.

Check it out


Current state of webdesign

Will you realize what this is about in less than 3 seconds? 🙂

Check it out



The magical final WebGL project by students of GOBELINS Paris.

Play it


The Experimental Layout Lab

Jen Simmons relaunched her labs section and added some more demos that show the possibilities of CSS Grid.

Check it out


Backspace Rethought

Louis Anslow shares a brilliant idea for backspace using the drag interaction.

Read it


On Consuming (and Publishing) ES2015+ Packages

A very interesting article by Henry Zhu how the community might move to a “post-ES5” package ecosystem.

Read it


CodePen Challenge: Menu

A fun, bouncy menu created by Adam Kuhn.

Check it out


Plexus Shaders

A futuristic WebGL music visualizer made with Three.js together with Vertex Shaders and Fragment Shaders.

Check it out



A simple tool for making locally-trusted development certificates without requiring any configuration.

Check it out


How and Why We Unit Test Our Sass

Lindsey Wild shares how unit testing Sass code is done at Sparkbox.

Read it


Free Font: Kalpazan

Vladimir Fedotov shares one of the styles of his new font family “Kalpazan”.

Get it



A library that aims to make machine learning approachable for a broad audience of artists, creative coders, and students. It provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js with no other external dependencies.

Check it out



Some 3D magic by Dave DeSandro using the <canvas> drawing API.

Check it out


The Garden of Earthly Delights by Jheronimus Bosch

A beautiful, interactive documentary that provides an in-depth tour though “The Garden of Earthly Delights” painting.

Check it out


150 Free Vector Icons

A great set of beautifully designed and versatile vector icons in three different styles. By Elmira Gokoryan.

Get it



Amazing experiments in GLSL Truchet tiling and patterns by Liam Egan.

Check it out


Stationery Branding & Identity Mockup (PSD)

A modern stationery and identity branding mockup by the folks of GraphicPear.

Get it


Thank You

Liam Egan celebrates his 500 Codepen followers mark with this beautiful demo.

Check it out


From Our Blog
Triple Panel Reveal Slideshow

A fullscreen image slideshow with lateral image previews and a reveal animation using TweenMax.

Check it out

Collective #428 was written by Pedro Botelho and published on Codrops.

Using Puppeth, the Ethereum Private Network Manager

Original Source:

We’ve previously written about Geth, one of the most popular Ethereum nodes.

Download screen

When you install Geth with helper tools, it comes with a handy tool called Puppeth, which you can use to maintain and install various helper tools for managing and deploying your private blockchain. Puppeth can also be installed independently if you have Go installed, with the following command:

go get

Let’s take a look at the tool.

Note: this tutorial will require you to have two remote machines at your disposal. Whether that is a virtual machine like Homestead Improved or an actual server on your network, or a combination of the two, doesn’t matter. We’ll go through the setup procedure with VMs in this tutorial.

Note: due to a bug in Puppeth, this approach might not work if your virtual machines (see below) are too small. Either make bigger VMs (more RAM) or wait for a fix if that’s not an option.


We’ll follow this process to get two virtual machines up and running. We need two machines because we’ll be running two Ethereum nodes, each on its own IP address.

Note: This is a limitation of Puppeth, as it’s not possible to deploy a sealing node on the same machine using this tool.

If you don’t know what Vagrant is, and what tools we’re using here, we recommend you read this introduction to Vagrant, which breaks it down in a newbie-friendly way.

mkdir my_project; cd my_project
git clone hi_puppeth1
git clone hi_puppeth2

Change the IP address of the second clone by going into the hi_puppeth2 folder and modifying the IP address field to be instead of

Next, open up some ports on the VMs by modifying each clone’s Homestead.yaml’s final section, like so:

– send: 8545
to: 8545
– send: 30301
to: 30301
– send: 30302
to: 30302
– send: 30303
to: 30303
– send: 30304
to: 30304
– send: 30305
to: 30305
– send: 30306
to: 30306

Don’t forget to add these virtual hosts into your host machine’s /etc/hosts file as well. Otherwise the VMs won’t be accessible by their domain name! homestead.test puppethnode.test

Note: change the IP addresses if the addresses of your VMs differ.

Finally, run vagrant up; vagrant ssh to boot each machine and SSH into it. Remember to run this from two separate tabs so you can keep both machines open and running.


Now let’s install the prerequisite software on each machine.

Puppeth runs helper applications and Ethereum nodes for you in Docker containers, so we need Docker. It’s also useful to install Geth itself.

sudo add-apt-repository -y ppa:ethereum/ethereum
sudo apt-get update
sudo apt-get install

All other prerequisites will be pulled in by Puppeth through docker itself, but we need to make sure the current user is allowed to operate Docker commands first:

sudo usermod -a -G docker $USER

On the host machine (outside the VMs), we should create new Ethereum accounts in the folder where we’re running our project.

If you’re using the VMs as suggested above, that can be in myproject if myproject is the parent folder which contains hi_puppeth1 and hi_puppeth2.

mkdir node1 node2
geth –datadir node1 account new
geth –datadir node2 account new

Make a note of the addresses generated by this process:

$ mkdir node1 node2
$ geth –datadir node1 account new
INFO [05-20|10:27:20] Maximum peer count ETH=25 LES=0 total=25
Your new account is locked with a password. Please give a password. Do not forget this password.
Repeat passphrase:
Address: {aba88be2dc16eaed464e3991eed5a1eaa5e7b11b}
$ geth –datadir node2 account new
INFO [05-20|10:27:35] Maximum peer count ETH=25 LES=0 total=25
Your new account is locked with a password. Please give a password. Do not forget this password.
Repeat passphrase:
Address: {655a6ea9950cdf9f8a8175fda639555f17277bdf}

We need two accounts because at least two signers are needed in a Proof of Authority blockchain (more on that later).


Now that our VMs are running and our accounts are initialized, let’s see what Puppeth offers. With the remote servers/VMs still running, in a new tab on your host machine run Puppeth with puppeth.

The first thing it’ll ask for is the network name. This is useful for identifying various blockchains if you’re running several on your local machine. We’ll use “puptest” here.

Please specify a network name to administer (no spaces or hyphens, please)
> puptest

Sweet, you can set this via –network=puptest next time!

INFO [05-20|10:32:15] Administering Ethereum network name=puptest
WARN [05-20|10:32:15] No previous configurations found path=/Users/swader/.puppeth/puptest

Now let’s connect to our “remote” servers so that Puppeth has them in the list and can do operations on them.

The post Using Puppeth, the Ethereum Private Network Manager appeared first on SitePoint.

How to Plan a Website Overhaul in 2018

Original Source:

It’s 2018, and you know what that means. Time for a website overhaul! Sure, if you’ve been building, managing, and growing websites long enough, then the thought of a website or a logo redesign will probably scare you away. Overhauling a website is just one of those things that cause more headaches and ruins by adding a […]

The post How to Plan a Website Overhaul in 2018 appeared first on

Collective #427

Original Source:


This content is sponsored via Syndicate Ads
HelloSign API: Everything IT requires and Developers love

With a robust SDK, amazing support, detailed documentation, and super clean dashboard, HelloSign API is sure to make your team happy.

Try it free today



A tool for automated image editing, optimization and analysis via CLI and a web interface.

Check it out



A collection of all developer and technical videos in one place.

Check it out


Movable Mountains

Watch David Khourshid and Stephen Shaw code up a beautiful parallax scroll effect using CSS and some JavaScript.

Watch it


Rabbit Ear

Rabbit Ear is an interesting JavaScript library for designing origami. By Robby Kraft.

Check it out


Accessibility inspector

Read all about Firefox’s accessibility inspector which helps visualizing information exposed to assistive technologies on a web page, allowing you to check what’s missing or needs attention.

Read it


Animate Calligraphy with SVG

Claus Colloseus shows a great technique for animating calligraphic SVG “strokes”.

Read it


Stream UI Kit

A beautiful open source Bootstrap 4 UI kit.

Get it


GitHub Education

GitHub’s new project that aims to make it possible for schools to adopt GitHub and their education offerings. Read more about it in this article.

Check it out


Tropical Icon Set (PNG, SVG)

A fun seasonal icon set designed by Freepik for Speckyboy.

Get it



A funding platform for open-source maintainers and contributors.

Check it out


Free Font: Alpha

Callum Finn designed this interesting minimal display font.

Get it


Game boy running zelda links awakening intro

Fantastic demo made by Karl Patrik Johansson.

Check it out


Web Animations in WebKit

Read how Safari Technology Preview 59 will have Web Animations turned on by default.

Read it



Gio.js is an open source library for 3D globe data visualization built with Three.js

Check it out



A carefully crafted open source icon set with more than 350 icons.

Get it


Using Custom Fonts With SVG in an Image Tag

Thomas Yip explains how to use Nano for SVG optimization.

Read it


Simple Portfolio

A super simple way to instantly generate your portfolio website.

Check it out


Bendy Drinks Menu

A jelly scroll menu by Chris Gannon.

Check it out


Free Font: 3-D Sketch

A playful, hand-drawn display font made by Linseed Studio.

Get it

Collective #427 was written by Pedro Botelho and published on Codrops.

Performance Auditing: A Firefox Developer Tools Deep Dive

Original Source:

In this article, we’ll cover Firefox Web Developer Tools (“DevTools”) — a set of tools designed to help developers inspect, debug, profile and optimize the performance of websites and web applications. We’ll particularly look at the tools related to performance, but we’ll also see how to get started using DevTools in general, and learn about some useful settings.

You can access DevTools in different ways:

click on the hamburger menu at the right of the navigation toolbar, click on Web Developer, then choose the sub-tool you want to use
use keyboard combinations, such as Shift+F5 (Windows and macOS) for the Performance tool and Ctrl+Shift+E (Windows) or Cmd+Option+E (macOS) for the Network tool
right-click anywhere in the page a choose Inspect Element.

DevTools Settings

The Firefox DevTools have many options that help developers customize their experience, such as the option to Enable time-stamps in the Web Console, or to Disable HTTP Cache, which is used to simulate first-load performance in all pages that have DevTools open.

You can access the DevTools Settings panel in different ways:

Start by opening DevTools, next:

either click the Settings button in the toolbar
press F1 to show the Settings panel on top of any current tool
press Ctrl+Shift+O (Windows and Linux), Cmd+Shift+O (macOS) to show the Settings panel.

The Firefox DevTools settings

Here you can choose your default tools, the buttons you want to show in the toolbox, themes (dark-light-Firebug) and other advanced settings.

Performance-focused Tools

When analyzing the performance of a web application, you need to differentiate between load-time performance and run-time performance.

Load-time performance answers questions like “what resources are taking too much time to load?” When dealing with run-time performance, we need to focus on JavaScript and CSS (CSS animations in particular) so we’re able to see where the code spends most of its time and what’s causing bottlenecks.

Let’s look at the Network Monitor and the Performance Tool.

The Network Monitor

The Network Monitor

The Network Monitor shows you a tabular view of all network requests that Firefox made (for example, when it’s loading a page, or sending XMLHttpRequests, Fetch API requests etc.).

It can also display request-related HTTP headers, HTTP responses and cookies, and let you search through them. You can also use it to perform, display and save a performance analysis of the current page load.

In a nutshell, this tool can be used to determine how long the browser takes to download different assets of a web page.

You can also use this tool to monitor and single out requests that are slowing or blocking the web page’s fast loading. The Network panel shows you when principal events are fired (DOMContentLoaded and load).

Request Timeline

Each request in the network list has a timeline column which displays timing information related to the request, such as the total time taken to load the resource.

DevTools marks major life-cycle events in the report, like DOMContentLoaded, and page load. The blue refers to the time when the event DOMContentLoaded is fired; the purple line refers to the time when the page’s load event is fired.

Major life-cycle events

DOMContentLoaded vs Load Events

The DOMContentLoaded event fires right when the HTML document is completely loaded and parsed, not including CSS style sheets, images, and frames.

The event load fires when the HTML document and all associated style sheets, images and frames are completely loaded.

Request Details Panel

Once you click on a request in the requests list, you can a see right-docked details pane which has many different tabs such as headers, params, response, timings and security.

For performance, we’ll particularly look at the timing information.

Network Timings

In this pane, there are many timing metrics related to each request:

Network Timings

Blocked is the time spent in a queue waiting for a network connection.

Sending is the time taken for sending the request to the server.

Receiving is the time taken to receive the response from the server or (if it’s cached) to read it from the cache.

Waiting is the total time waited by the client before the first byte has been received. In other performance analysis tools like or Chrome’s DevTools, this is called TTFB or Time to First Byte.

There’s also DNS resolution, which is the time taken to resolve the host name of the server, and Connecting, which is the time taken to open a TCP connection.

How to analyze the load time performance

The Network Monitor integrates a performance analysis tool that can be used to analyze the load-time performance of your web page.

To start analyzing the load-time performance, you can:

click the Analyze icon in the bottom status bar
reload your page or make a network request while your Network monitor is open (actually this is going only to show tabular information about requests not do a load-time performance analysis).

Analyzing the load-time performance

The final report shows a pie chart and a corresponding table for the received resources by types: JavaScript, CSS, images and fonts etc. and a summary with the following details:

number of cached responses
total requests
transferred size
loading time

Final report

The web page is tested with an empty cache, and with a primed cache.

First load performance

Firefox’s DevTools allow you to analyze the performance of your web application in two different situations:

Without caching, which emulates the first-time visit when assets are still not cached.
With caching, which emulates the second-time visits. The browser has already cached the app’s assets, eliminating many round-trips to the server.

You can also use the Disable Cache setting to emulate the first-time load of a web page when the DevTools are open on any tab.

The post Performance Auditing: A Firefox Developer Tools Deep Dive appeared first on SitePoint.

The Best Image Compression Tools for the Web

Original Source:

It’s no real secret that the size of web pages is increasing. We’re adding more and more assets, slowing down sites, and ruining user experience.

But even though we’ve identified the problem, we still won’t take responsibility. Instead, we lean on coders to streamline their output—we ask then to drop useful libraries like jQuery, just because it saves us 80kb. Meanwhile, we’re designing layouts with 1mb images.

If we’re serious about making our sites fast (and we should be), if we’re serious about improving UX (and we should be), if we’re serious about boosting SEO (and we should be), then we need to do something about the real culprit: images.

Images are by far the biggest bloat on sites. And due to the type of images they suit, JPGs are the biggest bloat on the web.

Today we’re going to introduce 14 of the best JPG compression tools, and publish the results of our tests to find the best.

If you just want to know which of these services performs best, scroll to the bottom.

14 Top JPG Compression Tools

We’re comparing these tools for their ability to compress JPGs, because JPGs feature the most complex data, and so are most likely to contribute to site bloat. Some of these tools will also compress other file formats, like PNG.

1. Compress JPEG

Limitation: Maximum 20 files at a time
Cost: Free

Compress Jpeg is a pretty standard service that’s making its money out of advertising. There’s very little feedback as you compress images, it gives you a percentage, and when complete tells you how much it saved as a percentage, but progress isn’t obvious which can be difficult if you’re compressing a lot of images.

2. Compress Photos

Limitation: Maximum 50Mb per image
Cost: Free is another free site that supports itself with advertising. You have to be careful not to get hijacked by a dark-pattern advert. Click “Add Files” then “Start Upload”. A good range of progress bars gives you the original size of the image you’re compressing and the change in filesize.


Limitation: Maximum 10mb per image
Cost: Free

Compressor offers more options—it can handle JPG, PNG, GIF, and SVG, and features lossless or lossy compression. Compressor has a 10mb max file size limit, so it failed to compress two of our test files. The UI is nice to use, but it’s one file at a time, which makes it very slow to use for batches of files. Looking very closely at one of our files there’s a small amount of noise generated that isn’t evident in images optimized by the other tools.


Limitation: One file at a time
Cost: Free

GiftOfSpeed offers numerous tools for compressing your website, but for comparison purposes we’re only interested in the JPG compression tool. Again, this is a manual tool, meaning you’ve got to manually compress each individual image one at a time. It offers a nice option of changing the level of compression, but unless you’re experienced it’s a case of trial and error to find the best setting.


Limitation: None
Cost: Free

iLoveIMG is another free tool that’s offering more options than just image compression. You can resize, crop, or rotate images. You can also turn different formats into JPG, or convert JPGs into PNGs or GIFs. iLoveImg feels like a tool for amateurs that want to make changes to snaps from their phone.


Limitation: None
Cost: From $10 per 10,000 images

ImageRecycle is a paid tool, so we expected it to be better than the free options. (We tested using the free trial.) It was a little buggy when we tried the multiple file upload—it may be better to upload one file at a time—but you can download them together as a batch. ImageRecycle wouldn’t allow us to compress the final file as the tests exceeded their trial quota, considering how many of these tools are free, that’s unfortunate.

Limitation: Up to 20 images
Cost: Free is a free tool that’s ideal for people who want to edit images but don’t have an app like Photoshop. You can drag and drop images onto’s UI, or supply an online URL for the image you want to compress.


Limitation: Max 50mb per image, one at a time
Cost: Free

ImageSmaller is a simple script that allows you to compress JPG or PNG images. There is a maximum file upload of 50mb, and you can only upload one image at a time. ImageSmaller also supports itself with advertising, and you have to be careful not to click on a dark pattern advert when using the UI.


Limitation: Maximum 128mb per image
Cost: Free (with premium options)

JPEGMini is geared towards an Adobe Lightroom/Photoshop plugin. There’s a free online version that enables whole album uploads, which is what we tested. You have to wait for a while, and there’s no visual feedback on progress, and we found the UI confusing. One surprisingly useful feature is that JPEGMini emails you when your files are ready, so you can go do something else while it works.


Limitation: None
Cost: from $9

Kraken is one of the most professional feeling tools in this list. The free version has plenty of options, and the pro version of Kraken has even more. Every pro version of Kraken comes with 100mb of trial data, (which is what we used to test). The UI was easy to use, and well designed. It feels like a premium service.


Limitation: 20 images at a time
Cost: Free

Optimizilla is a really simple site. Just drag your photos onto the drop area, and then watch them upload. Click the download all button at the end to download a zip. Of the free options on this list, Optimizilla feels like the best user experience.


Limitation: Maximum 50 images at a time
Cost: From free

Shortpixel is geared towards its WordPress plugin that automatically compresses any images that you upload to your media library. There is a 10mb image restriction unless you create an account, once you do the restriction is lifted. The free account has a 100 image quota, and premium options are available. Unexpectedly, in our test, the image with the smallest image dimensions resulted in a larger file size than the next size up!


Limitation: Maximum 5mb per image, maximum 20 images at a time
Cost: Free

Who doesn’t love a Panda? TinyJPG has a companion TinyPNG site, which is nice to know. There is also the Go Pro option, for just $25 per year, that will upgrade you to a 25mb limit, plus you’ll get hugs from George the Panda.


Limitation: Maximum 25 images, maximum 30mb per file
Cost: Free

Toolbar is an interesting tool, because despite being free, it has a lot of options. You can specify 7 different compression methods, alter image quality, change the compression type, or resize the images. When testing, we left everything at the default but it’s good to know that you have some flexibility. Unfortunately they decided to include some weak blackhat SEO on their page.

The Results

To test out these services we used three free stock images that you can download here, here, and here. At 100% scale the images are all 2480px by 1860px.

We exported them as JPGs from Adobe Photoshop and used the export feature to create five different versions of each image: 33% scale, 50% scale, 100% scale, 200% scale, and 300% scale. This simulates saving different file sizes for responsive web designs.

When exported straight out of Photoshop, the size of the images are:

Valley – 33% (317kb), 50% (718kb), 100% (2.5mb), 200% (6.2mb), 300% (10.8mb)
Bike – 33% (412kb), 50% (905kb), 100% (2.9mb), 200% (6.9mb), 300% (12.1mb)
Beach – 33% (257kb), 50% (538kb), 100% (1.6mb), 200% (4.1mb), 300% (7.3mb)

Size Tests

The first test is how small the outputted files are. It’s important to remember that large images have lots of room for compression, but small images have less. So we’ve compared the images as percentages.

It’s also important to know that some tools allow you to be more or less aggressive with your compression. For these tests we used the default settings.

Click on the image to see the results in full.

Speed Tests

The second test is how long it takes the various services to compress the whole set of 15 images. This probably doesn’t matter if you’re squashing down one image, but it matters a lot if you’re compressing dozens, or even a whole website’s worth.

When we ran the tests, they were run consecutively, and nothing other than background processes were running at the same time. (The conditions for each test were as identical as possible, but there may have been some minor network variations.)

Click on the image to see the results in full.


The first thing that leaps out at us, is that the JPG compression in Photoshop is terrible. Every single one of the services we tested improved what Photoshop spat out. So if there’s one thing we can learn from this testing, it’s to always compress your images.

Some of the tests were failed (marked in red in the results). With one exception (when the trial account ran out of capacity) this was because some images don’t support very large files. So if you’re compressing small images only, you might find those services useful. Having said that, the results weren’t affected because none of the services that failed were category leaders in any case.

There was no real difference between paid services and free tools. Many of the free options out-performed the paid options.

Compress JPG and Optimizilla produced near-identical files, at identical sizes, and completed the task within fours seconds of each other. So these two different services appear to be the same service skinned with different frontends.

Best General Compression

The very best compression came from Shortpixel, which was consistently the best service in our tests for everything except our smallest images. Strangely, the size of the 33% image was actually larger than the 50% image—so strange that we tested this several times to be sure. Shortpixel struggles when it comes to smaller images, but where Shortpixel really struggles is speed, it took 2 minutes 35 seconds to complete the task, and only looks acceptable on the graph because Compress Photos performed so slowly and distorted the results.

Best Small File Compression

The best small JPG compression came from ImageResize, which produced the smallest 33% file for each of the images. What’s more, ImageResize was close behind ShortPixel for the other image sizes. ImageResize ran through the files in 30 seconds, just 9 seconds slower than the fastest.

Fastest Compression

The speed test is a tie between Kraken, and TinyJPG. Both services ran through all of the files in just 21 seconds. However, TinyJPG failed to compress six of our largest files. So the award for the fastest service goes to Kraken.


If you’re looking for the most aggressive compression, Shortpixel is our recommendation. If you need to compress smaller images then switch to ImageResize. And if you’re compressing lots of images, you value a premium experience, and you’re prepared to pay for the privilege, then use Kraken.

It helps to have access to a variety of services, because they all excel in one way or another. And it’s always worth running your own tests.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Should Freelancers Join a Professional Network?

Original Source:

One of the biggest concerns that freelancers have is that they can be isolated from others in similar fields. So can a professional network offer the additional resources you need to succeed?

The answer is yes if you find the right group. Here are reasons why you should join a professional network and how to find one that’s right for you.

You’ll Build Relationships

The No. 1 reason to join a professional organization is to develop personal and business relationships. This can be vitally important to freelance web designers and developers because you most often work in isolation.

A professional group can help you stay fresh in the design community as well as work with people who have different skills and strengths. You might find someone that you can refer work to when you are busy or a person that will serve as a mentor to you. Professional groups often include members from all different career levels and that have varying experience. There’s a lot to learn from each other.

Professional groups of a more general nature—not field specific—can also come with benefits. These groups are also good for cultivating relationships, but rather than staying on top of design trends and changes, you might actually develop new clients with these connections.

Get Access to Development and Training

Affiliation with a professional group often comes with perks such as free or discounted training opportunities. From live training sessions and speakers to webinars and online training, this is often a major benefit of a professional group.

Professional organizations at a local level are often part of a larger, national organization, which provides many of these opportunities to members. Many groups also include large national directories and access to discounts – from health insurance to web hosting – for members, depending on the organization. These opportunities can often make training and tools that might seem expensive more accessible and affordable (even free in some instances).

Development and training can also extend to national events. Most bigger organizations have local, regional and national gatherings. These conferences are a breeding ground for training and large-scale networking. Often the most active members of an organization at the local level have easy access to these events (and the parent organization often will help foot the bill for participants).

“Free” Promotion for Your Brand

Think of professional networking as “free” promotion for your brand or freelance design or web development business. The more people you meet and talk with about work, the more opportunities you have to generate new business.

Whenever meeting with members of a professional organization, you should always be networking. Engaging in projects with the group will also show others how well you collaborate and what you are good at. (This can result in more freelance work and referrals from group members.)

Make sure to take advantage of opportunities to show off as well. Most professional organizations have some type of honors or awards each year. Make sure to enter your work. Whether you win or not, it puts your name and projects in front of your full organization and a panel of judges. (There’s no better opportunity to show the work you do to a wide – and industry connected – audience.)

Get Involved in the Community Locally and Nationally

A linkage to a professional organization is an easy way to get involved in the design community locally and nationally. You’ve got an immediate network and connection to an established group with events, public service projects and common goals. While not all groups are part of larger organizations, many are. Look for local or affiliated chapters of organizations such as these:

AIGA, the professional organization for design
Freelancers Union
International Web Association
International Council of Design
Graphic Artists Guild
Association of Registered Graphic Designers
The HTML Writers Guild
Interaction Design Association

How to Find a Professional Group That Fits You

Finding the right professional group can take a little time.

Start by looking for organizations that are rooted in things you believe in. What is the mission of the organization? What do they support or promote and is that in line with your goals?
Then look at the meeting and event schedule. Does it work with your calendar? There’s no point in joining an organization if you know you’ll never make any of the meetings.
Attend with a friend. Do you know someone already involved with a specific group? Most organizations allow potential members to visit an event or meeting without a financial commitment; ask a friend if you can tag along.
Think about the budget. Can you afford dues or costs associated with the organization? Costs to join professional networks range from free to hundreds of dollars annually.
Look at the big picture. Does the group have ties to a bigger national organization? It’s almost like interviewing for a job; do you see the potential for personal/professional growth?

When Not to Join a Professional Group

Professional networking groups are not one size fits all. Don’t feel like you have to be a member of a group just because it relates to your field. Professional networking groups and associations only help your resume if you are active and involved. Don’t join a group if:

You don’t connect with current members. Just like workplaces, professional groups have a culture of their own. Find people who feel like part of your tribe.
You don’t believe in the mission or projects the group takes on.
The organization has a bad reputation in your community.
You don’t plan on actually participating.
You don’t get value from membership. (This can happen with the best professional groups over time and sometimes you need to “phase out” of a current role and move on to something else.)


When making a choice to join a professional networking group, look for an organization with ties or a chapter where you live. You’ll almost always get more out of an organization where you get actual face time with other members than an organization that’s all online.

While there are benefits to both kinds of groups, make sure to pick a group that you actually benefit from personally or professionally and that you want to be a part of. You should want to go to meetings and events and spend time working with other members. That’s the true test as to whether a professional networking group is right for you.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}