Web Tricks Archives - Page 2 of 27

26Jul

By phpInfoNo Comments

Web Tricks

8 Design Tips That Increased My Ecommerce Conversions By 42%

When it comes to increasing sales for your ecommerce store, there are 3 levers you can pull: You can increase your average order value; You can increase the amount of traffic to your site; You can increase your conversion rate. While all of the above are important, the cheapest, most effective way to grow your sales is by improving your conversion rate. For most online stores, low conversion rates are typically the result of a poor design or a bad user experience. Your visitors may not resonate with the look and feel of your website or they may have problems finding the information they need in order to make a purchase. In this post, I will walk you through the exact steps I took to increase my desktop conversion rate by 46% and my mobile conversion rate by 39% with my last site redesign....

2May

By phpInfoNo Comments

Apps, CMS, Web Tricks

Best CMS for 2020

Content Management Systems are arguably the internet’s most powerful web development tool. In a rapidly growing market where every business under the sun requires a website that is not only fully functioning, but optimised, easy to update regularly, and implement the latest features, the right CMS is important. As a web developer it can be easy to stick to the CMS you know – even if there are potentially better ones out there. With such a busy schedule, websites to be made, and money to be earned, the desire to find something new is quite frankly near the bottom of the pile. That’s is why we have worked to put together a list of some the most new and notable (or older but still just as worthy) CMS systems for 2020. After all, with a new year, why not learn a new CMS too? 1. Craft Craft ...

2May

By phpInfoNo Comments

CSS Tricks, Javascript, Web Tricks

Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS

We have big JavaScript frameworks that tons of people already use and like, including React, Vue, Angular, and Svelte. Do we need another JavaScript library? Let’s take a look at Alpine.js and you can decide for yourself. Alpine.js is for developers who aren’t looking to build a single page application (SPA). It’s lightweight (~7kB gzipped) and designed to write markup-driven client-side JavaScript. The syntax is borrowed from Vue and Angular directive. That means it will feel familiar if you’ve worked with those before. But, again, Alpine.js is not designed to build SPAs, but rather enhance your templates with a little bit of JavaScript. For example, here’s an Alpine.js demo of an interactive “alert” component. CodePen Embed Fallback The alert message is two-way bound to the input using...

14Sep

By phpInfoNo Comments

CSS Tricks, Web Tricks

Using Immer for React State Management

We make use of state to keep track of application data. States change as users interact with an application. When this happens, we need to update the state that is displayed to the user, and we do this using React’s setState. Since states are not meant to be updated directly (because React’s state has to be immutable), things can get really complicated as states become more complex. They become difficult to understand and follow. This is where Immer comes in and that’s what we’re going to look at in this post. Using Immer, states can be simplified and much easier to follow. Immer makes use of something called "draft" which you can think of as the copy of your state, but not the state itself. It’s as though Immer hit CMD+C on the state and then cmd+V’d it somewhere else where it can be sa...

Model-Based Testing in React with State Machines

14Sep

By phpInfoNo Comments

CSS Tricks, Web Tricks

Model-Based Testing in React with State Machines

Testing applications is crucially important to ensuring that the code is error-free and the logic requirements are met. However, writing tests manually is tedious and prone to human bias and error. Furthermore, maintenance can be a nightmare, especially when features are added or business logic is changed. We’ll learn how model-based testing can eliminate the need to manually write integration and end-to-end tests, by automatically generating full tests that keep up-to-date with an abstract model for any app. From unit tests to integration tests, end-to-end tests, and more, there are many different testing methods that are important in the development of non-trivial software applications. They all share a common goal, but at different levels: ensure that when anyone uses the application, ...

25Aug

By phpInfoNo Comments

Tech News, Web Tricks

12 Best CMS for 2019

2019 is half over, but don’t let that stop you from trying something new… specifically, a new CMS. “But Ezequiel, good buddy, I don’t have time to check out a whole new content management system. I have websites to make!”, you say, in those exact words. That’s fair, but you should be keeping an eye on the up-and comers anyway. These are the people who have the sheer brass walnuts (which are a real thing, unisex, and available to anyone with money) to go up against giants like WordPress, Joomla, and mostly WordPress. They do this with nothing but a pretty good idea, a GitHub repository, and sometimes some corporate funding of some kind, if they’re very lucky. You ignore them at your own peril. Well, maybe not peril, but these projects deserve a look. The CMS that have been selected for t...

Using requestAnimationFrame with React Hooks

24Aug

By phpInfoNo Comments

CSS Tricks, Web Tricks

Using requestAnimationFrame with React Hooks

Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way. TLDR: Pass an empty array as a second parameter for useEffect to avoid it running more than once and pass a function to your state’s setter function to make sure you always have the correct state. Also, use useRef for storing things like the timestamp and the request’s ID. useRef is not only for DOM references There are three ways to store variables within functional components: We can define a simple const or let whose value will always be reinitialized with every component re-rendering. We can use useState whose value persists across re-renderi...

12May

By phpInfoNo Comments

CSS Tricks, Web Tricks

Creating a Reusable Pagination Component in Vue

The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there are cases when the best possible way of presentation means creating a list. Depending on the amount of data and its content, we may decide to show all content at once (very rarely), or show only a specific part of a bigger data set (more likely). The main reason behind showing only part of the existing data is that we want to keep our applications as performant as possible and avoid loading or showing unnecessary data. If we decide to show our data in "chunks" then we need a way to navigate through that collection. The two most common ways of navigating through set of data are: The first is pagination, a technique that splits the s...

12May

By phpInfoNo Comments

Web Tricks

Wrap a Vanilla JavaScript Package for Use in React

Complex web projects often require the use of 3rd party widgets. But what if you're using a framework while a widget is only available in pure JavaScript? To use a JavaScript widget in your project, the best approach would be to create a framework specific wrapper. That's what this article is about. At ag-Grid we focus on developing the fastest and most feature rich JavaScript data grid for web applications. It has no 3rd party dependencies and is specifically designed to deliver outstanding performance even if being used to display millions of records. To make integrations with React applications easier, we've implemented our own React grid wrapper. In this article, I'll show you how to wrap a 3rd party widget into a React component using ag-Grid as an example. I'll show you how we set u...

11May

By phpInfoNo Comments

Web Tricks

Add Authentication and Personalization to VuePress

There are several advantages to using a static site generator such as VuePress. With VuePress, you can focus on writing content using markdown, and the VuePress application generates static HTML files. VuePress also turns your content into a single-page application (SPA), so transitions between pages seem instant and seamless. The generated static files can be cached and distributed across a content delivery network (CDN) for even more performance. For the reader, VuePress creates a great experience. However, a "static" site does not mean you cannot add dynamic touches to your content. In this tutorial, you will learn how to customize VuePress to create a personalized experience based on the person currently viewing the content. Install VuePress Note: To complete this tutorial, you must h...

11May

By phpInfoNo Comments

Web Tricks

React Starter: The Ways to Use React

Before we can jump into learning more about the specifics of React, it's important to talk about all the ways we can use React. This will give us a good mental overview to see how React can be added to any project. In a nutshell, it comes down to the following: React can be used by: Adding React to an existing site Using React to create a fully single page app Let's talk about the difference between an existing site and single page apps (SPA). React is a great fit for both scenarios. It's ability to scale based on the project, small or large, is one of the main reasons React is loved by so many. Adding React to an Existing Site If you've already got a website and want to add React, it's a two-step process. Usually you'll have a website that's served with a server-side language (PHP...

11May

By phpInfoNo Comments

Web Tricks

Whats new in create-react-app v3?

When you're looking to setup your React developer environment, create-react-app is one of the go to ways to go about it. This package allows you to do so with minimal configuration as it creates most of the boilerplate code needed to get you up and running. The React team recently unveiled version 3 of create-react-app and it brings some exciting new features increamenting on what was added on the previous releases. https://twitter.com/iansu/status/1120402844815908865 Some of the things to look out in the latest release include: Jest 24 Hooks support Typescript linting browserslist support in @babel/preset-env Absolute imports with jsconfig.json / tsconfig.json PostCSS Normalize It's good to note that some of these features may cause breaking changes in existing projects so...

5May

By phpInfoNo Comments

Web Tricks

Quick and Simple Search Filter Using Vanilla JavaScript

When building Single Page Applications a feature I frequently find myself adding is a simple search filter. Nothing too in depth, I'll just want a text field to be able to quickly filter over items to find specific ones. I'm going to share what I do, because it's quick to implement, performant enough, and often very helpful. To start with, this technique assumes that the data you're filtering over is in the form of an array of objects. From there it's all standard libarary array and string methods. Our Tools Array.prototype.filter Array.prototype.filter is how we filter our array. As a parameter, it takes a callback that it runs on each item of the array. This callback should return true or false for whether or not it should be a member of the filtered array. let oneToTen = [1, 2, 3, 4,...

5May

By phpInfoNo Comments

Web Tricks

Build a Slack App in 10 Minutes with MongoDB Stitch

Slack is not only the fastest growing startup in history, but it's also an app by the same name and one of the most popular communication tools in use today. We use it extensively at MongoDB to foster efficient communications between teams and across the company. We're not alone. It seems like every developer I encounter uses it in their company as well. One interesting thing about Slack (and there are many) is its extensibility. There are several ways you can extend Slack. Building chatbots, applications that interface with the communication service and extending Slack through the introduction of additional commands called "slash commands" that enable Slack users to communicate with external services. In this article, we'll build a simple slash command that enables users to store and ret...

5May

By phpInfoNo Comments

CSS Tricks, Web Tricks

Making the Move from jQuery to Vue

As someone who has used jQuery for many. years and has recently become a Vue convert, I thought it would be an interesting topic to discuss the migration process of working with one to the other. Before I begin though, I want to ensure one thing is crystal clear. I am not, in any way whatsoever, telling anyone to stop using jQuery. That's been pretty fashionable lately, and heck, I wrote up something similar myself a few year ago ("How I'm (Not) Using jQuery"). If you get things done with jQuery and your end users are successfully using your site, then more power to you. Keep using what works for you. This guide is more for people who may be coming from years of jQuery experience and want to see how things can be done with Vue. With that in mind, I'm going to focus on what I consider "co...