PHPInfo

14Aug

By phpInfoNo Comments

Web Tricks

The Complete Anatomy Of The Gutenberg WordPress Editor

It seems that Gutenberg has been a term of controversy in the world of WordPress lately. Hailed as the most significant change to WordPress 5.0 this year, the Gutenberg editor has received a mixed response from web developers and regular folk alike. All of this chaos is making it difficult to see Gutenberg for what it really is. So, I’ll try to put some of the confusion to rest once and for all.In this article, I will cover the following: What is Gutenberg? More Than Just An Editor What Does Gutenberg Change In WordPress? Installing Gutenberg Exploring Gutenberg At Length Pros And Cons Understanding Compatibility Issues Gutenberg Is The Future Latest News And Further Resources 1. What Is Gutenberg? Named after Johannes Gutenberg, who invented the mechanica...

Create Beautiful Websites Easily with YOOtheme Pro

14Aug

By WebdesignerDepot StaffNo Comments

Web Tricks

Create Beautiful Websites Easily with YOOtheme Pro

YOOtheme Pro is a premium site builder from YOOtheme. The culmination of over a decade of design and development for WordPress and Joomla, it’s a professional-grade solution for creating and managing beautiful websites. Every client loves the power of a content management system, but not all clients have the same needs, challenges, or priorities. YOOtheme Pro is one of only a handful of solutions that embraces both WordPress, and Joomla, giving your clients the choice they value and opening up a wider market for professional web designers. YOOtheme Pro gives you the flexibility to create any type of content, anywhere in your design; It provides an intuitive drag and drop interface that allows you to add, edit, rearrange, and delete content at will; Best of all it allows clients to ma...

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

13Aug

By Ana TudorNo Comments

CSS Tricks

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single <circle> element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript! AI got the following result down to a single HTML element for the chart and very little JavaScript. The future should completely eliminate the need for any JavaScript, but more on that later. The final pie chart result. Some of you may remember Lea Verou's Missing Slice talk—my solution is based on her technique. This article dissects how it all works, showing what we can do in terms of graceful degradat...

13Aug

By phpInfoNo Comments

Web Tricks

Everything You Need To Know About Alignment In Flexbox

History Of Flexbox Alignment For the entire history of CSS Layout, being able to properly align things on both axes seemed like it might truly be the hardest problem in web design. So the ability to properly align items and groups of items was for many of us the most exciting thing about Flexbox when it first started to show up in browsers. Alignment became as simple as two lines of CSS: See the Pen Smashing Flexbox Series 2: center an item by Rachel Andrew (@rachelandrew) on CodePen. The alignment properties that you might think of as the flexbox alignment properties are now fully defined in the Box Alignment Specification. This specification details how alignment works across the various layout contexts. This means that we can use the same alignment properties in CSS Grid as we use ...

13Aug

By Carrie CousinsNo Comments

Web Tricks

What’s New for Designers, August 2018

What’s old is new again; that’s the theme this month with new tools for designers with a few new tools that are rooted in the “old” concepts of design theory. From working with typefaces, to a color wheel, this roundup is packed with goodies. And then there are some new “new” tools as well, including a couple of cool 3D elements. 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! Font Playground Font Playground is a tool to help you experiment with variable fonts and even export front-end code. Variable fonts, which are single font files that behave like multiple fonts, are gaining popularity, making this something y...

10Aug

By Craig BucklerNo Comments

PHP

How to Install PHP on Windows

We've previously shown you how to get a working local installation of Apache on your Windows PC. In this article, we'll show how to install PHP 5 as an Apache 2.2 module. Why PHP? PHP remains the most widespread and popular server-side programming language on the web. It is installed by most web hosts, has a simple learning curve, close ties with the MySQL database, and an excellent collection of libraries to cut your development time. PHP may not be perfect, but it should certainly be considered for your next web application. Both Yahoo and Facebook use it with great success. Why Install PHP Locally? Installing PHP on your development PC allows you to safely create and test a web application without affecting the data or systems on your live website. This article describes PHP install...

Switch font color for different backgrounds with CSS

10Aug

By Facundo CorradiniNo Comments

CSS Tricks

Switch font color for different backgrounds with CSS

Ever get one of those, "I can do that with CSS!" moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018. They are based in Norway, where WCAG accessibility is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting the font color based on the selected background color of the container. If the background is dark, then it would be ideal to have a white text to keep it WCAG contrast compliant. But what happens if a light background color is selected instead? The text is both illegible and fails accessibility. They used an...

5 Ways to Deal With Projects for Friends & Family

10Aug

By Ezequiel BruniNo Comments

Web Tricks

5 Ways to Deal With Projects for Friends & Family

It always starts as an innocent conversation. Whether it’s an email, an SMS conversation, or face-to-face, it starts simply enough: “Hey, how are you doing? How are the cats? Did you see the new Netflix show that we all insist must be watched?” You know, normal stuff. But then comes the non sequitur. Many of your old friends and family don’t know enough about technology to ease into the topic. It just comes out of the blue. “So I hear you know how to do websites and stuff…(?)” And that’s it. The silence lingers in the air. Flashbacks of people who never talked to you until their laptops broke down assail your tranquility. The storm rages within. You plaster on your best friendly smile; and ask the one question that usually makes them back down: “Sure! What’s your budget?” I g...

Google Tag Manager Tutorial for Beginners (+ Free E-Book)

9Aug

By Julius FedoroviciusNo Comments

Google Tag Manager

Google Tag Manager Tutorial for Beginners (+ Free E-Book)

Google Tag Manager is an amazing tool. I’ve been running this blog for almost two years now and 98% of all blog posts are about GTM. It has saved me, my colleagues and my clients so much time that I can’t even imagine how I could live now without it. Need to add a particular tracking pixel to a website? Not a problem! Want to track submissions of a newly created form? Consider it done. All thanks to a thing called Tag Management. Instead of waiting (for days) for a busy developer to add those tracking codes you could do this by yourself. Even though you will not replace developers 100% (and, in fact, you never should), with Google Tag Manager you (and your team) will become much agiler implementing new marketing campaigns and/or web analytics tracking. But where should you start? GTM looks...

Five interesting ways to use Sanity.io for image art direction

9Aug

By Knut Melv rNo Comments

CSS Tricks

Five interesting ways to use Sanity.io for image art direction

When we saw Chris put up a list of cloud-hosted data-stores, we couldn't resist letting him know that we also had one of those, only ours is a fully featured CMS that come with a rich query language and an open source, real time, collaborative authoring tool that you can tailor to your specific needs using React. It's called Sanity.io. “Add us to your list!” we asked Chris. “No, your stuff is interesting, can’t you write about you,” he replied. “Maybe something that would be useful for people working with images.” Challenge accepted! Systems like Sanity wants to free your content from the specific page it happens to be sitting on, so that you can flow it through APIs. That way you can reuse your painstakingly crafted content anywhere you need it. So, what does this mean for images? Images...

New on Wufoo: Form Manager Beta, File Manager Beta, Entry Manager Beta

9Aug

By Chris CoyierNo Comments

CSS Tricks

New on Wufoo: Form Manager Beta, File Manager Beta, Entry Manager Beta

Wufoo really is firing on all cylinders lately! As you may know, I've been using Wufoo here on this site, and pretty much every other site I've ever made, to power the web forms for over a decade. That's a dang long time, which more than proves to me Wufoo is a form solution to trust. But also a product that improves! There is a new Form Manager, Entry Manager, and File Manager. Enable the beta stuff through the Account menu: The new Form Manager has a modern and clean look. You can tell this has been a massive cleanup and give them better place to iterate from: The Entry Manager is the biggest upgrade so far. You can view more entries at a time and navigate between entires much easier. I quite like how each entry takes you through kind of a ghosted version of the form itself, seeing exa...

10 Ways to Design Your Website for Mobile Speed

9Aug

By Carrie CousinsNo Comments

Web Tricks

10 Ways to Design Your Website for Mobile Speed

Have you performed a mobile speed test lately? How does your website rank? A slow website can turn mobile users away. Ideally, you want your design to load just as quickly for 3G users on phones as it does for desktop users on Wi-Fi. (That’s a pretty big ask, but there are things you can go to make it happen.) First, test your mobile speed. And then use these tips to improve your performance, and keep more users on your site longer. 1. Optimize Images One of the biggest problems with website speed is image size. Images can actually account for most of the downloaded data on a page and by formatting and saving images the right way, you can seriously cut down on the number of bytes required to serve this information. The easiest way to optimize images is to work with them before uplo...

Here’s how I recreated theory11’s login form — how would you do it?

8Aug

By Chris CoyierNo Comments

CSS Tricks

Here’s how I recreated theory11’s login form — how would you do it?

I ran across a super cool design for a login form over on the website theory11.com. Actually, the whole site and the products they make are incredibly well designed, there's just something about the clean and classy form that really got me. Plus, it just so happened that the CodePen Challenge that coming week was based on forms, so I took a few minutes and tried slapping it together. Fadeout vector pattern One of the things I thought was super classy was the way that vector wallpaper-eque pattern was not only there but faded out sort of radially. I didn't try to match the pattern exactly—I just grabbed one from the Assets Panel in CodePen and dropped it onto the <html> element as a SVG data URL background-image with a low fill-opacity. Then a radial gradient sits on top and creates ...

8Aug

By Chris CoyierNo Comments

CSS Tricks

Chrome 69

Chrome 69 is notable for us CSS developers: Conic gradients (i.e. background: conic-gradient(red, green, blue);): We've got lots of interesting articles about conic gradients here, and here's some use cases and a polyfill from Lea Verou. Logical box model properties: margin, padding, and border all get an upgrade for more use cases. Think of how we have margin-left now — the "left" part doesn't make much sense when we switch directions. Now, we'll have margin-inline-start for that. The full list is margin-{block,inline}-{start,end}, padding-{block,inline}-{start,end} and border-{block,inline}-{start,end}-{width,style,color}. Here's Rachel Andrew with Understanding Logical Properties And Values. Scroll snap points (i.e. scroll-snap-type: x mandatory;): What once required JavaScript interven...

Browser painting and considerations for web performance

8Aug

By Georgy MarchukNo Comments

CSS Tricks

Browser painting and considerations for web performance

The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here’s a simplified set of steps the browser goes through: Browser creates the DOM and CSSOM. Browser creates the render tree, where the DOM and styles from the CSSOM are taken into account (display: none elements are avoided). Browser computes the geometry of the layout and its elements based on the render tree. Browser paints pixel by pixel to create the visual representation we see on the screen. In this article, I'd like to focus on the last part: painting. All of those steps combined is a lot of work for a browser to do on load... and actually, not just on load, but any time the DOM (or CSSOM) is changed. That’s why many web develope...