Thursday, November 21

Web Tricks

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
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...
Read More
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...
Read More
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...
Read More
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...
Read More
20Nov By phpInfoNo Comments
Web Tricks

5 Ways to Convert React Class Components to Functional Components w/ React Hooks

In the latest alpha release of React, a new concept was introduced, it is called Hooks. Hooks were introduced to React to solve many problems as explained in the introduction to Hooks session however, it primarily serves as an alternative for classes. With Hooks, we can create functional components that uses state and lifecycle methods. Related Reading: Getting Started with React Hooks Build a React To-Do App with React Hooks (No Class Components) Hooks are relatively new, as matter of fact, it is still a feature proposal. However, it is available for use at the moment if you'd like to play with it and have a closer look at what it offers. Hooks are currently available in React v16.7.0-alpha. It's important to not that there are no plans to ditch classes. React Hooks just ...
Read More
Take Your Business Online with Ease: Create Your Website with Mozello
15Nov By phpInfoNo Comments
Web Tricks

Take Your Business Online with Ease: Create Your Website with Mozello

Few of the current crop of page builders are as simple as Mozello. You don’t need any previous experience, Mozello takes care of everything for you. Just run through the quick set-up and you’ll have a working website, online, in minutes. Mozello is a surprisingly easy-to-use platform that offers you the opportunity to create a personal or business site, with no design or code knowledge. But where it really excels is in lowering the entry-level for anyone hoping to create an ecommerce site. create a brochure, a blog, or even an ecommerce store Mozello is also an ideal option for web designers and developers who need to develop a site simple enough for a client to self-manage. Mozello is so simple to use, your client can make any changes they like, without blowing up your phone ...
Read More
15Nov By phpInfoNo Comments
Web Tricks

Get Started w/ Prisma for Super Simple GraphQL

Almost every week we get to see a new tool or product being released for GraphQL development. Yeah, that's how hot the GraphQL ecosystem is currently is. Today, we'll be looking at one of the tools, which is Prisma. We'll be looking at how to get started with Prisma.   Prerequisites To follow along, this tutorial assumes the following: Node.js and NPM installed on your computer Basic knowledge of GraphQL What's Prisma Prisma is a data layer that turns a database into a GraphQL API. We can look at it as a kind of ORM, but it's much more powerful than traditional ORMs. With Prisma, we get a server (Prisma server) that act as a proxy for our database and a high-performance query engine that runs on the server, which generates actual database queries for us. In additi...
Read More