Web Tricks Archives - Page 24 of 27

8Jun

By John KariukiNo Comments

Web Tricks

Writing Snapshot Tests For React Components With Jest

In this tutorial, we will be looking at what snapshot tests are and how we can use snapshot testing to ensure our User Interface does not change without the team knowing about it. To get started, you will need to familiarize yourself with the following NodeJS - A JavaScript runtime built on Chrome's V8 JavaScript engine. React - A JavaScript library for building delightful UI by Facebook Jest - A JavaScript testing framework by Facebook. What Is Snapshot Testing? Unlike strict Test Driven Development where the standard practice is to write failing tests first then write the code to make the tests pass, Snapshot testing takes a different approach. To write a snapshot test, you first get your code working, say, a React component, then generate a snapshot of it's expected output given certai...

8Jun

By Andrei TiburcaNo Comments

Web Tricks

Ogilvy Changes Face After 70 Years

By most terms of reference, 70 years is a long time…70 years ago, copywriter David Ogilvy decided to part ways with his former business partner, Edmund Mather; together, they had made up what was known as Ogilvy & Mather. This decision meant moving from London, where the company originated, to Manhattan, where the name of the company would change to just Ogilvy. Now, as of June 2018, Ogilvy has announced a complete rebranding. For a company that prides itself on “Making brands better” it hasn’t necessarily had it easy. The rebrand has been two years in the making; with the new face lift has come staff changes, new designs, and new financial reporting standards. At the heart of this massive change is a new logotype, design, and colors. All of this can be viewed on its newly designed w...

The Complete Guide to WordPress Performance Optimization

7Jun

By Tonino JankovNo Comments

PHP, Web Tricks

The Complete Guide to WordPress Performance Optimization

According to Builtwith.com, WordPress holds close to 50% of the CMS share of the world's top 1,000,000 websites. As for the ecommerce sphere, we're at 33% with WooCommerce. And if we cast a wider net, percentages go higher. Although we may complain that WordPress can get bloated, resource-heavy, and its data model leaves a lot to be desired, there is no denying that WordPress is everywhere. WordPress can thank its simplicity and a low barrier to entry for this pervasiveness. It's easy to set up, and requires next to no technical knowledge. Hosting for WordPress can be found for as little as a couple of dollars per month, and the basic setup takes just a half hour of clicking. Free themes for WordPress are galore, some with included WYSIWYG page builders. Many look down on...

7Jun

By Chris NwambaNo Comments

Web Tricks

Getting Started with Yoga and Prisma for Building GraphQL Servers

By now, you have probably heard a lot of buzz about GraphQL going around and how it’s going to replace REST but you don’t even know where to begin. You hear a lot of buzzwords about mutations and queries but what you’re used to is GET and POST requests on your different endpoints to fetch data and make changes to your database. Thinking about making a switch to GraphQL and don't know where to begin? This article is for you. In this article, we are going to take a look at how to convert a database to a GraphQL API using Prisma. Prerequisites To follow through this article, you’ll need the following: Basic knowledge of JavaScript Node installed on your machine Node Package Manager installed on your machine To confirm your installations, run the command: node --ver...

7Jun

By Welling GuzmanNo Comments

CSS Tricks, Web Tricks

Manipulating Pixels Using Canvas

Modern browsers support playing video via the <video> element. Most browsers also have access to webcams via the MediaDevices.getUserMedia() API. But even with those two things combined, we can’t really access and manipulate those pixels directly. Fortunately, browsers have a Canvas API that allows us to draw graphics using JavaScript. We can actually draw images to the <canvas> from the video itself, which gives us the ability to manipulate and play with those pixels. Everything you learn here about how to manipulate pixels will give you a foundation to work with images and videos of any kind or any source, not just canvas. Adding an image to canvas Before we start playing with video, let’s look at adding an image to canvas. <img id="SourceImage" src="ima...

7Jun

By phpInfoNo Comments

Web Tricks

Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers

If you’ve been building anything with Node.js for long enough, then you’ve no doubt experienced the pain of unexpected speed issues. JavaScript is an evented, asynchronous language. That can make reasoning about performance tricky, as will become apparent. The surging popularity of Node.js has exposed the need for tooling, techniques and thinking suited to the constraints of server-side JavaScript. When it comes to performance, what works in the browser doesn’t necessarily suit Node.js. So, how do we make sure a Node.js implementation is fast and fit for purpose? Let’s walk through a hands-on example. Tools Node is a very versatile platform, but one of the predominant applications is creating networked processes. We’re going to focus on profiling the most common of these: HTTP...

6 Joomla Extensions We Couldn’t Live Without

7Jun

By Cameron FraserNo Comments

Web Tricks

6 Joomla Extensions We Couldn’t Live Without

We’ve been developing websites using the Joomla CMS (Content Management System) since its inception way back in September of 2005. During this time we have planned, designed, developed and supported hundreds of websites. In this article, I’ll give you the rundown on some of the wonderful extensions that we consistently use during website development. Although the majority of the extensions I detail are paid downloads, we believe that they are well worth the investment. Here are 6 Joomla components we couldn’t live without: 1. RSForm PRO From €19. Rs Form is a form building plugin which is incredibly powerful as well as user friendly to administer. Some of the things we love about RSForm PRO include: Easy drag and drop form building with inbuilt validation options; ...

6Jun

By Glad ChindaNo Comments

Web Tricks

Build Custom Pagination with React

Often times, we get involved in building web apps in which we are required to fetch large sets of data records from a remote server, API or some database sitting somewhere. If you are building a payment system for example, it could be fetching thousands of transactions. If it is a social media app, it could be fetching tonnes of user comments, profiles or activities. Whichever it is, there are a couple of methods for handling the data such that it doesn't become overwhelming to the end-user interacting with the app. One of the popular methods for handling large datasets on the view is by using the infinite scrolling technique - where more data is loaded in chunks as the user continues scrolling very close to the end of the page. This is the technique used in displaying search re...

Animate Images and Videos with curtains.js

6Jun

By Martin LaxenaireNo Comments

CSS Tricks, Web Tricks

Animate Images and Videos with curtains.js

While browsing the latest award-winning websites, you may notice a lot of fancy image distortion animations or neat 3D effects. Most of them are created with WebGL, an API allowing GPU-accelerated image processing effects and animations. They also tend to use libraries built on top of WebGL such as three.js or pixi.js. Both are very powerful tools to create respectively 2D and 3D scenes. But, you should keep in mind that those libraries were not originally designed to create slideshows or animate DOM elements. There is a library designed just for that, though, and we’re going to cover how to use it here in this post. WebGL, CSS Positioning, and Responsiveness Say you’re working with a library like three.js or pixi.js and you want to use it to create interactions, like mous...

UX Your Life: Applying The User-Centered Process To Your Life (And Stuff)

6Jun

By phpInfoNo Comments

Web Tricks

UX Your Life: Applying The User-Centered Process To Your Life (And Stuff)

Everything is designed, whether we make time for it or not. Our smartphones and TVs, our cars and houses, even our pets and our kids are the products of purposeful creativity. So why not our lives? A great many of us are, currently, in a position where we might look at our jobs — or even our relationships — and wonder, “Why have I stayed here so long? Is this really where I want or even need to be. Am I in a position where I can do something about it?” The simple — and sometimes harsh — the answer is that we don’t often make intentional decisions about our lives and our careers like we do in our work for clients and bosses. Instead, having once made the decision to accept a position or enter a relationship, inertia takes over. We become reactive rather than active particip...

5Jun

By Ryan GoldmanNo Comments

Web Tricks

Debug JavaScript in Production with Source Maps

These days, the code you use to write your application isn’t usually the same code that’s deployed in production and interpreted by browsers. Perhaps you’re writing your source code in a language that “compiles” to JavaScript, like CoffeeScript, TypeScript, or the latest standards-body approved version of JavaScript, ECMAScript 2015 (ES6). Or, even more likely, you’re minifying your source code in order to reduce the file size of your deployed scripts. You’re probably using a tool like UglifyJS or Google Closure Compiler. Such transformation tools are often referred to as transpilers — tools that transform source code from one language into either the same language or another similar high-level language. Their output is transpiled code that, while functional in the target enviro...

5Jun

By Jesse KrasnosteinNo Comments

Web Tricks

How to Integrate MongoDB Atlas and Segment using MongoDB Stitch

It can be quite difficult tying together multiple systems, APIs, and third-party services. Recently, we faced this exact problem in-house, when we wanted to get data from Segment into MongoDB so we could take advantage of MongoDB’s native analytics capabilities and rich query language. Using some clever tools we were able to make this happen in under an hour – the first time around. While this post is detailed, the actual implementation should only take around 20 minutes. I’ll start off by introducing our cast of characters (what tools we used to do this) and then we will walk through how we went about it. The Characters To collect data from a variety of sources including mobile, web, cloud apps, and servers, developers have been turning to Segment since 2011. Segment consolid...

5Jun

By phpInfoNo Comments

Web Tricks

The Ethics Of Persuasion

(This article is kindly sponsored by Adobe.) A few months ago, the world was shocked to learn that Cambridge Analytica had improperly used data from a harmless looking personality quiz on Facebook to profile and target the wider audience on the platform with advertisements to persuade them to vote a certain way. Only part of the data was obtained with consent (!), the data was stored by the app creator (!!), and it was sold to Cambridge Analytica in violation of terms of use (!!!). This was an example of black hat design, a deceptive use of persuasion tactics, combined with unethical use of personal information. On the other hand, the last time you shopped on eBay, you may have noticed the use of multiple design elements encouraging you to buy an item (“last item”, “3 watched in...

SVG Animation Made Easy With Hot New Tool SVGator

5Jun

By WebdesignerDepot StaffNo Comments

Web Tricks

SVG Animation Made Easy With Hot New Tool SVGator

The best format for images on the web in 2018 is SVG. Not only is SVG resolution-independent—meaning that SVG graphics stay crisp at any size, on any device—but SVG file sizes are smaller than other competing formats. One of the most popular features of SVG is the ability to access parts of the graphic with code, and use CSS to change properties like fill color. But did you know that you can also embed animation code in an SVG file? Animating SVG can be complex, and requires some pretty intricate code to get right. Until now that is, because with the amazing SVGator you can actually design SVG animations, right in your browser. Since its launch a little over 7 months ago SVGator has won legions of fans for its simple-to-use interface, and the quality of the modular code t...

4Jun

By Jecelyn YeenNo Comments

Web Tricks

3 Useful TypeScript Tips for Angular

These are the 3 tips I found pretty handy while working with Typescript: Eliminating the need to import interfaces Making all interface properties optional Stop throwing me error, I know what I'm doing Though I discovered these while working with Angular application, but all tips are not Angular specific, it's just Typescript. Eliminating the need to import interfaces I like interfaces. However, I don't like to import them everytime. Although Visual Studio Code has auto-import feature, I don't like my source files been "polluted" by multiple lines of imports - just for the purpose of strong typing. This is how we do it normally. // api.model.ts export interface Customer { id: number; name: string; } export interface User { id: number; is...