PHPInfo

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

16Nov

By phpInfoNo Comments

CSS Tricks

Why monday.com is the Universal Team Management Tool for Your Team

This platform is perfect for teams sized at 2-to-200 — and gives every employee the same level of transparency. Every project management tool seeks to do the same instrumental thing: keep teams connected, on task and on deadline to get major initiatives done. But the market is getting pretty crowded, and for good reason — no platform seems to have gotten the right feel for what people need to see, and how that information should be displayed so that it’s both actionable/relevant and contextualized. That’s why monday.com is worth a shot. The platform is based off a simple, but powerful idea: that as humans, we like to feel like we’re contributing to part of a greater/effort good — an idea that sometimes gets lost in the shuffle as we focus on the details of getting stuff done. So proj...

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

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

14Nov

By phpInfoNo Comments

Web Tricks

Build a React To-Do App with React Hooks (No Class Components)

Yes, a to-do app, seems like something we’ve all done in the past. The great thing about a to-do app is that it covers all 4 aspects of CRUD; Create, Read, Update, Delete. As a developer, we need to know CRUD and a to-do app is the best way to start that learning or refresh some of the things we may be a little rusty on. React is the frontend JavaScript library we are going to be using today. Whether you are new to React or are an avid React user, we can all agree on one thing: React is pretty great. We've already done a React To-Do App here, but that was with Class components. Today we will have no Class components by integrating React Hooks, React’s newest upgrade feature. Let’s get started. React Hooks React is always improving and growing. The latest update is React 1...

11Nov

By phpInfoNo Comments

Web Tricks

CSS Frameworks Or CSS Grid: What Should I Use For My Project?

Among the questions I am most frequently asked is some variety of the question, “Should I use CSS Grid or Bootstrap?” In this article, I will take a look at that question. You will discover that the reasons for using frameworks are varied, and not simply centered around use of the grid system contained in that framework. I hope that by unpacking these reasons, I can help you to make your own decision, in terms of what is best for the sites and applications that you are working on, and also for the team you work with. In this article when I talk about a framework, I’m describing a third party CSS framework such as Bootstrap or Foundation. You might argue these are really component libraries, but many people (including their own docs) would describe them as a framework so that is what we ...

9Nov

By phpInfoNo Comments

Web Tricks

Implementing Smooth Scrolling in React

Smooth Scrolling, dont know what it is? Well, instead of clicking on a button and being instantly taken to a different part of the (same) page, the user is navigated there via a scroll animation. It's one of those subtle features on a site that makes an incredible difference in terms of aesthetics. I personally just implemented this on one of my personal sites because I love the look and feel it provides to the user. That said, even though smooth scrolling might be subtle, it can be a bit tricky to implement yourself. Because of that, in this article, we are going to use the react-scroll package on NPM. Using react-scroll We'll be building a simple app in this tutorial, but if you want a quick rundown of how react-scroll works: Install react-scroll npm i -S react-scroll Import the ...

8Nov

By phpInfoNo Comments

Web Tricks

Get to Know Framer X: The React UI Creator

In this post we will explore Framer X, the new shiny design tool and try to make sense of its benefits as well as its capabilities. Prerequisites: This post assumes that you have basic knowledge of React. What is Framer X? Framer X is the latest and greatest version of Framer Studio, the prototyping tool. Framer Studio when initially released, gave designers the ability to create realistic app prototype designs and animate very advanced interactions than other design apps at the time. Framer X, the newest version of Framer introduces the in-built use of React components to allow designers get closer to high-fidelity prototyping. Framer X also has all the features you need to draw everything from custom icons to intricate illustrations. You could fine-tune your designs...

6Nov

By phpInfoNo Comments

Web Tricks

Improve Animated GIF Performance With HTML5 video

Animated GIFs have a lot going for them; they’re easy to make and work well enough in literally all browsers. But the GIF format was not originally intended for animation. The original design of the GIF format was to provide a way to compress multiple images inside a single file using a lossless compression algorithm (called LZW compression) which meant they could be downloaded in a reasonably short space of time, even on slow connections. Later, basic animation capabilities were added which allowed the various images (frames) in the file to be painted with time delays. By default, the series of frames that constitute the animation was displayed only once, stopping after the last frame was shown. Netscape Navigator 2.0 was the first browser to added the ability for animated GIFs to loop...

4Nov

By phpInfoNo Comments

Web Tricks

These 2 Unpopular Functions Will Improve How You Manipulate JavaScript Array Data

JavaScript has come a long way, it's progressively evolving at a compelling rate and winning an army of followers by the day. The modern JavaScript developer is arguably grappling with increased complexity than a few years ago, but is more armed with better native language features, a solid tooling ecosystem and a vibrant community. Introduction ES5 and ES6 brought a ton of improvements to JavaScript, including better ways of working with a collection of data expressed as arrays. While the language has significantly improved support for declarative data manipulation on arrays, and modern browser support for them continue to be great, JavaScript developers are only adopting a limited subset of array capabilities - generally excluding those that should further improve how they manipulate a...

4Nov

By phpInfoNo Comments

Web Tricks

How To Implement Parent-Child Relationship in MySQL

If the first time you heard this phrase “parent-child relationship in MySQL”, you went “Ok, anyone else got cool made up names or are we to start brainstorming now”, then this article is for you. For the uninitiated, this might not make much sense. That’s perfectly fine because you do not necessarily need it everyday. Parent-child relationship in MySQL has to deal with establishing some hierarchal dependencies between records in a database table. In MySQL terms, it means say that “row 12 is the parent of row 14” and stuff like that. In business terms, it will mean establishing a dependency relationship between two similar entities. For example, keeping a record of all the people in a village and matching parents to their children. So, whenever you hear that phrase, think about a real...

4Nov

By phpInfoNo Comments

Web Tricks

GraphQL – The Good and the Bad

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API as well as gives clients the power to ask for exactly what they need and nothing more. It makes it easier to evolve APIs over time and enables powerful developer tools. At least that's what we all know it to be. In this post, we'll look at all the wonderful things about GraphQL and also look at the unpopular "not so good" things about it. Let's kick it off with the good parts :) The Good Exact data fetching The importance and usefulness of GrphQL exact data fetching feature cannot be overemphasized. With GraphQL, you can send a query to your API and get exactly what you need, nothing more and nothin...

4Nov

By phpInfoNo Comments

CSS Tricks

CSS Grid Areas

I think of named grid areas in CSS Grids as bring-your-own syntactic sugar. You don't absolutely need them (you could express grid placement in other ways), but it can make that placement more intuitive. And, hey, if I'm wrong about that, correct me in the comments. Say you set up a 3-column grid: .grid { display: grid; grid-gap: 1rem; grid-template-columns: 200px 1fr 1fr; } No rows defined there; those are implicit and will appear as needed. We could define them, we just aren't, because like most situations in web design, we don't care how tall the items are — the height will grow as needed to accomodate the content. Now, how do we place something in that very top-left position in the grid? We could tell the grid to place it there like this: .item { ...

4Nov

By phpInfoNo Comments

Google Tag Manager

How to Track WIX Pageviews with Google Tag Manager

Earlier this year (February 2018, to be precise) WIX added a built-in support of Google Tag Manager. Finally, their users can without a hassle implement custom tracking techniques that are available in the GTM toolkit. By completing all the necessary steps, your GTM container can be added to all pages of your WIX store. However, there is still one nuance you need to keep in mind in order to properly track such a basic interaction as page views. You see, the problem is that when a visitor navigates from one page to another (of the WIX-hosted website), the page actually does not reload, therefore, all the subsequent page views will not be tracked… unless you continue reading because, in this guide, I’ll show you how to track WIX pageviews with Google Tag Manager. One of my Google Tag M...

4Nov

By phpInfoNo Comments

Google Tag Manager

Undefined Variable in Google Tag Manager

In the middle of October 2018, Google Tag Manager silently introduced a new feature that caused some questions in the GTM community (including me), an Undefined variable. In this quick guide, I’ll shed some light on what an Undefined variable in Google Tag Manager is and where you can use it. First of all, you can find this variable among other User-defined variables in your GTM container: It is simple to configure. In fact, it has no settings at all (if we ignore the standard “Format Value” feature). And all this variable does is just return an undefined value. So why is it useful? The answer: you can use it in your GTM stack to keep the data cleaner. Let me explain. In September, GTM introduced Format Value option in variables’ settings that allows yo...