PHPInfo

31Oct

By phpInfoNo Comments

Web Tricks

Using Create React App v2 and TypeScript

Now that Create React App v2 is out, official TypeScript support comes with it. This is an exciting thing for JavaScript users that use TypeScript. TypeScript is a powerful tool that helps us write safer and self-documenting code. We can catch bugs faster with TypeScript. Many people have opinions about TypeScript, good and bad, but it's a good idea to give it a chance. For this article, we'll focus on getting a Create React App up with TypeScript and we'll do a larger project where we use TypeScript and React together in a future article. Starting a TypeScript Create React App This is the easiest part! npx create-react-app my-typescript-app --typescript What packages does the --typescript flag get us and what changes does it make? The TypeScript Additions The --type...

31Oct

By phpInfoNo Comments

Web Tricks

4 Uses of JavaScript’s Array.map() You Should Know

From the classic forloop to the forEach() method, various techniques and methods used to iterate through datasets abound JavaScript. However, one of the more popular methods is the .map() method. .map() creates an array from calling a specific function on each item in the parent array. .map() is a non-mutating method in that it creates a new array as against mutating methods which only make changes to the calling array. This can be tricky to remember. In this post, we'll look at 4 noteworthy uses of the .map() in JavaScript. Let's begin! Calling a Function on Each Item in an Array .map() as earlier stated accepts a callback function as one of its arguments and an important parameter of that function is the current value of the item being processed by the function. This is...

31Oct

By phpInfoNo Comments

Laravel

Laravel vs Codeigniter : Battle of the Best PHP Frameworks

We all know that both Laravel and CodeIgniter are massively famous among PHP programmers. We always focus on selecting the best Technologies when we are developing a website application. It’s the Challenging task to choose the correct ones between Laravel and Codeigniter. We always confused to choose Best PHP Framework. Here we are going to discuss the battle of the strongest PHP Frameworks Laravel vs Codeigniter. Both Frameworks have their own Pros and cons, It depends upon your requirements. larval and Codeigniter are similar in many ways. Both Laravel and Codeigniter are highly famous among programmers. But the question is which one is the Best PHP Framework? CODEIGNITER CodeIgniter is an open-source PHP framework. It is one of the most popular, easy to use and flexib...

31Oct

By phpInfoNo Comments

Laravel

CodeLobster IDE – free multi-platform PHP, HTML, CSS, JavaScript editor

Free PHP, HTML, CSS, JavaScript editor – CodeLobster IDE In this article, we suggest you to get acquainted with the free editor of web languages – CodeLobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans. CodeLobster IDE allows you to edit PHP, HTML, CSS and JavaScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content. If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript code, which is contained in HTML files. The program includes auto-completion function, which greatly speeds up the programmer’s work and eliminates th...

28Oct

By phpInfo1 Comment

Web Tricks

Getting Started with React Hooks

React Hooks are a great new feature coming in React 16.7. React 16.6 brought some awesome new things like React.memo() and React.lazy and Suspense. The React team isn't stopping there. Hooks are a feature that you'll end up using every single day of your React development. You can give them a try in React 16.7.0-alpha right now and are being discussed in an open RFC. Hooks are great because we get more tools as React developers. If you want to use state or lifecycle methods you would normally have to change to using React.Component and classes. Hooks let us use these features in functional components! What are Hooks? React Hooks are a way to add React.Component features to functional components. Features like: State Lifecycle Hooks let you use React's features ...

26Oct

By phpInfoNo Comments

Web Tricks

What’s New in React 16.6

React version 16.6 is out and it comes packed with some useful new features that are very much worth getting excited about. It's a minor release with major features focused on performance optimization. The main new features include: React.memo() React.lazy() static contextType() static getDerivedStateFromError() a number of deprecations in StrictMode Let's take a look into what each of these features adds to React. React.memo() React.memo() is the functional component solution to React.PureComponent as used in class components. It's a higher order component that is wrapped around functional components to create memoized components. The result is a component that only rerenders when it's props change, acting kind of like shouldComponentUpdate(). Using m...

25Oct

By phpInfoNo Comments

CSS Tricks

Building Skeleton Components with React

One of the advantages of building a Single Page Application (SPA) is the way navigating between pages is extremely fast. Unfortunately, the data of our components is sometimes only available after we have navigated to a specific part of our application. We can level up the user’s perceived performance by breaking the component into two pieces: the container (which displays a skeleton view when it’s empty) and the content. If we delay the rendering of the content component until we have actually received the content required, then we can leverage the skeleton view of the container thus boosting the perceived load time! Let’s get started in creating our components. What we’re making This is a great article that outlines how you can create a skeleton component, and th...

25Oct

By phpInfoNo Comments

Web Tricks

How to implement multiple user authentications using Laravel Guards

Introduction As developers, there are couple of times where your application will require different type of users. Take for instance you're building a Hospital Management software and you need both Doctors and Patients to be entirely unique users. How do you handle registration and authentication for both users in such a scenario? Laravel makes it easy to authenticate against multiple user models by using guards and providers. Guards and Providers Before we dive into building our app, let's understand the concepts behind Guards and Providers which are essentially the building blocks of implementing multiple user authentication in Laravel. What are Guards? Guards can be seen as a way of identifying authenticated users. Laravel ships with two default guards - weband apiwith pr...

25Oct

By phpInfoNo Comments

Web Tricks

Use the React Profiler for Performance

With React, building high performance web applications became very easy because of the framework's re-rendering on the JavaScript virtual DOM, which helps it to quickly determine the changes needed when a user event is occurring. When writing complex application with React you will run into some performance issues, either because the application re-renders when it really doesn’t need to or because the states aren’t being handled properly, amongst other reasons. What exactly is regarded a high performance application? Performance is really important when dealing with a complex application or any application. In fact if your application doesn't cover 60 frames per second (fps) which would give it like 16.7ms per frame, it is more than likely underperforming with regards to the st...

25Oct

By phpInfoNo Comments

Web Tricks

React 16.6: React.memo() for Functional Components Rendering Control

React 16.6.0 is released! With it comes a host of new features including the two big ones: React.memo() React.lazy(): Code-splitting and lazy-loading with React Suspense We'll focus on React.memo() for this article and React.lazy() and Suspense in an upcoming larger article. What is React.memo()? React.memo() is similar to PureComponent in that it will help us control when our components rerender. Components will only rerender if its props have changed! Normally all of our React components in our tree will go through a render when changes are made. With PureComponent and React.memo(), we can have only some components render. const ToTheMoonComponent = React.memo(function MyComponent(props) { // only renders if props have changed }); This is a performance bo...

25Oct

By phpInfoNo Comments

Web Tricks

6 Reasons to Love Smaller CMS

WordPress, Joomla, and Drupal; these are perhaps the three biggest names in the world of the consumer CMS. They are known, they are loved, they are behemoths for a good reason. There’s no escaping them. We are all WordPress, now. No, but seriously, there’s almost nothing they can’t do, with the judicious application of plugins, themes, and coding knowledge. Yeah, believe it or not, I’m not here to rag on them. Kudos to their developers. I’m just going to sit over here and show some love to the smaller CMS options for a bit. If I were given to fits of poetry, I might write a sonnet about them or something. Alas, Lord Byron I am not; I am not nearly so rich, I have no desire to invade Greece, I do not own a bear. Instead, you’ll be getting this article detailing some of t...

25Oct

By phpInfo2 Comments

Web Tricks

Deploying Your First Gatsby Site to Netlify

Recently, Netlify has become one of the hotter topics in Web Development. They are loved in the community and just received millions of dollars of funding to continue making their product better. If you aren't familiar, Netlify is a web host with particular support Static Sites (think Gatsby.js, Next.js, etc.) as well as other incredible features like serverless (lambda) functions, free https certs, and more! In this article, we are going to walk through the steps to deploy a Gatsby app to Netlify. TLDR Create a Github Repository Create Gatsby App with Gatsby CLI Push App to Github Create New Site in Netlify and Connect to Github Repository Create GitHub Repository To deploy to Netlify, the easiest way is to set up Continuous Deployment by connecting to an existing r...

25Oct

By phpInfoNo Comments

CSS Tricks

Demystifying JavaScript Testing

Many people have messaged me, confused about where to get started with testing. Just like everything else in software, we work hard to build abstractions to make our jobs easier. But that amount of abstraction evolves over time, until the only ones who really understand it are the ones who built the abstraction in the first place. Everyone else is left with taking the terms, APIs, and tools at face value and struggling to make things work. One thing I believe about abstraction in code is that the abstraction is not magic — it’s code. Another I thing I believe about abstraction in code is that it’s easier to learn by doing. Imagine that a less seasoned engineer approaches you. They’re hungry to learn, they want to be confident in their code, and they’re ready to start testin...

24Oct

By phpInfoNo Comments

Web Tricks

Splicing HTML’s DNA With CSS Attribute Selectors

For most of my career, attribute selectors have been more magic than science. I’d stare, gobsmacked, at the CSS for outputting a link in a print style sheet, understanding nothing. I’d dutifully copy, and paste it into my print stylesheet then run off to put out whatever project was the largest burning trash heap. But you don’t have to stare slack-jawed at CSS attribute selectors anymore. By the end of this article, you’ll use them to run diagnostics on your site, fix otherwise unsolvable problems, and generate technologic experiences so advanced they feel like magic. You may think I’m promising too much and you’re right, but once you understand the power of attribute selectors, you might feel like exaggerating yourself. On the most basic level, you put an HTML attribute in square br...

24Oct

By phpInfoNo Comments

Web Tricks

Data Enrichment with MongoDB Stitch

Objectives Here is what we are going to achieve in this tutorial: Firstly, we are going to write a document to MongoDB using MongoDB Stitch. The result in our MongoDB collection will look like this: { "_id": ObjectId("5bb27712dced5f37bebf388c"), "Title":"Guardians of the Galaxy" } Secondly, a trigger will catch this new insertion and start a function. Lastly, this function will call the OMDB external API with the given movie title, fetch data about that movie, and finally enrich our MongoDB document with the data we gathered from this API. This is the final result we expect in our MongoDB collection: { "_id": ObjectId("5bb27712dced5f37bebf388c"), "Title":"Guardians of the Galaxy", "Year":"2014", "Rated":"PG-13", "Released":"01 Aug 2014", ...