phpInfo, Author at PHPInfo

10Oct

By phpInfoNo Comments

Web Tricks

Creating Multistep Forms With React and Semantic UI

Forms are the standard method used to collect user inputs on web applications. However, sometimes we may be collecting large amounts that may result in a very large form with several fields. This can be a pain not just for the user but for the developer as well since they will have to fit these fields into the form in a way that still looks appealing to the user. The solution? Break the form into several sections collecting a certain type of information at each point. undefined Fortunately for us, react makes this very simple to implement. We can do this by breaking down the sections(steps) into individual react components that collect certain inputs. We can then choose which components are rendered at each step by manipulating state. In this tutorial we shall walk through how we can ...

9Oct

By phpInfoNo Comments

Web Tricks

Build a Custom Toggle Switch with React

Building web applications usually involves making provisions for user interactions. One of the major ways of making provision for user interactions is through forms. Different form components exist for taking different kinds of input from the user. For example, a password component takes sensitive information from a user and masks the information so that it is not visible. Most times, the information you need to get from a user is boolean-like - for example: yes or no, true or false, enable or disable, on or off, etc. Traditionally, the checkbox form component is used for getting these kinds of input. However, in modern interface designs, toggle switches are commonly used as checkbox replacements, although there are some accessibility concerns. In this tutorial, we will see how to build a...

Building Intelligent Apps with MongoDB and Google Cloud – Part 1

9Oct

By phpInfoNo Comments

Web Tricks

Building Intelligent Apps with MongoDB and Google Cloud – Part 1

Data analytics is a perpetual underachiever. Every generation of tools promises us better insight and never quite delivers. So we get stuck re-platforming and re-designing, hoping the next iteration will finally get us to the intelligence utopia. Yet modern applications must provide rich experiences, offer decision support, and continuously learn and adapt to win their users. Analytics and AI are at the heart of these Intelligent Apps. We decided to build an Intelligent App to demonstrate how easy it is to take advantage of ML and AI cloud services without hiring a team of data scientists. First, we built a simple e-commerce application - MongoDB SwagStore - using React and MongoDB Stitch with MongoDB Atlas on GCP. Stitch saved us hundreds of lines of code and our app was ready in days. Bu...

9Oct

By phpInfoNo Comments

CSS Tricks

What are Durable Functions?

Oh no! Not more jargon! What exactly does the term Durable Functions mean? Durable functions have to do with Serverless architectures. It’s an extension of Azure Functions that allow you to write stateful executions in a serverless environment. Think of it this way. There are a few big benefits that people tend to focus on when they talk about Serverless Functions: They’re cheap They scale with your needs (not necessarily, but that’s the default for many services) They allow you to write event-driven code Let’s talk about that last one for a minute. When you can write event-driven code, you can break your operational needs down into smaller functions that essentially say: when this request comes in, run this code. You don’t mess around with infrastructure, that’s taken care of for you. It...

Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides

9Oct

By phpInfoNo Comments

Web Tricks

Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides

For a long time, UI animation was an afterthought for designers. Even today, many designers think of animation as something that brings delight but does not necessarily improve usability. If you share this point of view, then this article is for you. I will discuss how animation can improve the user experience of landing pages, and I’ll provide the best examples of animation created using the Slides framework. The Slides framework is an easy-to-use tool for creating websites. It allows anyone to create a sleek landing page in a few minutes. All you need to do is choose an appropriate design from the list of predefined slides. A collection of predefined designs in Slides. Four Ways Animation Supports Usability Of Landing Pages Landing page design is more than just about visual present...

Project Management Templates: The Key to Improving Your Workflow

9Oct

By phpInfoNo Comments

Web Tricks

Project Management Templates: The Key to Improving Your Workflow

Last year, Rachel McPherson shared 9 ways to organize successful creative projects. It’s a very useful article that highlights the main things to do if you want to bring greater control and organization to your web design workflow. Tip #2: Take Advantage of a Project Management Tool, is the one I want to focus on today. Specifically, I want to look at some of the best tools for web designers, how to choose the right one for you, as well as give you a quick lesson on how to use project management templates to improve your workflow. How to Choose the Best Project Management Tool for You When considering a project management platform for your web design business, here are some things to pay attention to: Generic vs. Web Design Tools These are four project management tools I would recom...

9Oct

By phpInfoNo Comments

Google Tag Manager

[GIVEAWAY] Win a Google Tag Manager Course and 5 Web Analytics Books

It’s been a while since I last posted something on this blog. I’ve been lately working on several things here at Analytics Mania. Over the course of the next several weeks, I’ll give share/show some stuff that has been running through my head lately. Some of them will be visible publicly, others just for email subscribers. This time, I’d like to share some goodies with my readers (which I have never done before). Who knows, maybe it’s the only time I do it, maybe not Time will show. Sorry for such un-analytical vagueness. Enter the Giveaway below To get started, you need to complete at least one task from the widget below. That requires entering your full name and email address (which is important in case you win this thing). As for the email subscription (to my mailing list), you will...

8Oct

By phpInfoNo Comments

CSS Tricks

Using Recompose to Share Functionality Between React Components

Sharing functionality between React components is a pretty common need. The concept is that we can establish the behavior in one place and then extend it across different components. Higher-Order Components are one way to do this. Yet, there is another way using a library called Recompose. GitHub Repo What is Recompose? The documentation helps us answer that: Recompose is a React utility belt for function components and higher-order components. Think of it like lodash for React. Basically, it’s a library for React that contains a bunch of helpers that return different higher-order components — which is nice because it takes some of the grunt work out of defining common React patterns and making them immediately available to extend to other components. What exactly can it do? Well, let’s w...

8Oct

By phpInfoNo Comments

Web Tricks

Getting Started With Gutenberg By Creating Your Own Block

WordPress is the most popular Content Management System (CMS) by far —powering more than 30% of the web. It has undergone a huge metamorphosis during its 15 years of existence. Its latest addition is Gutenberg which is to be released in version 5.0. Named after Johannes Gutenberg (the inventor of the printing press), Gutenberg is going to fundamentally change WordPress, further helping reach its goal to democratize publishing. WordPress usually releases its major features as a plugin to test the waters before baking them into the core. Gutenberg is no exception. In this article, we will learn how to go about building your first Gutenberg block. We will be building a Testimonials Slider Block while dwelling on the basics of Gutenberg. Here is an outline for this article: Insta...

8Oct

By phpInfoNo Comments

Web Tricks

20 Best New Portfolios, October 2018

Hello Readers! Can you believe that I have not found one single Halloween-themed portfolio? I guess no one wanted to base their entire site on a one-day holiday. While understandable, this disappoints me. Someone get me a vector skeleton! What we do have is a general mix of calm and soothing minimalist sites punctuated by riotous color which might, if you’re not ready for it, hurt your eyes for a second. Enjoy. Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea, kids. If you find an idea you like and want to adapt to your own site, remember to...

5Oct

By phpInfoNo Comments

CSS Tricks

One Invalid Pseudo Selector Equals an Entire Ignored Selector

Perhaps you know this one: if any part of a selector is invalid, it invalidates the whole selector. For example: div, span::butt { background: red; } Even though div is a perfectly valid selector, span:butt is not, thus the entire selector is invalidated — neither divs nor span::butt elements on the page will have a red background. Normally that's not a terribly huge problem. It may even be even useful, depending on the situation. But there are plenty of situations where it has kind of been a pain in the, uh, <code>:butt. Here's a classic: ::selection { background: lightblue; } For a long time, Firefox didn't understand that selector, and required a vendor prefix (::-moz-selection) to get the same effect. (This is no longer the case in Firefox 62+, but you...

5Oct

By phpInfoNo Comments

Web Tricks

Taming <code>this</code> In JavaScript With Bind Operator

Do you want to discover the next exciting JavaScript features that you didn’t even know you needed? In this article, I will introduce one of these proposals that if accepted may change the way you write code the same way the spread operator did. However, here’s a small disclaimer: This feature is under development and discussion. The goal here is to add some hype around it and create awareness of the hard work that TC39 is doing to find consensus, fix all the syntax and semantics issues and have it shipped with the next releases of ECMAScript. If you have any concerns, comments or desire to express your support, please go to the TC39 proposals repository, add a star to this feature to show your support, open an issue to voice your concerns and get involved. But before, I want to ask ...

The Alternative Dictionary of Web Design Terms

5Oct

By phpInfoNo Comments

Web Tricks

The Alternative Dictionary of Web Design Terms

It’s a universal truth that there’s more than one meaning to just about every word. This is doubly true for industry lingo. If you’re just getting started in web design, you need to know what everything really means, if you want to get ahead. So here it is: here’s what the Secret Web Design Illuminati doesn’t want you to know. Read this article, and you’ll be able to dab on the haters with your hip new slang. Isn’t that swell? .htaccess A file that sits on your web server which, if ever touched, is perhaps the quickest and easiest way to break your whole site. AJAX The practice of making all your content dependent on JavaScript to load in the first place; this never goes wrong. API A system whereby enterprising young developers make money from your users’ data. Remember that you c...

5Oct

By phpInfoNo Comments

Web Tricks

Building A Movie Information App With Ionic 3

Introduction This application covers several important concepts in Ionic development that will help you on your way to becoming an awesome hybrid mobile applications developer. For this tutorial, basic knowledge of HTML and CSS is expected. Some familiarity with Angular 2+, Typescript and SCSS would be beneficial but is not absolutely essential. Why Ionic? Ionic is one of the most popular frameworks in the world for creating fast and powerful hybrid mobile applications. Companies like SworkIt, Pacifica and Diesel all use Ionic to power their mobile applications. This is because from a single code base, they can build an application for IOS, Android, Windows and other platforms. What are we Building? We are building a hybrid mobile application that uses the TMDb API to get information...

Github Pull Requests Extension for Visual Studio Code

5Oct

By phpInfoNo Comments

Web Tricks

Github Pull Requests Extension for Visual Studio Code

Watch on YouTube If you pay attention in the developer community, you probably know that Microsoft bought Github over the summer in 2018. With a massive company like Microsoft buying the world's most popular open source software developer platform, many people had questions and concerns regarding the impact this would have. Just recently, a piece of that puzzle became clearer... there will be tighter integration between Microsoft products and Github. Microsoft/Github released a new extension for Visual Studio Code called Github Pull Requests. The name of the extension pretty clearly explains what it does, but to be clear, this extensions allows developers to handle pull requests right in Visual Studio Code without having to navigate to Github's website. That said, let's take a look ...