Smashing Magazine

For Professional Web Designers and Developers
  1. Automatically Art-Directed Responsive Images? Here You Go.

      

    In many projects, responsive images aren’t a technical issue but a strategic concern. Delivering different images to different screens is technically possible with srcset and sizes and <picture> element and Picturefill (or a similar) polyfill; but all of those variants of images have to be created, adjusted and baked into the logic of the existing CMS. And that's not easy.

    On top of that, responsive images markup has to be generated and added into HTML as well, and if a new image variant comes into play at some point (e.g. a file format like WebP or a large landscape/portrait variant), the markup has to be updated. The amount of extra work required often causes trouble — so if you have a perfect product shot, you need to either manually create variants for mobile and portrait and landscape and larger views, or build plugins and extensions to somehow automate the process.

    The post Automatically Art-Directed Responsive Images? Here You Go. appeared first on Smashing Magazine.

  2. 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.

    The post Design Mock-Ups Need Dynamic Content: Tools and Plugins appeared first on Smashing Magazine.

  3. 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.

    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.

    The post Web Development Reading List #123: Meaningful Git Commits and HTTP Status Codes appeared first on Smashing Magazine.

  4. 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.)

    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).

    The post JavaScript AI For An HTML Sliding Tiles Puzzle appeared first on Smashing Magazine.

  5. 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.

    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?

    The post Breaking It Down To The Bits: How The Internet, DNS, And HTTPS Work appeared first on Smashing Magazine.