Thursday, March 28
7 Elements of Good UX in 2018
Web Tricks

7 Elements of Good UX in 2018

UX is a crucial component of modern web design, and users’ expectations are constantly shifting. Though we cannot see into the future, changes made throughout the last decade indicate that adjusting for user needs has never been more crucial. To get ahead in the ever-changing mobile app sphere, designers have to be proactive at all times. Let the following 7 UX trends be your guide to help prep for both the present and the future of UX design: 1. Journey Simplification Users typically engage with websites or applications with a specific intention in mind, which they want to achieve as soon as possible. The most user-friendly applications and websites strive to simplify a user’s journey with time-saving designs. The essence of such designs is that they reduce the number of steps users have...
Web Tricks

Create a Typing Speed Effect with VueJS – Part 2: Timer and Score Board

Introduction In Part 1 - Create a Typing Speed Effect with VueJS We saw how to create a Typing Speed Effect. We are going to extend what we built previously, and include a timer and a score board, so that users can type and see the times they typed in faster. In order to follow along, you must have read through part 1. Logic Since we already have the typing effect covered, we need to do the following. There should be a 60 second timer that will count down whenever a user is typing. When the time reaches 0 (Zero), the typing area should be blured, and the typing speed calculated. The metrics for calculating the typing speed for a user is Number of correct words typed in a minute + typos. We will also give the user the number of typos they made as a single number. We will then list the leadi...
Solved with CSS! Logical Styling Based on the Number of Given Elements
CSS Tricks

Solved with CSS! Logical Styling Based on the Number of Given Elements

Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical styling? Well you can! You don’t have to set all of your logic-based styling rules in JavaScript, or even have to use JavaScript to set classes you are styling against. In many cases, CSS can handle that itself. I’m still discovering new CSS tricks everyday, and it just makes me love it even more.   This year, I started working at Bustle Digital Group. In media, as with a lot of products, the engineering team builds a platform that should support all use cases. Our CMS provides capabilities for authors and editors to create articles as well as curate pages, and control ad injection. Unlike working with a static site, the engineering team doesn’t have full contr...
Web Tricks

Introducing Laravel Nova

Laracon is here again. For those of you that don't know, Laracon is the event where that happens every 6 months where we get a look at the latest and greatest in Laravel. We'll write an article on the latest features in Laravel once we've compiled them. But, for now, let's talk about Nova. Laravel's Nova is a beautifully designed administration panel designed by the team behind Laravel. Nova is a single-page application built on the Vue.js ecosystem and Tailwind. Not only does it look cool, it's also highly customizable in a true Laravel fashion. Nova is not yet out for public consumption, and it's a paid product, but if a highly customizable dashboard is what you need, you can signup and get alerted when it goes live next month. Calling it an admin dashboard doesn't do it justice. I de...
PHP, Web Tricks

WordPress Notifications Made Easy

WordPress doesn’t offer any kind of notification system. All you can use is the wp_mail() function, but all of the settings have to be hardcoded, or else you have to create a separate settings screen to allow the user tweak the options. It takes many hours to write a system that is reliable, configurable and easy to use. But not anymore. I’ll show you how to create your own notification system within minutes with the free Notification plugin. By notification, I mean any kind of notification. Most of the time, it will be email, but with the plugin we’ll be using, you can also send webhooks and other kinds of notifications. While creating a project for one of my clients, I encountered this problem I’ve described. The requirement was to have multiple custom email alerts with configurable c...
5 Ways to Lower Your Site’s Barrier to Entry
Web Tricks

5 Ways to Lower Your Site’s Barrier to Entry

The internet, like most activities on the planet, has a barrier to entry. You need at least one brain—conscious and functioning at a level high enough to tap or click on stuff—and a working Internet-enabled device. You need access, in one form or another, to an Internet service provider. And that’s really about it. In an ideal world, that’s all you need. People without functioning eyeballs can use screen readers. People without hands have other input devices for their computers. People with crappy computers have… access to an ever-shrinking percentage of websites. Wait… what? Here’s the thing, each individual website, depending on how it’s built, can either increase its barrier to entry, or keep it at a bare minimum. Every time you implement a feature or technology that not every...
Web Tricks

My Top 8 Visual Studio Code Tips and Features

Visual Studio Code has become one of the most used and loved Text Editors in recent years. Here are some statistics from the 2018 Stackoverflow Survey:- Most Popular Development Environments. Source: https://insights.stackoverflow.com/survey/2018/ 1. Visual Studio Code CLI Visual Studio Code comes with an inbuilt Command Line Interface. Once you've installed Visual Studio Code, and have it open, press ⇧⌘P to open the command palette for Mac, or just ⌘P and the press > button. Next, type in shell command, select Install Code Command in PATH, and press enter. Now if you type in code, Visual Studio Code will open, and code <path>, Visual Studio Code will open with the directory represented by Path. To see the command line interface however, type in code -h. code -h Visual Studio Co...
Web Tricks

Managing User Permissions in Vue using CASL

There is one thing we can all agree on, no matter what language or platform we prefer for building applications — there has to be some form of control and access levels in our applications to ensure it runs smoothly. This is why the concept of user permission will quickly become commonplace for you once you build your first application. In server-side languages, user permissions can be done with little or no fuss. You can use sessions to hold a user’s information and there would be over a hundred libraries begging for the opportunity to help you manage what the user sees and when the user sees it. You can manage complex permission logic with the aid of a robust database. For JavaScript, this becomes a little tricky, given that all you may have to achieve this localStorage. In this tutorial...
Build a state management system with vanilla JavaScript
CSS Tricks

Build a state management system with vanilla JavaScript

Managing state is not a new thing in software, but it’s still relatively new for building software in JavaScript. Traditionally, we’d keep state within the DOM itself or even assign it to a global object in the window. Now though, we’re spoiled with choices for libraries and frameworks to help us with this. Libraries like Redux, MobX and Vuex make managing cross-component state almost trivial. This is great for an application’s resilience and it works really well with a state-first, reactive framework such as React or Vue. How do these libraries work though? What would it take to write one ourselves? Turns out, it’s pretty straightforward and there’s an opportunity to learn some really common patterns and also learn about some useful modern APIs that are available to us.   Be...
Apps, Web Tricks

How To Improve Test Coverage For Your Android App Using Mockito And Espresso

In app development, a variety of use cases and interactions come up as one iterates the code. The app might need to fetch data from a server, interact with the device’s sensors, access local storage or render complex user interfaces. The important thing to consider while writing tests is the units of responsibility that emerge as you design the new feature. The unit test should cover all possible interactions with the unit, including standard interactions and exceptional scenarios. In this article, we will cover the fundamentals of testing and frameworks such as Mockito and Espresso, which developers can use to write unit tests. I will also briefly discuss how to write testable code. I’ll also explain how to get started with local and instrumented tests in Android. Fundamentals Of T...
CSS Tricks, Web Tricks

Did you know that style and script tags can be set to display: block?

The other night, Amit Patel mentioned that you can set script tags in HTML to display: block with CSS and then edit that code inline with the contentEditable attribute. This means that you can then see it all update live in the browser as you type. Shortly after, Marius Gundersen replied that you can do this with the style tag as well.   All of this is such a weird concept to me that I just had to make a demo to see if it worked: <p data-height="550" data-theme-id="1" data-slug-hash="46b115ccbe34d51e2bf1ebfda04438de" data-default-tab="result" data-user="robinrendle" data-embed-version="2" data-pen-title="contentEditable tags" class="codepen">See the Pen contentEditable <style&rt; tags by Robin Rendle (@robinrendle) on CodePen. And it does, as strange as tha...
Web Tricks

Create Web Notifications Using Laravel and Pusher Channels

When building web applications, it is not uncommon to find some sort of in-app notification system that will notify you instantly when someone carries out an action related to you or your account. On Facebook, you will be notified when someone likes your status, or when someone comments on your profile. We will replicate this feature by creating a web notifications system using Laravel and Pusher. To follow this tutorial, you need to have PHP and Laravel installed on your machine. What we would be building After this tutorial we would demonstrate how we can have a small web application show notifications using Laravel and Pusher. It would be similar to how websites like Facebook show notifications. Here is a preview of what we would be building: Setting up your Pusher application Create...
Finite State Machines with React
CSS Tricks, Web Tricks

Finite State Machines with React

As JavaScript applications on the web have grown more complex, so too has the complexity of dealing with state in those applications — state being the aggregate of all the data that an application needs to perform its function. Over the last several years, there has been a ton of great innovation in the realm of state management through tools like Redux, MobX, and Vuex. Something that hasn’t gotten quite as much attention, though, is state design. What in the heck do I mean by state design?   Let’s set the scene a little bit. In the past, when building an application that needs to fetch some data from a backend service and display it to the user, I’ve designed my state to use boolean flags for various things like isLoading, isSuccess, isError, and so on down the line. As this...
8 Secrets of the Perfect Link
CSS Tricks, Web Tricks

8 Secrets of the Perfect Link

A few weeks ago a frustrated face appeared around the corner of my desk. “Sorry mate, you don’t do any printing do you?” “Well yeah, sometimes,” I said. I have a dedicated desk in a co-working space, we share a printer, and it was this shared printer that was frustrating the face in question: “I’ve been trying for hours to get this bloody thing printed, I’m absolutely desperate, I can’t find the right driver anywhere…” “I think you just log into the dashboard and download it,” I said. “I think that’s what I did, hold on let me try,” I said, firing up the office dashboard. “You go to printer instructions…” “Yep, I did that.” “…and then you click…” “Oh God!” he wailed. “It’s a link isn’t it.” Here are the instructions that he’d been struggling with: An intelligen...
Converting Images To WebP
CSS Tricks, Web Tricks

Converting Images To WebP

To use WebP, you’ll first need to convert your existing images to the format. This can be done in a myriad of ways, from something as simple as exporting from your preferred design program, to cloud services, to the official cwebp encoder, and even in Node.js-based build systems. Here, we’ll cover all avenues. Sketch Sketch is able to export any resource in a design document to WebP natively. To export an image to WebP, select a resource on the canvas, open the Export panel on the right hand side, and choose “WEBP” in the format dropdown. The resource export panel in Sketch, with the WebP format chosen in the format dropdown. (Large preview) After you make your selection, click the Export Bitmap… button. The resulting dialog will predictably ask where you want the image to be exported ...