Friday, March 29
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...
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...
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...
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...
CSS Tricks

A responsive grid layout with no media queries

Andy Bell made a really cool demo that shows us how to create a responsive grid layout without any media queries at all. It happens to look like this when you change the size of the browser window: I think this is a wonderful layout technique that’s just 6 lines (!) of CSS. .auto-grid { --auto-grid-min-size: 16rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); grid-gap: 1rem; } What this shows us is that we don’t have to write a million media queries to change the number of columns in a grid. Andy also proves that CSS Grid can automate so much of the tedious work of styling layouts. Source: CSS-tricks.com
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,...
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...
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...
Google Tag Manager

Track Page Translations with Google Tag Manager and Google Analytics

Very recently I spotted a conversation somewhere online asking about page translations (unfortunately, I don’t even remember on which platform/community did this happen. Anyway, if I recall correctly, the request was to track the original title of the page in GA (rather than the translated one) and that way keep the data purity at a higher level. In opposite, others were defending that this is very valuable information that can signal the need for a localized website’s version (read: no need for purification). And this conversation planted a seed in my head. Wouldn’t it be cool to track page translations with Google Tag Manager? Every time someone translates a page, we could track it as an event and later check the aggregated information. One thing led to another and here I am writing my ...
Web Tricks

The Best React Extension for VS Code

When working with React, there's lots of code that gets repeated over and over....and over and over again. Eventually, you start to think, "there's got to be a better way". Don't worry, there is! In this article we will look at the ES7 React/Redux/GraphQL/React-Native snippets extension. Yes, it's a mouthful to spell it all out, but it provides an amazing set of snippets that are invaluable when writing React code. The ES7 React/Redux/GraphQL/React-Native Snippets Extension This snippets extension (I won't type the entire name out again) is incredibly popular with over 2 million downloads. To back this up, every big time developer I've heard talk about React on a podcast, YouTube video, etc. uses this extension and loves it. I've always said that developers are "intentionally lazy". In...
Google Tag Manager

Why Google Analytics tag in GTM displayed as “still running”?

Over the course of the last several days, this issue became more popular than ever, therefore, I decided to write a quick blog post. So here’s the problem: you enable Google Tag Manager Preview and Debug mode and see that a certain (or maybe multiple) Universal Analytics tag is displayed as “still running”.   You refresh the page but the tag is “still running”. You open your Google Analytics real-time reports to check whether the hit has reached its destination but no luck. The event (pageview or something else) was not received.   So where’s the problem? I’m not sure about what are ALL the possible causes of this problem but I can definitely tell you the most common one. Check where you have inserted Google Analytics Settings Variable in your Universal Analytics tag. When you create a Un...
CSS Tricks

Writing Tests for React Applications Using Jest and Enzyme

While it is important to have a well-tested API, solid test coverage is a must for any React application. Tests increase confidence in the code and helps prevent shipping bugs to users. That’s why we’re going to focus on testing in this post, specifically for React applications. By the end, you’ll be up and running with tests using Jest and Enzyme. No worries if those names mean nothing to you because that’s where we’re headed right now! Installing the test dependencies Jest is a unit testing framework that makes testing React applications pretty darn easy because it works seamlessly with React (because, well, the Facebook team made it, though it is compatible with other JavaScript frameworks). It serves as a test runner that includes an entire library of predefined tests with the abilit...
Web Tricks

VS Code 1.32: Autocomplete in Vue Templates

The VS Code 1.32 February update is out now and with it comes some great new features for Vue users. Let's run through the list of features that are in the new 1.32 update: Color themes without reloading: Install and apply new theme extensions without reloading. Keyboard shortcuts editor improvements: Modify keybinding 'when' conditions in the editor. Problems panel hover commands: Apply Quick Fixes or open a Peek window directly from hovers. Preferred Code Actions: Preferred (mostly likely) Code Actions support auto fixing common issues. Debug Console customization: Modify font size, font family, and line height of the Debug Console. Big list of updates as usual! This is why VS Code has consistently been used by so many developers. Vue Templates Autocomplete Every month of VS...
Web Tricks

Search and Replace in Javascript

The "Search and Replace" functionality is very common within word processing applications used for creating notes, documents and things of that nature. In this challenge, we implement this functionality in JavaScript in two distinct ways. Curious already? Let’s see how! You should already have your development environment setup for this course. Update your cloned repository by running the command git pull. Inside the Beginner folder, navigate to the searchReplace folder. Our work for this challenge will be done in here. Make sure to follow along in the index-START.js file. The Challenge Receiving a sentence, a word in the sentence and a replacement for that word as arguments, perform a search and replace on the sentence using the arguments provided and return the new sentence. E.g search...