Web Archives - Page 23 of 26

8Jun

By Chris SevillejaNo Comments

Web Tricks

8 Emmet Tips You Might Not Know

Emmet (who remembers when it was called Zen Coding?) is a very useful code editor tool that brings snippets and supercharged shortcuts for generating HTML/markup and even CSS. Save tons of time in your daily workflow by learning more of Emmet syntax. Also remember that all of these examples will be in plain HTML files, but you can also configure Emmet to be used with React/JSX, Angular templates, Vue templates, and more. To give you a quick example of Emmet's main use, expanding an abbreviation into full HTML. We'll be typing the following and pressing tab to expand it: section.hero.is-info>.hero-body>.container>h1.title{Hello!} The following will be expanded to: <section class="hero is-info"> <div class="hero-body"> <div class="container"> <h1 ...

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

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

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

Microsoft to Buy GitHub; Controversy Scheduled for This Week

6Jun

By Ezequiel BruniNo Comments

Tech News

Microsoft to Buy GitHub; Controversy Scheduled for This Week

So yeah, what the title said. Microsoft is buying GitHub for 7.5 BILLION with a “B” US dollars. This is officially this week’s Big DealTM, and everyone’s going to be talking about it. It would not be quite accurate to say that GitHub powers software development as a whole, but it powers a lot of it. GitHub’s friendliness to — and free repositories for — open source software have made it nigh on indispensable for many developers around the world. So now some people are freaking out. People unfamiliar with tech history or the open source world might wonder why. After all, companies change hands all the time. Sometimes that works out for consumers, and sometimes it doesn’t. I personally think it will work out, but I can understand why some people are angry. GitHub’s friendlin...

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

4Jun

By phpInfoNo Comments

CSS Tricks, Web Tricks

Making Avengers ID Card In HTML And CSS

Let’s suppose Tony Stark would like to redesign the ID cards of the Avengers, and he needs our help to create them in HTML and CSS. So, how can we help? In this tutorial, we’ll be using Flexbox to create the desired layout while diving into nested flexboxes for some advanced layouts. We will also be using rounded as well as transparent borders to create sci-fi arcs in CSS, and then animating them by using CSS animations around the picture of the Avenger. Last but not least, we’ll be using the box-shadow and text-shadow properties to give our ID card a final sci-fi touch. By the end of the tutorial, we will build a sci-fi animated Avengers ID card, and also learn the basics of Flexbox, nested Flexbox, CSS animations, borders, shadows, and many other frequently used CSS properties...