PHPInfo

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

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

4Jan

By phpInfoNo Comments

CSS Tricks

A Quick CSS Audit and General Notes About Design Systems

I’ve been auditing a ton of CSS lately and thought it would be neat to jot down how I’m going about doing that. I’m sure there are a million different ways to do this depending on the size and scale of your app and how your CSS works under the hood, so please take all this with a grain of salt. First a few disclaimers: at Gusto, the company I work for today, our engineers and designers all write in Sass and use webpack to compile those files into CSS. Our production environment minifies all that code into a single CSS file. However, our CSS is made up of three separate domains. so I downloaded them all to my desktop because I wanted to test them individually. Here’s what those files do: manifest.css: a file that’s generated from all our Sass functions, mixins and contains all of our d...

4Jan

By phpInfoNo Comments

CSS Tricks

Storing and Using the Last Known Route in Vue

There are situations where keeping a reference to the last route a user visited can come in handy. For example, let’s say we’re working with a multi-step form and the user proceeds from one step to the next. It would be ideal to have the route of that previous step in hand so we know where the user left off, in the event that they navigate away and come back later to complete the form later. We’re going to cover how to store the last known route and then fetch it when we need it. We’ll be working in Vue in this example and put vue-router to use for routing and localStorage to keep the information about last visited route. Here’s an example of what we’ll be working with: First, let’s outline the route structure Our example has a grand total of three routes: /home /hello /goodbye E...

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

24Dec

By phpInfoNo Comments

CSS Tricks

Animating Between Views in React

You know how some sites and web apps have that neat native feel when transitioning between two pages or views? Sarah Drasner has shown some good examples and even a Vue library to boot. These animations are the type of features that can turn a good user experience into a great one. But to achieve this in a React stack, it is necessary to couple crucial parts in your application: the routing logic and the animation tooling. Let’s start with animations. We’ll be building with React, and there are great options out there for us to leverage. Notably, the react-transition-group is the official package that handles elements entering and leaving the DOM. Let’s explore some relatively straightforward patterns we can apply, even to existing components. Transitions using react-transition-group Fir...

17Dec

By phpInfoNo Comments

Google Tag Manager

How to fix Low Bounce Rate in Google Analytics

Everybody wants to have a low bounce rate in Google Analytics. This phrase was recently said in the Google Tag Manager community by one of our members. The quick discussion was about whether particular events in Google Analytics should be tracked as interactions or not because the choice impacts the bounce metric. The truth is that bounce rate isn’t that important, after all. I mean, it is (to some extent). But not that much as some of you might be thinking. Unfortunately, many marketers still take the metric way too seriously. I’ve seen some them even using it as a KPI(!!!). While bounce rate can give you some valuable insights on whether the visitors are engaging with your content/page, it also makes inexperienced people focus on the wrong things. Instead of improving what really matte...

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

14Dec

By phpInfoNo Comments

CSS Tricks

Rendering Lists Using React Virtualized

Working with data in React is relatively easy because React is designed to handle data as state. The hassle begins when the amount of data you need to consume becomes massive. For example, say you have to handle a dataset which is between 500-1,000 records. This can result in massive loads and lead performance problems. Well, we’re going to look at how we can make use of virtualized lists in React to seamlessly render a long list of data in your application. We’re going to use the React Virtualized component to get what we need. It will allow us to take large sets of data, process them on the fly, and render them with little-to-no jank. The setup React Virtualized already has a detailed set of instructions to get it up and running, so please check out the repo to get start...

14Dec

By phpInfoNo Comments

Google Tag Manager

How many Google Tag Manager containers do you need?

This time the guide will be indeed shorter than usual. First of all, this blog post will not talk about multiple GTM containers on the same page. I’m answering a bit different question. Say, you have 3 websites. How many GTM containers do you need here? One? Two? Three? The reality is that there is no universal answer. One container might work, two or three containers might do the job as well. The real answer is: it depends. Think about the websites first When it comes to deciding the number of containers, I always think of the structure of websites. Are those 3 (or insert any other numbers) websites very similar (regarding content, structure, etc.)? Or are they quite different? If you have three websites that are very similar and, say, the main difference is localization (language), th...

13Dec

By phpInfoNo Comments

CSS Tricks

Keep Math in the CSS

There is a sentiment that leaving math calculations in your CSS is a good idea that I agree with. This is for math that you could calculate at authoring time, but specifically chose not to. For instance, if you needed a 7-column float-based grid (don't ask), it's cleaner and more intuitive: .col { /* groan */ width: 14.2857142857%; /* oh, I get it */ width: calc(100% / 7); } You could probably prove that the calc() takes the computer 0.0000001% longer, so explicitly defining the width is technically faster for performance reason — but that is about the equivalent of not using punctuation in sentences because it saves HTML weight. That math can a little more complicated as you continue. For example, like in our use cases for calc() article, what about columns i...

27Nov

By phpInfoNo Comments

Web Tricks

GraphQL API with AWS and Use with React

GraphQL has become a go-to API implementation for developers looking to take advantage of features liketype safety, network efficiency, real-time data with subscriptions & more. Building, managing, & deploying your own GraphQL server can be tedious & time consuming, especially for developers new to the technology that may want to quickly get a real-world, secure & scalable GraphQL API up and running without having to learn how to create it from scratch (as well as spend the time learning best practices around API design & authorization). Introducing AWS AppSync In this post we'll learn how to use AWS AppSync, a fully managed GraphQL service, to create a serverless GraphQL API. AWS AppSync allows developers to quickly create serverless, scalable & secu...

26Nov

By phpInfoNo Comments

Web Tricks

Protecting Laravel Sites with IP Intelligence

From the moment you publish a website, you need to be wary of security. From hackers to script-kiddies, you can’t always be sure of where the next attack could come from. So, as developers, we are always on the prowl for the next best thing when it comes to protecting our website(s). In this article, we will cover a simple way of how we can use IP intelligence to detect unwanted connections and protect against insecure requests. What is IP Intelligence When most people hear IP intelligence, the thing that comes to mind is “locating users from their IP address”. But, it doesn’t stop there, IP intelligence can be used to accomplish many things: Content personalization. Currency detection. Fraud prevention. Time Zone lookup. Language redirection. The list...

22Nov

By phpInfoNo Comments

Web Tricks

Error Handling with Angular 6 – Tips and Best Practices

Handling errors properly is essential in building a robust application in Angular. Error handlers provide an opportunity to present friendly information to the user and collect important data for development. In today's age of advanced front-end websites, it's more important than ever to have an effective client-side solution for error handling, which is covered in this article. An application that does not handle errors gracefully leaves its users confused and frustrated when the app suddenly breaks without explanation. Handling these errors across an application greatly improves user experience. Data can also be collected from within the error handlers to inform the development team about important issues that slipped past testing. In this article, we will compare several solutions...

21Nov

By phpInfo2 Comments

PHP, Web Tricks

How to redirect http to https in wordpress using htaccess

Today I faced a very simple issue and I am going to share that with all of you. In general when we move our wordpress site from Http to Https then we simple change urls in Wordpress->Settings->General. But still if any user is going to open your site with http then it will show in http and that's very bad for you site ranking. For an example my site is on SSL and url is as below: https://phpinfo.in Now when you will try to open below urls then you won't redirect on https automatically http://phpinfo.in phpinfo.in If https:// is not in the prefix, the HTTP link loads instead. To overcome this issue you just need to add the following into your .htaccess in between the tag: RewriteCond %{HTTPS} !=on RewriteRule ^(.*) https://%{SERVER_NAME}/$1 [R,L] If there were no add...