phpInfo, Author at PHPInfo

11Sep

By phpInfoNo Comments

CSS Tricks

Changes on CSS Grid Layout in percentages and indefinite height

This is a wonderfully nerdy deep dive into a very specific CSS change by Manuel Rego Casasnovas. Here's a bit of terminology we should know: First question is, what is an indefinite size? The simple answer is that a definite size is a size that you can calculate without taking into account the contents of the element. An indefinite size is the opposite, in order to compute it you need to check the contents first. And then goes on to explain how complicated this all gets. The change, in a nutshell: Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. Manuel provides a nice visual demo: See the Pen [css-grid] Percentage row tracks by Manuel Rego Casasnovas (@mrego) on Co...

11Sep

By phpInfoNo Comments

Web Tricks

Picking the Right TLD for Your Next Project

Being in tech — especially if you're in the B2C world — gives you a lot of freedom the rest of the business world doesn't get to enjoy. You're primarily dealing with people who understand basic workflows, you can generally expect their browsers to be updated, and most importantly for us, people in tech tend to be far less resistant to new things than the rest of us. So when it comes to finding the perfect domain name for your next project, there's a lot of freedom. ... perhaps too much freedom. With 400+ TLDs available at iwantmyname, choice paralysis can definitely set in. Here's some help to get you through it. .com is the safe way to go There's nothing wrong with choosing a .com for any project. It's the most trusted, most expected TLD on the planet, and that's not likely to change in...

11Sep

By phpInfoNo Comments

CSS Tricks

Old Timey Terminal Styling

I saw a little demo the other day called HTML5 Terminal. It has some functionality, but it seems like it's just kinda for fun. That said, I loved the aesthetic of it! Blurry monospace type with visible monitor lines and a glowing green background — nice! Let's re-create that, bit-by-bit. A radial gradient is perfect for the glowing green background: body { background-color: black; background-image: radial-gradient( rgba(0, 150, 0, 0.75), black 120% ); height: 100vh; } I'm so used to using <pre><code> to display space-formatted text (like code), but you could say terminal text isn't always code, so I like the use of <pre><output> here. Might as well use a nice monospace font: body { ... color: white; font: 1.3rem Inconsolata, monospace; } The text ...

11Sep

By phpInfoNo Comments

CSS Tricks

Jetpack’s Social Integration Features

One of the many things we use Jetpack for here on CSS-Tricks is all of its features related to social media integration. For example, Jetpack can automatically share published content to different social media accounts simultaneously, add sharing buttons to your site's theme, and allow for social login on the comment form. There is even more than that, but let's dig into these three as we use them. Auto-Sharing Posts I like the idea that everything we published goes out to social media. Many people only follow the site that way, so they should see what we're writing. We're specifically into Twitter and Facebook. With Jetpack installed connected to WordPress.com, I can now flip on the setting: Then authenticate the services you want to connect: Now as we publish new articles, there are Pub...

11Sep

By phpInfoNo Comments

Web Tricks

Smashing Book 6 Released

The hotly anticipated Smashing Book 6: New Frontiers in Web Design, is released today. Dedicated to some of the thorniest problems we face in our professional lives, it takes a swing at some of the biggest headache-triggering issues in contemporary web design, from the accessibility of single-page apps in React and Angular, to designing for Smart watches. You’ll find solutions to problems with CSS’ latest layout tool CSS Grid, as well as CSS custom properties—the much needed answer to variables in CSS—plus asset loading in the world of HTTP/2. As well as the developer-focused content that makes Smashing popular, you’ll also find some design-specific topics. The book covers implementing design systems in the real world, designing conversational user interfaces, both augmented and virtual ...

18 Tips For Running a Successful Design Sprint

11Sep

By phpInfoNo Comments

Web Tricks

18 Tips For Running a Successful Design Sprint

Development time is a precious resource. In order to be more efficient and responsive, product teams continuously try to use advanced techniques for product creation. One of the most popular frameworks that help the product team to achieve this goal is a design sprint. A design sprint is a framework that helps answer critical business questions through rapid prototyping and user testing. Basically, it’s a shortcut to learn without building and launching a real product. In this article, I want to highlight key things that should be taken into account when running a sprint. Before the Sprint Preparing for a sprint is one of the most critical steps in the process. Proper preparation will help make the best use of the time you’ll spend on this activity. 1. Write a Sprint Brief A sprint brief ...

11Sep

By phpInfoNo Comments

Laravel

4 Awesome Laravel Blade Directive To Use

Laravel Blade is a templating engine in Laravel which is very simple and yet way more pwerful to use. It which allows you to even use plain PHP code into your code file which most of the blade templating engine fails to do so. In Laravel Blade, views are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application. And that’s the beauty of using the Laravel templating engine. In this article i am going to tell you about the 4 awesome Laravel Blade Directive which you can use into your application and can simplify the process of developing of cool laravel application. So let’s begin 4 Awesome Laravel Blade Directive To Use Blade uses .blade.php extension to begin with and is stored in the resources/views of the your insta...

11Sep

By phpInfoNo Comments

Web Tricks

Getting Started with React Router v4

There are certain things we just can't build applications without: routing is one of them. Routing is necessary when switching between components in an application. React Router is one of many options you have when it comes to implementing routing in React applications. React Router continues to receive constant updates and is now at v4.x which is readily compatible with React v16. In this tutorial, we'll go through the vital concepts needed to get started with React Router 4. We'll set up our project with create-react-app which provides a quick way to get a react environment up and running. Preparing our application #React App Setup At this point we'll need to have create-react-app installed. If you haven't done this yet, run this command to install it globally: npm install -g create-reac...

10Sep

By phpInfoNo Comments

CSS Tricks

Customise radio buttons without compromising accessibility

Here’s a nifty post by Chen Hui Jing where she walks us through her process for making radio buttons accessible via keyboard. I particularly enjoyed this bit where she discusses the four options that are available to us to hide the radio input and replace them with a selection of cards that act like toggles instead: Most of us mess up the keyboard navigation portion of things when we hide the input element. There are several ways to make something invisible or hidden: clip-path: polygon(0 0) display: none opacity: 0 visibility: hidden For custom radios (or checkboxes), option 2 and 4 are not recommended because screen readers won’t be able to read the default radio element. This also prevents us from using the :focus pseudo-element on the hidden input, so those are out of the picture. Whi...

10Sep

By phpInfoNo Comments

Web Tricks

RxJS Operators for Dummies: forkJoin, zip, combineLatest, withLatestFrom

If you are confused about the differences between forkJoin, zip, combineLatest and withLatestFrom, you are not alone! :) These 4 operators are what we know as combination operators - we use them when we need to join information from multiple observables. Which operator should I use? That is what this article is for! We will talk about the usage and differences between these 4 operators in an easy to understand way, so you know which one to choose when the time comes. Setup Imagine you are printing t-shirts. Ms. Color holds the color information and Mr. Logo holds the logo information. Both of them will pick color and logo spontaneously. You will need to wait and combine these two information continuously in order to print t-shirts. Ms. Color and Mr. Logo represent two observables in our...

Creating sliding effects using sticky positioning

10Sep

By phpInfoNo Comments

CSS Tricks

Creating sliding effects using sticky positioning

Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way! Here’s a typical (um) sticky situation: See the Pen position:sticky (CSS) by Preethi Sam (@rpsthecoder) on CodePen. Sticky elements (position: sticky;) are very similar to fixed elements ( position: fixed;) in that they both maintain their position on the screen, even as the user scrolls up or down the page. The difference? A sticky element remains confined to the parent container it is in. Compare sticky example above with this one that uses the same concept using a fixed element instead: See the Pen position:sticky (CSS) by CSS-Tricks (@css-tricks) on CodePen. Say we want to create an effect where elements either slide in o...

10Sep

By phpInfoNo Comments

CSS Tricks

Interactive Introduction to CSS Houdini

This is a great explanatory microsite by Sam Richard. CSS Houdini will let authors tap in to the actual CSS engine, finally allowing us to extend CSS, and do so at CSS speeds. Much like Service Workers are a low-level JavaScript API for the browser's cache, Houdini introduces low-level JavaScript APIs for the browser's render engines. What's important to know is that Houdini is broken up into these different parts, each of which will be implemented separately. We have an intro to the paint API here and a number of other articles that touch on it. Here's a very cool collection Dan Wilson put together of Houdini + Custom Properties. Direct Link to Article — PermalinkThe post Interactive Introduction to CSS Houdini appeared first on CSS-Tricks. Source: CSS-tricks.com

Introduction To Animation And The iMessage App Store With Shruggie

10Sep

By phpInfoNo Comments

Web Tricks

Introduction To Animation And The iMessage App Store With Shruggie

Introduction To Animation And The iMessage App Store With ShruggieIntroduction To Animation And The iMessage App Store With Shruggie Simon Schmid 2018-09-10T14:45:42+02:00 2018-09-10T15:25:11+00:00 When the App Store for iMessage in late 2016 went live, I released Kaomotion, a sticker app with animated kaomoji inside. Ever since the release of this app, I wanted to write up a tutorial about how a simple text character like shruggie (i.e. ¯_(ツ)_/¯) can be animated to give it life-like features: The Shruggie animation we’re going to make. (Large preview)What you are going to read in this article is a step-by-step guide of setting up a canvas in After Effects an...

What’s New for Designers, September 2018

10Sep

By phpInfoNo Comments

Web Tricks

What’s New for Designers, September 2018

This month’s collection of new tools and elements for designers has a common theme – productivity. There are so many things here to help you do work better and more efficiently. But there’s fun too…make sure to look for some of the hidden design gems deep in this article. They’ll bring a smile to your face for sure. If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered! Brandy Brandy is a brand asset management tool for macOS. Use it to keep up with colors, logos, gradient patterns and fonts by project. Everything works in real-time and one account can contain as many brand projects as you like. Plus, it works using drag and...

Popular Design News of the Week: September 3, 2018 – September 9, 2018

9Sep

By phpInfoNo Comments

Web Tricks

Popular Design News of the Week: September 3, 2018 – September 9, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news. Fix for WordPress Gutenberg 3.7.0 ‘Unexpected Error’ that Broke the Editor The Typographic Details Behind Typewolf’s Favorite Sites of August 2018 If You Haven’t Already Switched t...