Monday, November 30
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 solutionIn 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...
How to Fix Magento Login Issues with Cookies and Sessions
PHP

How to Fix Magento Login Issues with Cookies and Sessions

This article was created in partnership with Ktree. Thank you for supporting the partners who make SitePoint possible. In this article are looking at how Magento cookies can create issues with the login functionality of both the customer-facing front-end and admin back-end, the reason it occurs and how it should be resolved. This is also known as the looping issue, as the screen redirects itself to the same screen, even though the username and password is correct. A script is provided at the end of the article which can help detect a few of the issues. Feel free to use and modify as per your needs. What is a Cookie? A cookie is a piece of text that a web server can store on a user's hard drive, and can also later retrieve it. Magento uses cookies in Cart & Backend Admin functionalities...
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 levelSounds 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 ...
Web Tricks

Monthly Web Development Update 5/2018: Browser Performance, Iteration Zero, And Web Authentication

Monthly Web Development Update 5/2018: Browser Performance, Iteration Zero, And Web AuthenticationMonthly Web Development Update 5/2018: Browser Performance, Iteration Zero, And Web Authentication Anselm Hannemann 2018-05-18T13:51:17+02:00 2018-06-05T11:39:14+00:00 As developers, we often talk about performance and request browsers to render things faster. But when they finally do, we demand even more performance. Alex Russel from the Chrome team now shared some thoughts on developers abusing browser performance and explains why websites are still slow even though browsers reinvented themselves with incredibly fast rendering engines. This is in line with an art...
Web Tricks

How Error Monitoring Helps You Find Bugs BEFORE Users Do

One of the biggest distractions to any software team building web and mobile applications is the act of fixing up problems in previously written code. I'm willing to bet that your personal performance is measured on how much you build, innovative and deploy rather than how much error free code you release or how much technical debt you manage to scoop up on your way. So it always seems like a huge hassle or distraction to be having to go back and fix up bugs. Trying to diagnose and fix those problems is terribly inefficient too. Digging through log files, matching time and date stamps and asking non technical users over support tickets what happened and when cause a lot of frustration. But it doesn't have to be that way. Here we'll talk about how effective error monitoring in production me...
Web Tricks

Code Challenge #10: Lazy Loading Animal Memes

In a bid to lower the load times of a website, several techniques have been developed. One such technique is the lazy loading of images on the page. TL, DRAs seen above, in this challenge we shall be lazy loading the images on the page. When the page is loaded, only the image placeholders which appear completely in the viewport are fetched.Hint: The code from this previous challenge could be helpful.The Challenge As a performance improvement technique, lazy loading involves the loading of only images whose placeholders come into view.Implement this lazy loading feature on the provided page containing quite funny animal memes.Placeholder images with smaller dimensions and size are stretched to fit the image size. A larger image is specified using the data-src attribute but isn...
More Than Pixels: Selling Design Discovery
Web Tricks

More Than Pixels: Selling Design Discovery

More Than Pixels: Selling Design DiscoveryMore Than Pixels: Selling Design Discovery Kyle Cassidy 2018-05-17T14:10:03+02:00 2018-06-05T11:39:14+00:00 As designers, we know that research should play a pivotal role in any design process. Sadly, however, there are still a lot of organizations that do not see the value of research and would rather jump straight into the visual design stage of the design process.The excuses given here tend to be:“We already know what our customers want.”“We don’t have the time/budget/people.”“We’ll figure out the flaws in BETA.”As designers, it is important that we are equipped to be able to have conversations with senior stak...