Menu Search
Jump to the content X
X

Quick Tips Design Mock-Ups Need Dynamic Content: Tools and Plugins

Nothing is perfect on the web. We can't make sure that our websites always work as intended, but we can try our best to design resilient and flexible websites that aren't that easy to break — both in terms of interface design and security. Yet neither resilience nor flexibility are usually reflected in our deliverables and mock-ups.

In practice, mock-ups usually represent a perfect experience in a perfect context with perfect data which doesn't really exist. A good example for it are “optimal" usernames which are perfectly short, fit on a single line on mobile and wrap nicely, or perfect photography that allows for perfectly legible text overlays. It's not realistic. We need to work with dynamic content in our prototypes, with both average and extremes being represented.

Read more...

Web Development Reading List #123: Meaningful Git Commits and HTTP Status Codes

This week I mostly spent time on fixing bugs, improving a deployment workflow and on getting another new front-end project structured. One major takeaway from this was that it’s good to have a proper deployment workflow in place already in the early stages of a project.

Writing JavaScript modules

To document appropriately in git what has been done in a commit instead of sleazily writing “changed [XY] because of [some arbitrary reason]”. By doing so, it becomes easier for myself, or someone else, to identify bugs at a later stage.

Read more...
Advertisement Advertise with us!

JavaScript AI For An HTML Sliding Tiles Puzzle

Sam Loyd (1841–1911), American chess player and puzzle maker, created the sliding tiles puzzle in the 1870s. The puzzle is represented by an m×n grid, where m is number of columns and n is number of rows, and each cell can be any imaginable value (number, letter, image, and so on.)

JavaScript AI For An HTML Sliding Tiles Puzzle

The purpose of the puzzle is to rearrange the initial configuration of the tiles to match another configuration known as the goal configuration. The rearrangement task is achieved by swapping the empty tile with some other tile in all possible directions (up, down, left, and right).

Read more...

Quick Tips Breaking It Down To The Bits: How The Internet, DNS, And HTTPS Work

Smashing Magazine is known for lengthy, comprehensive articles. But what about something different for a change? What about shorter, concise pieces with useful tips that you could easily read over a short coffee break? As an experiment, this is one of the shorter "Quick Tips"-kind-of articles — shorter posts prepared and edited by our editorial team. What do you think? Let us know in the comments! —Ed.

If we want to build high performance applications, we have to understand how the individual bits are delivered.

The Internet is the foundation of our craft. But what do we actually know about its underlying technology? How do DNS, networks and HTTPS work? What happens in the browser when we type a URL in the address bar?

Read more...

Pen Tool Vs. Live Trace: The Big Comparison

In this tutorial, I will teach you how to work digitally on an image you draw by hand. You will learn two completely different ways to approach the image: through the Live Trace Tool and the Pen Tool. Two ways, two results. Learn how to take the best from both.

Pen Tool Vs. Live Trace: The Big Comparison

Along the way, I will give you some Photoshop tips, too. The first thing you’ll need to know is how to manage your drawing in Photoshop and which are the best ways to prepare it for Illustrator. If you are not comfortable drawing in Photoshop, don’t worry! You can download my drawing in high-resolution, skip the Photoshop step and go straight to step 2 to begin with Illustrator.

Read more...

Writing Next Generation Reusable JavaScript Modules in ECMAScript 6

Are you excited to take advantage of new JavaScript language features but not sure where to start, or how? You're not alone! I've spent the better part of the last year and a half trying to ease this pain. During that time there have been some amazing quantum leaps in JavaScript tooling.

Writing Next Generation Reusable JavaScript Modules

These leaps have made it possible for you and me to dive head first into writing fully ES6 modules, without compromising on the essentials like testing, linting and (most importantly) the ability for others to easily consume what we write.

Read more...

Making A Service Worker: A Case Study

There’s no shortage of boosterism or excitement about the fledgling service worker API, now shipping in some popular browsers. There are cookbooks and blog posts, code snippets and tools. But I find that when I want to learn a new web concept thoroughly, rolling up my proverbial sleeves, diving in and building something from scratch is often ideal.

Making A Service Worker: A Case Study

The bumps and bruises, gotchas and bugs I ran into this time have benefits: Now I understand service workers a lot better, and with any luck I can help you avoid some of the headaches I encountered when working with the new API.

Read more...

Desktop Wallpaper Calendars: February 2016

Since seven years, we welcome the new month with a collection of unique desktop wallpapers. And it’s not any different this time around. Created by designers and artists from across the globe, they are just waiting to give your desktop a makeover and provide you with some fresh inspiration.

Desktop Wallpaper Calendars: February 2016

This post features their artwork for February 2016. Each wallpaper comes in two versions, with and without a calendar, and can be downloaded for free. Now you only need to decide which one will accompany you through the month — and that won’t be easy given all the creative ideas the community has come up with. A big thank-you to everyone who participated!

Read more...

Web Development Reading List #122: A Performance Budget Builder, Streams, And The Web Push API

This week, Firefox 44 has been released to the public. The new version offers better video support (VP9, WebM in addition to h.264) and adds support for Brotli compression (a new, better compression than gzip) for HTTPS connections. Service Workers are also supported now.

Streams

The new Chrome Beta channel build now includes a security panel in the developer tools. This panel shows you how secure your site is, including details on HTTPS and mixed content warnings. Unfortunately, it’s not super detailed yet, and it also doesn’t provide information like HSTS, HKPK and other security details, but I’m excited to see this and bet that they’ll integrate more features over time.

Read more...

Freebie: The Months Of The Year Icon Set (12 Icons PSD, AI, EPS, SVG, PNG)

New Years' Eve is not far past, and yet one twelfth of the new year is already behind us. We think this is a great time to release the first new free icon set of the year. So without further ado, today we're pleased to release the Months Of The Year icons: a set of 12 images that are all available in EPS, AI, SVG and PNG formats. This icon set was designed by Manuela Langella and is free to be used in personal as well as commercial projects.

You may modify the size, color or shape of the icons. No attribution is required, though reselling bundles or individual pictograms isn't cool. Please note that this icon set is available under a Creative Commons Attribution 3.0 Unported license. We'd kindly like to ask you to provide credits to the creator and link to this article if you would like to spread the word about the freebie.

Read more...

↑ Back to top