Saturday, February 22

Author: phpInfo

Twenty Years as a Freelance Web Developer: Wisdom Gained and Lessons Learned
18Sep By phpInfoNo Comments
CSS Tricks

Twenty Years as a Freelance Web Developer: Wisdom Gained and Lessons Learned

In the summer of 1998, when President Clinton fended off allegations of sexual impropriety and Donald Trump filmed a cameo in a Woody Allen movie, I embarked on my career as a freelance web developer. Twenty years and more than 300 websites later, I’m still at it—always working on my own and always from home. Over that time, I’ve had the pleasure of partnering with many prominent advertising agencies and boutique design firms as well as scores of local businesses and individuals. Those interested in making the switch to freelancing have often asked me for advice, and I’ve been happy to help with whatever words of wisdom I can provide. This article is a distillation of much of that. And it may prove helpful not only to developers and programmers who wish to freelance, but also designers, pr...
Read More
Fixed Elements And Overlays In XD: Incredibly Easy And Fun Methods For Your Prototypes
18Sep By phpInfoNo Comments
Web Tricks

Fixed Elements And Overlays In XD: Incredibly Easy And Fun Methods For Your Prototypes

Fixed Elements And Overlays In XD: Incredibly Easy And Fun Methods For Your PrototypesFixed Elements And Overlays In XD: Incredibly Easy And Fun Methods For Your Prototypes Manuela Langella 2018-09-18T12:30:32+02:00 2018-09-18T10:47:33+00:00 (This article is kindly sponsored by Adobe.) A fixed element is an object you set to a fixed position on the artboard, allowing other items to scroll underneath. This way, you get a realistic simulation of scrolling on desktop and mobile. With the new overlay feature, you can simulate interactions such as lightbox effects and submenus. How do famous brands use fixed elements and overlays? Well, let’s take a look at some ex...
Read More
18Sep By phpInfoNo Comments
Web Tricks

5 Tips to Write Better Conditionals in JavaScript

When working with JavaScript, we deal a lot with conditionals, here are the 5 tips for you to write better / cleaner conditionals. 1. Use Array.includes for Multiple Criteria Let's take a look at the example below: // condition function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } At first glance, the above example looks good. However, what if we get more red fruits, say cherry and cranberries? Are we going to extend the statement with more || ? We can rewrite the conditional above by using Array.includes (Array.includes) function test(fruit) { // extract conditions to array const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; if (redFruits.includes(fruit)) { console.log('red'); } } We extract the red fruits (co...
Read More
17Sep By phpInfoNo Comments
CSS Tricks

What makes a good front-end developer?

Defining what a front-end developer is and what they do is tough as it is. So, how do we set the bar for what makes for a good front-end developer? Here's what a few folks have to say on the topic. I’ll argue that front-end developers need to master four different skills. Empathy Code Design Communication Zell Liew Front-End Developers, having learnt HTML, CSS and JS, are forced to take functionality into account when creating user experiences or making sure that the two disciplines work as one from a development perspective. They become all-rounders, having to understand what is actually happening between the AJAX data and the PHP file that’s sending off a mail or returning errors. Daine Mawer In my opinion, what defines a good front-end developer is one that has skilled knowledge of H...
Read More
17Sep By phpInfoNo Comments
CSS Tricks

What makes a good front-end developer?

Defining what a front-end developer is and what they do is tough as it is. So, how do we set the bar for what makes for a good front-end developer? Here's what a few folks have to say on the topic. I’ll argue that front-end developers need to master four different skills. Empathy Code Design Communication Zell Liew Front-End Developers, having learnt HTML, CSS and JS, are forced to take functionality into account when creating user experiences or making sure that the two disciplines work as one from a development perspective. They become all-rounders, having to understand what is actually happening between the AJAX data and the PHP file that’s sending off a mail or returning errors. Daine Mawer In my opinion, what defines a good front-end developer is one that has skilled knowledge of H...
Read More
Google Tag Manager Click Tracking: All You Need to Know
17Sep By phpInfoNo Comments
Google Tag Manager

Google Tag Manager Click Tracking: All You Need to Know

As a feature, click tracking in Google Tag Manager is a perfect bait for a beginner. It’s fairly easy to get started: read one or two blog posts, maybe watch a video and done! You can track buttons, outbound link clicks, etc. However, what I’ve noticed among GTM beginners is that they do not fully realize the click tracking configuration flow in GTM and why is it necessary to complete one thing or another. Moreover, intermediate Google Tag Manager users are not always aware of some more serious click tracking techniques that open entirely new possibilities in tag management. That’s why I’ve decided to publish this (once again) extended/definitive/you-name-it guide on Google Tag Manager click tracking, covering not only basics but some advanced stuff as well.   Table of Contents #1. Why cl...
Read More
17Sep By phpInfoNo Comments
CSS Tricks

Aspect Ratio Media Elements and intrinsicsize

If you need an aspect-ratio sized <div> (or any element that can have children), you can do it. Perhaps the cleanest way is a custom-property-sized pseudo-element that pushes the correct minimum height through padding-based-on-width. But media elements like <img> don't have children. The <video> tag isn't self-closing, but when it is supported (almost always), the content of it is replaced with a shadow DOM you don't control. Besides, these are the only two elements that "size to an external resource." So, how do you enforce aspect ratio on them when using a variable width like 100% or 75vw? Well, once they load, they will have their natural aspect ratio, so that's nice. But it also means they don't know the height while they are loading and it may cause performance jank...
Read More
Flexbox: How Big Is That Flexible Box?
17Sep By phpInfoNo Comments
Web Tricks

Flexbox: How Big Is That Flexible Box?

Flexbox: How Big Is That Flexible Box?Flexbox: How Big Is That Flexible Box? Rachel Andrew 2018-09-17T13:30:30+02:00 2018-09-17T11:38:35+00:00 This is the third part of my series on Flexbox. In the past two articles, we have looked at what happens when you create a flex container and explored alignment as it works in Flexbox. This time we are going to take a look at sizing. How do we control the size of our flex items, and what choices is the browser making when it controls the size? Initial Display Of Flex Items If I have a set of items, which have variable lengths of content inside, and set their parent to display: flex, the items will display as a row and ...
Read More
Loving & Hating the Hamburger Icon
17Sep By phpInfoNo Comments
Web Tricks

Loving & Hating the Hamburger Icon

I love the hamburger menu. I hate the hamburger menu. I am constantly contradicting myself about this tiny website element; whether I think it works beautifully…or just makes a mess. And I’m not alone. While this icon has exploded in popularity, there’s still significant debate as to whether it is the right choice for tucking navigation menus into websites. It’s a debate I have with myself (and team) every time we approach a new project as well. Because while I love the simplicity of the hamburger menu and the clean canvas it provides, there are some lurking usability issues that just keep nagging me. That’s why I have a distinct love-hate relationship with the hamburger menu. Love: Clean Design Canvas The extra space provided by using a hamburger menu icon can create a cleaner, sleeker, ...
Read More
Popular Design News of the Week: September 10, 2018 – September 16, 2018
16Sep By phpInfoNo Comments
Web Tricks

Popular Design News of the Week: September 10, 2018 – September 16, 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. Chrome’s New Design – A UX Perspective   This is What the Apple iPhone 11 Could Look like   Trendy Palettes – Free and Open Collection of Color Palettes, Updated Daily   Taking Owner...
Read More
14Sep By phpInfoNo Comments
CSS Tricks

Removing jQuery from GitHub.com frontend

Here’s how and why the team at GitHub has slowly been deprecating jQuery from their codebase: We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling from jQuery until we were able to completely remove the library. In this post, we will explain a bit of history of how we started depending on jQuery in the first place, how we realized when it was no longer needed, and point out that—instead of replacing it with another library or framework—we were able to achieve everything that we needed using standard browser APIs. The team explores how using tools like eslint-plugin-jquery discourages developers at GitHub from using jQuery, but the team a...
Read More
Infographic: The Future of E-Commerce
14Sep By phpInfoNo Comments
Web Tricks

Infographic: The Future of E-Commerce

Worldwide, retail e-commerce sales totaled $2.29 trillion last year. By the end of this year they’ll have reached $2.8 trillion. If the trend continues apace, e-commerce sales will reach a whopping $4.479 trillion by 2021. The message is clear: Consumers love the convenience of e-commerce; the reduced prices compared to real world stores, with their real world overheads; the greater range of products. With a simple click, or tap, you can buy or subscribe to almost any product or service. Never has impulse buying been so easy. It’s clear that e-commerce will continue to grow as a sector. But what exactly will it look like in the coming months and years? Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5! Source p img {display...
Read More
HTML elements, unite! The Voltron-like powers of combining elements.
14Sep By phpInfoNo Comments
CSS Tricks

HTML elements, unite! The Voltron-like powers of combining elements.

Guides, resources and discussions about Semantic HTML are often focused around specific elements, like a heading, or a sectioning element, or a list. It’s not often that we talk specifically about how we can combine HTML elements to increase their effectiveness. Normally, when we introduce HTML, we talk about how it is used to apply meaning to content in a document, and we do this by using examples like: "Is it a paragraph?" "Is it a heading?" "Is it a numbered list" "Is it a button" We use these examples because they are easy to understand — it’s a single piece or chunk of the same content that needs to be represented in a particular way. This is useful, but it only scratches the surface of how we can use and combine elements to provide more context and meaning. You remember Voltron, rig...
Read More
14Sep By phpInfoNo Comments
CSS Tricks

Why Designers Don’t Want to Think When They Read

We've all seen articles like "The Top 5 Ways To Fix Your Sign Up Flow and Get On With Your Life." Articles like this aren't wrong or bad, they are just shallow and a bit junk food-y and BuzzFeed-y. Of course, a designer's actual job is complicated, nuanced, and difficult. But deep dives into all that are far less common. Khoi Vinh has been writing about this and points to some heavy self-reflection from Fabricio Teixeira and Caio Braga, publishers of the very popular UX Collective. It’s clear that the currency of design discourse is really concerned with the “how” of design, not the “why” of it. As Teixeira and Braga write: While designers tend to be skeptical of magic formulas—we’re decidedly suspicious of self-help gurus, magic diets, or miraculous career advice—we have a surprisingly ...
Read More
14Sep By phpInfoNo Comments
Web Tricks

Monthly Web Development Update 9/2018: Native Lazy Loading And Imaginary Work

Monthly Web Development Update 9/2018: Native Lazy Loading And Imaginary WorkMonthly Web Development Update 9/2018: Native Lazy Loading And Imaginary Work Anselm Hannemann 2018-09-14T14:50:19+02:00 2018-09-14T13:06:51+00:00 It’s an interesting concept to compare JavaScript with CO2 and yet a very valid one. Alex Russel who works for the Chrome team and has a lot of insights into the current state of the web says that using too much JavaScript or using it exclusively (without progressive enhancement/graceful degradation) will have the same effect as too much CO2 for the ecosystem on planet Earth — the ecosystem will fall apart. And just like we need a certain am...
Read More