Monday, December 23
The Four Big Ways Jetpack Helps with Image Performance
CSS Tricks

The Four Big Ways Jetpack Helps with Image Performance

We've been working with Jetpack around here as a sponsor. It's a great match because as someone with a bunch of self-hosted WordPress sites, Jetpack is one of those no-brainer plugins for me. Jetpack can do a ton of good things for any site in a variety of very different ways. Here's one way to think about it: it brings the power of WordPress' own massive servers to you. For now, let's just focus on one angle of what Jetpack can do for you: image performance. Jetpack does a ton for you in this regard, solving some non-trivial performance upgrades. Let's take a look at what I see as the four big boosts you get from Jetpack on your images. 1) WordPress does responsive images for you OK, I cheated with the first one because you don't actually need Jetpack to benefit from this. But it's an i...
Web Tricks

Debugging JavaScript in Google Chrome and Visual Studio Code

Learning to debug is an essential skill for taking the next step as a developer. It's important to understand and leverage the vast array of tools that exist for a given languge. Unfortunately, debugging might not seem as obvious when working with JavaScript outside of a full-fledged IDE. At least not initially. Let's take a look at getting started debugging JavaScript in the Google Chrome Dev Tools as well as my favorite text editor for Web Development, Visual Studio Code. Watch on YouTube https://youtu.be/AX7uybwukkk TLDR - Debugging JavaScript in Chrome? Open the 'Sources' tab Inspect code Set breakpoints, inspect variables, etc. TLDR - Debugging JavaScript in Visual Studio Code? Download the Debugger for Chrome extension Create Debug configuration Launch Debug configuration Set breakpo...
Building a RSS Viewer With Vue: Part 2
CSS Tricks

Building a RSS Viewer With Vue: Part 2

Welcome to Part 2 of this mini-series on building a RSS viewer with Vue. In the last post, I walked through how I built my demo using Vue.js and Vuetify on the front end and Webtask on the back end. When I built that initial version, I knew it was exactly thatmdash;an "initial" version. I took some time to work on a few updates, and while I won't dare call this a "perfect" version, I do think I've made some improvements and I'd like to share them with you. Article Series: Setup and first iteration Refinements and final version (This Post) Before I get started, here are links to the completed demo and source code. View Demo View Code Feel free to fork, file PRs, and report bugs to your heart's content! The Plan When I shared the initial version in Part 1, I outlined some ideas to imp...
How To Speed Up The Wireframing Process With Photoshop And Adobe XD
Web Tricks

How To Speed Up The Wireframing Process With Photoshop And Adobe XD

How To Speed Up The Wireframing Process With Photoshop And Adobe XDHow To Speed Up The Wireframing Process With Photoshop And Adobe XD Manuela Langella 2018-06-19T15:45:38+02:00 2018-06-19T14:36:53+00:00 Before starting any design project, there is one word that is sure follow you from the very beginning: wireframing. Today, we will learn how to create a wireframe in Adobe XD and how to implement some graphics from Photoshop just by using libraries. But first, what exactly is a wireframe? A wireframe is a visual representation of your project’s structure. It defines the bones, the elements that will work in your layout, and the placement of the content for yo...
Website Pop-Ups: The Good, the Bad, and 18 Rules You Should Never Break
Web Tricks

Website Pop-Ups: The Good, the Bad, and 18 Rules You Should Never Break

A website is a place where a business can educate its audience about its brand. What it does. Why it does it. What they’ll get out of being there. That, in and of itself, is a lot of information. When designing a website for your clients, the last thing you want is to overdo it. The web is not a place for excess and its users typically don’t have the patience to sift through pages and pages stuffed full of information just to get to the relevant bits. That’s why minimalism will endure as a design trend. It allows web designers to convey a lot about a brand and its message, without having to spell it all out on the page. It gives brands a cleaner, more buttoned-up look while also clearing a path to conversion for visitors. But just because you design with simplicity and minimalism in mind,...
Building an Image Gallery Blog with Symfony Flex: the Setup
PHP

Building an Image Gallery Blog with Symfony Flex: the Setup

This post begins our journey into Performance Month's zero-to-hero project. In this part, we'll set our project up so we can fine tune it throughout the next few posts, and bring it to a speedy perfection. Now and then you have to create a new project repository, run that git init command locally and kick off a new awesome project. I have to admit I like the feeling of starting something new; it's like going on an adventure! Lao Tzu said: The journey of a thousand miles begins with one step We can think about the project setup as the very first step of our thousand miles (users!) journey. We aren't sure where exactly we are going to end up, but it will be fun! We also should keep in mind the advice from prof. Donald Knuth: Premature optimization is the root of all evil (or at least most...
CSS Tricks

Here’s the thing about “unused CSS” tools

There are a lot of tools that aim to help you remove "unused CSS" from your project. Never a week goes by that I don't see a tool for this being shared or promoted. It must strike some kind of perfect chord for some developers. I care about performance, and I know that reducing file sizes is good for performance. Indeed, it is. I bet we have CSS that is unused in our stylesheets, if we removed that, that's a performance win. Yep, it would be. We should automate that. Ehhhhhh, I'm not so sure. There are major performance tooling players that play up this idea, like Lighthouse and how it gives you CSS and JS "Coverage", which will surely tell you that you're shipping code you don't need to be. The tools that claim to help you with unused CSS have to perform analysis to be able to tell you w...
Building a RSS Viewer With Vue: Part 1
CSS Tricks

Building a RSS Viewer With Vue: Part 1

As I explore, learn, and most importantly, play with Vue.js, I've been building different types of apps as a way to get practice with and improve my use of it. A few weeks ago, I was reading about the shut down of Digg's RSS Reader and while great alternatives exist, I thought it would be fun to build my own with Vue. In this article, I'm going to explain how I put it together and also what's wrong with it. I knew getting into this that I was going to make some compromises, so the plan is to follow up this version with a nicer one in a follow-up post. Article Series: Setup and first iteration (This Post) Refinements and final version (Coming Soon!) Let's start by looking at the app and explaining the various components. View DemoView Code A Look at the App When opening the applicatio...
BEM For Beginners: Why You Need BEM
Web Tricks

BEM For Beginners: Why You Need BEM

BEM For Beginners: Why You Need BEMBEM For Beginners: Why You Need BEM Inna Belaya 2018-06-18T14:00:51+02:00 2018-06-18T15:50:05+00:00 BEM makes your code scalable and reusable, thus increasing productivity and facilitating teamwork. Even if you are the only member of the team, BEM can be useful for you. Nevertheless, many developers believe that such a system approach like BEM puts additional boundaries on their project and makes your project overloaded, cumbersome, and slow. We’ll be collecting all of the main aspects of BEM in a condensed form. This article helps you understand the basic ideas of BEM in just 20 minutes, and to reject prejudices that the sys...
What’s New for Designers, June 2018
Web Tricks

What’s New for Designers, June 2018

No summertime blues here. With so many new tools, the dog days of summer will be filled with playing with new elements and expanding your design portfolio. If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered! Cool Backgrounds Cool Backgrounds is a pretty nifty tool to help you create a trendy background element with color and gradients and shapes. You can create images for blogs, social media and full website designs as well as desktop wallpapers. The options are beautiful without any changes but you can also create customizations in the still, and animated, background options. Just make what you like in-browser and downlo...
Popular Design News of the Week: June 11, 2018 – June 17, 2018
Web Tricks

Popular Design News of the Week: June 11, 2018 – June 17, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news. 3 Super Useful Color Tools for UI Design   How to Make Trustworthy Apps, When no One Trusts Tech Anymore   250 Essential Icons   The New Design Tools on the Block   Design Trend: Sl...
4 Ways to Improve Your Site’s Content
Web Tricks

4 Ways to Improve Your Site’s Content

“Why isn’t my site ranking in searches? Why has traffic not improved since we hired you? Calls from customers are actually down… do you even know what you’re doing?!” Ah…the music of irate customers, whose site you have lovingly designed and crafted only to see it filled with insipid writing so bad and error strewn, that it is actually putting customers off the company. The Internet is still littered with examples of slick-looking sites filled with terrible copy. These sites will never generate decent results, and more often than not the owners will hold the web designer responsible. Explaining this to them diplomatically is hard enough. But what you really need to do is turn the situation around so that you have another high-performing site to your name, and another happy customer’s test...
Creating your own meme generator
CSS Tricks

Creating your own meme generator

Almost every time a new meme pops up in my Twitter feed, I think of a witty version to create. I'm not alone in this. Memes are often a way to acknowledge a shared experience or idea. In a variation of the "Is this a pigeon" meme that has been making the rounds online, a designer Daryl Ginn joked about the elementary nature of most applications that say they use artificial intelligence. pic.twitter.com/nAHki0YFyV — Daryl Ginn (@darylginn) May 16, 2018 Several people replied to his tweet saying something along the lines of "replace this with this." Daryl's version got them thinking about other possible variations. Platforms like imgFlip exist to make meme generations fast and easy. However, there is only so much customization they can allow. For many memes, creating new versions can only...
6 Bedrooms Inspired by Tech Giants
Web Tricks

6 Bedrooms Inspired by Tech Giants

Consumers and designers alike look to giants of any industry for inspiration. Often times, the inspiration has to do with the specific product the company develops. In the tech world, there a quite a few giants that inspire us everyday with their new and groundbreaking gadgets. However, you can draw inspiration from these tech giants in the way you organize your bedroom. Here are six rooms comparemymove.com created inspired by the top tech giants. 1. Facebook This Facebook inspired room looks like the ideal college dorm. It has hints of the Facebook theme colors, but they’re not overwhelming. On the wall in the back, it looks like the owner has had guests write on it, just like you would do on someone’s Facebook wall online. 2. Google Perhaps the most well known name in the tech world, G...
Monthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push Notifications
Web Tricks

Monthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push Notifications

Monthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push NotificationsMonthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push Notifications Anselm Hannemann 2018-06-15T12:32:58+02:00 2018-06-15T13:49:35+00:00 We see complexity in every corner of a web project these days. We’ve read quite a bunch of articles about how complex a specific technology has become, and we discuss this over and over again. Coming from a time where we uploaded websites via FTP and had no git or anything comparable, now living in a time where we have a build system, transpilers, frameworks, tests, and a CI even for the smallest projects, this is eas...