Thursday, November 21

Tag: Web

12 Best CMS for 2019
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...
Read More
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...
Read More
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...
Read More
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...
Read More
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...
Read More
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,...
Read More
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...
Read More
20Apr By phpInfoNo Comments
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...
Read More
15Mar By phpInfoNo Comments
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...
Read More
15Feb By phpInfoNo Comments
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...
Read More
15Feb By phpInfoNo Comments
Web Tricks

22 Best Visual Studio Code Extensions for Web Development

One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. If you're a web developer, you won't be able to live without installing these extensions! Want to install all of the extensions listed below at once?! Check out The Web Development Essentials Extension Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for just $10! 1. Debugger for chrome https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome Believe it or not, debugging JavaScript means more than just writing console.log() statements (although that's a lot of it). Chrome has features built in that make debugging a much better experience. This extension gives you all (or close to all) of th...
Read More
15Feb By phpInfoNo Comments
Web Tricks

Manage Image Breakpoints With Angular

As web developers, we are often required to create applications that are responsive as well as media-rich. Having such requirements in place means that we need to work with image breakpoints, as well as media queries since we want to provide the best experience to the end users. Adding to the list of requirements we may need to use a front-end framework such as Angular which is great for creating SPAs and other application types. In this article, we’ll take a look at image breakpoints, their use-cases and throughout a hands-on example; we’ll implement them in an Angular application using Angular’s own BreakPoint Observer. While using this approach, we’ll also highlight why this popular framework helps us work with the aforementioned techniques in a seamless way. Image Breakpoints And Resp...
Read More
24Dec By phpInfoNo Comments
Web Tricks

How to Setup, Build and Deploy Native Apps with Vue

Vue-Native is a framework written by GeekyAnts, it is a framework built to deliver cross platform mobile native applications. It is inspired by the React-native API, hence it gives a developer the ability to build cross platform applications in Vue.js using React Native’s robust system. Vue Native was originally a fork from React-vue, a compiler that gave developers that ability to write Vue and React in the same codebase. In this article, we’ll build a simple application to introduce the APIs and components available in Vue native. We’ll be building a simple application that fetches the trending Gifs on Giphy, using the Giphy API. We’ll also display the Gif and details about it using components like ScrollView, Text, Image etc. Prerequisites To follow this tutorial, you’ll need to have ...
Read More
How to Create a Visually Appealing Instagram
17Dec By phpInfoNo Comments
Web Tricks

How to Create a Visually Appealing Instagram

Instagram truly is the social media platform of this decade. It has exploded in popularity and seen massive growth. Instagram has become a social media platform for the masses, and for all types of purposes. From billion dollar companies like Snickers, to influencers, to freelancers. Instagram has one thing that everyone, no matter what they wish to achieve wants, and that is people’s attention. In order to do anything, whether it is to convince someone to hire you as a freelancer, or whether you’re just looking to spread awareness about your business and what you do, you need people’s attention. As such, the usage of Instagram has exploded, because people realize the immense power that Instagram has. In fact, it was not long ago that Instagram reached the staggering number of 1 billion ...
Read More