Thursday, March 28

Web Tricks

7 UX Principles for Creating a Great Website
Web Tricks

7 UX Principles for Creating a Great Website

  We spend a lot of time online reading news, navigating websites and using web apps. In some cases, our experience online is not the best that we could have. And all this is due to poor design that didn’t take user experience into consideration. It’s easy to look from afar and notice these errors, but it’s a bit trickier when you are the one handling a project. As designers, it’s our duty to create design with great user experience. And it isn’t easy. Here are some best practices for UX for web projects. 1. Design Should Concentrate on User Experience Making the experience of the website memorable is more important than what the website says. Users often forget the data and salient points of content, but they will remember how it made them feel. It works in advertisement...
Web Tricks

Lazy Load Animal Memes with Intersection Observer

  Last week we on the code challenge #7 we delved into lazy loading images for increased performance of web pages. Yet to take the challenge? You can do so here before looking through the spoiler below. Once completed, you can post your entry in the comment section of the post, post it on twitter and use the hashtag #ScotchChallenge so we can see it, or post it in the #codechallenge channel of the Scotch Slack. The Challenge When developing websites and web pages, every byte counts and in a bit to reduce the page size and load time several techniques have been implemented to achieve this. Lazy loading is one such technique. Here, a much lower quality of an image is rendered on page load thereby reducing the overall size of the page and increasing load speed. However, when the pa...
Web Tricks

Capture and Report JavaScript Errors with window.onerror

  onerror is a special browser event that fires whenever an uncaught JavaScript error has been thrown. It's one of the easiest ways to log client-side errors and report them to your servers. It's also one of the major mechanisms by which Sentry's client JavaScript integration (raven-js) works. You listen to the onerror event by assigning a function to window.onerror: window.onerror = function(msg, url, lineNo, columnNo, error) { // ... handle error ... return false; } When an error is thrown, the following arguments are passed to the function: msg – The message associated with the error, e.g. "Uncaught ReferenceError: foo is not defined" url – The URL of the script or document associated with the error, e.g. "/dist/app.js" lineNo – The line number (if available...
How To Deliver A Successful UX Project In The Healthcare Sector
Web Tricks

How To Deliver A Successful UX Project In The Healthcare Sector

  A mid-career UX researcher was hired to understand the everyday needs, perceptions, and concerns of patients in a hospital in Berlin, Germany. She used rigorous observation and interviewing methods just like she teaches them to design thinking students at a nearby university. She returned with a handful of actionable insights that our product team found useful, somewhat at least. However, we were surprised that her recommendations gravitated towards convenience issues such as “Patients want to know the food menu” or “Users struggle to remember who their doctors are.” Entirely missing were reports of physical and psychological complaints. We would at least have expected sleeping problems: Given that 80% of working Germans don’t sleep well and nearly 10% even appear to have severe...
Gigs Going Global? What Freelancers Need to Know About Classification
Tech News, Web Tricks

Gigs Going Global? What Freelancers Need to Know About Classification

  Freelancers go by many names these days. They can be “non-traditional workers” in Canada or “autónomo” in Spain. They can be “self-employed” and “independent contractors” in the US and UK. But, statistically, the trend is consistent. Freelancers now make up 30 percent of the world’s workforce, and the number is projected to grow to 50 percent by 2020. This nuclear growth has been fanned primarily by technology, as an entire generation of digital natives joins the workforce. This has changed the way we work and what we value, transcending many restraints of the physical world. But the very catalyst of employment mobility is also becoming the root of many unforeseen consequences, in the form of employee misclassification lawsuits playing out in courts across the globe. So whet...
Getting Started With CSS Layout
CSS Tricks, Web Tricks

Getting Started With CSS Layout

  Over the past couple of years, CSS Layout has dramatically changed as well as the way we develop the front end of our sites. We now have a real choice in terms of the layout methods we use in CSS to develop our sites, which means we often need to make a choice as to which approach to take. In this article, I will run through the various layout methods that you have available to you by explaining the basics of how they are used and what they are used for. This guide is for you if you are fairly new to CSS and wondering what the best way to approach layout is, but also if you are an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date. I have not tried to fully document each layout method here, as that would have...
Web Tricks

Build Native Modals Using the Dialog Element

With release of HTML 5.2 comes the dialog element. The dialog element has been around for a while now but was an experimental technology. Previously, if we wanted to build a modal or a dialog box of any sort, we needed to arrange our markup in a way where we have a backdrop, a close button, keep events trapped within the dialog, find a way to pass message out of the dialog... It was really complicated. The dialog element solves all the problems above and more. Heads up: I'm going to interchange between modal and dialog a lot. Quick comparison between bootstrap modal and the new dialog element <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <d...
Web Tricks

Lessons Learned While Developing WordPress Plugins

Lessons Learned While Developing WordPress PluginsLessons Learned While Developing WordPress Plugins Jakub Mikita 2018-05-24T13:30:28+02:00 2018-06-05T08:35:40+00:00 Every WordPress plugin developer struggles with tough problems and code that’s difficult to maintain. We spend late nights supporting our users and tear out our hair when an upgrade breaks our plugin. Let me show you how to make it easier. In this article, I’ll share my five years of experience developing WordPress plugins. The first plugin I wrote was a simple marketing plugin. It displayed a call to action (CTA) button with Google’s search phrase. Since then, I’ve written another 11 free plugins...
Web Tricks

Realtime Exchange Rates With Currencylayer

Ever wanted an accurate and reliable currency data that can be easily integrated into your business; be it CRM, ERP, accounting applications etc., built in any programming languages? Then say hello to currencylayer. In this article, I will show you how to use two of currencylayer’s services: live exchange rates and historical exchange rates. What is currencylayer? Currencylayer provides a reliable exchange rates and currency conversion for your business. It does these by providing an easy to integrate REST API with real-time and historical exchange rates for 168 world currencies and precious metals, delivered in universally usable and easily parseable JSON format, and compatible with any application. The universal real-time exchange rate data solution In addition to providing update to d...
Web Tricks

Creating The Feature Queries Manager DevTools Extension

Creating The Feature Queries Manager DevTools ExtensionCreating The Feature Queries Manager DevTools Extension Ire Aderinokun 2018-05-23T12:00:00+02:00 2018-06-05T08:35:40+00:00 Within the past couple of years, several game-changing CSS features have been rolled out to the major browsers. CSS Grid Layout, for example, went from 0 to 80% global support within the span of a few months, making it an incredibly useful and reliable tool in our arsenal. Even though the current support for a feature like CSS Grid Layout is relatively great, not all recent or current browsers support it. This means it’s very likely that you and I will currently be developing for a brow...
How To Reduce The Need To Hand-Code Theme Parts In Your WordPress Website
Web Tricks

How To Reduce The Need To Hand-Code Theme Parts In Your WordPress Website

How To Reduce The Need To Hand-Code Theme Parts In Your WordPress WebsiteHow To Reduce The Need To Hand-Code Theme Parts In Your WordPress Website Nick Babich 2018-05-22T11:45:05+02:00 2018-06-05T08:35:40+00:00 (This is a sponsored article.) Good design leads to sales and conversions on your website, but crafting great design is no easy task. It takes a lot of time and effort to achieve excellent results. Design is a constantly evolving discipline. Product teams iterate on design to deliver the best possible experience to their users. A lot of things might change during each iteration. Designers will introduce changes, and developers will dive into the code to...
Web Tricks

Introduction To Koa – The Future of Express

Express is one of the most popular Node.js frameworks out there. With about about 4+ million weekly downloads, Express has clearly made its mark in the world of Node.js and JavaScript. Koa is a newly popular web framework created by the team behind Express. It aims to be a modern and more minimalist version of Express. Some of its popular characteristics are its support and reliance on new JavaScript features such as generators and async/await. Koa also does not ship with any middleware though it can easily be extended using custom and existing plugins. In this article, we will examine the Koa framework and build a simple app to get familiar with its functionality and philosophy. Requirements To follow along with this tutorial, you would need the following installed: Node.js and NPM You al...
Building Diverse Design Teams To Drive Innovation
Web Tricks

Building Diverse Design Teams To Drive Innovation

Building Diverse Design Teams To Drive InnovationBuilding Diverse Design Teams To Drive Innovation Riri Nagao 2018-05-21T12:00:18+02:00 2018-06-05T08:35:40+00:00 There has been a surge of conversations about the tech industry lacking diversity. Companies are therefore encountering barriers in innovation. The current state of technology faces inequality and privilege, a consequence of having limited voices represented in the design and product development process. In addition, we live in a challenged political and socio-economic state where it’s easier to be divided than come together despite differences. Design’s role in companies is becoming less about visual...
Web Tricks

Get to Know React's New Context API

In a world where there are lots of different front-end frameworks, it's always hard to know which one to pick. Do I want to use the ever popular Angular? Or would diving into VueJS be beneficial to my scope of knowledge? Then we have ReactJS, a framework created by Facebook that seems to be taking the front-end framework world by storm. Using components, a virtual DOM, and JSX (that's for a different day!), React seems to cover it all, making it a powerful framework. The new Context API was recently introduced in React 16.3 as: A way to pass data through the component tree without having to pass props down manually at every level Sounds great! Let's dig in. Props and State In React, you have props and state. Two very important things to understand. Props, short for properties, is the d...
Web Tricks

The Future Is Here! Augmented And Virtual Reality Icon Set

The Future Is Here! Augmented And Virtual Reality Icon SetThe Future Is Here! Augmented And Virtual Reality Icon Set The Smashing Editorial 2018-05-18T15:45:28+02:00 2018-06-05T08:35:40+00:00 What once sounded like science fiction has become a reality: All you need is to grab a VR headset or simply use your web browser and you suddenly find yourself in an entirely different place, a different time, or in the middle of your favorite game. Augmented and virtual reality are changing the way we experience and interact with the world around us — from the way we consume media and shop to the way we communicate and learn. Careless of whether you’re skeptical of this ...