PHPInfo

25Jun

By Jon KantnerNo Comments

CSS Tricks

Drawing Images with CSS Gradients

What I mean by "CSS images" is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Some techniques I’ve seen used are tinkering with border radii, box shadows, and sometimes clip-path. You can find a lot of great examples if you search daily css images" on CodePen. I drew some myself, including this Infinity Gauntlet, but in one element with only backgrounds and minimal use of other properties. Let’s take a look at how you can create CSS images that way yourself. The Method Understanding the shorthand background syntax as well as how CSS gradients work is practically all you need to draw anything in one element. As a review, the arguments are as follows: background: <'background-co...

25Jun

By No Comments

Web Tricks

What Newsletters Should Designers And Developers Be Subscribing To?

What Newsletters Should Designers And Developers Be Subscribing To?What Newsletters Should Designers And Developers Be Subscribing To? Ricky Onsman 2018-06-25T14:00:48+02:00 2018-07-10T16:18:00+00:00 We put out the call on Twitter and Facebook: “What email newsletters are you following these days?” The task of compiling your (many, many) responses has fallen to me. I should disclose that I have a vested interest in that I currently edit a bi-weekly email newsletter for a conference organizer, UX Australia. In fact, over the years, I’ve edited dozens of email newsletters — some more successful than others. Anyway, for the purpose of this article, we need to ma...

25Jun

By Carrie CousinsNo Comments

Web Tricks

Essential Design Trends, July 2018

With the heat of summer comes a little bit of a design slowdown, but there are still plenty of projects worth your attention. Most of the major design trends happening right now feature structural components of website design, such a interactive layers or multiple columns of text. And there’s also this “little” international event that’s having some influence as well – the soccer World Cup. Here’s what’s trending in design this month: 1. Interactive Layers Designers are constantly trying to develop ways to keep users interested in the design for longer period of time. Using more interactivity is one way to do that. Pairing that interactivity with layered effects is another way to do it that has high visual interest. (It’s like putting the best of the visuals and interaction together.) Muc...

24Jun

By Chris CoyierNo Comments

CSS Tricks

Users DO Change Font Size

Evan Minto: The question was “How many users browse the main Internet Archive site with a default font size other than the common value of 16 pixels?” By knowing this, we would determine how many users would be affected by sizing with relative units like rems/ems. Using the methodology I describe below, we found that the answer is 3.08% of our users. So if you set type in pixels, and your traffic is anything like the Internet Archive's, 3% of your users won't have their explicitly-asked-for font-size alteration accommodated. It's true. I made two little reduced test cases. First I left the default medium font-size preference on and set one with pixels and one with ems and sized them to match. Then bumped up the preference to large, and only the ems changed, the pixel-set one stays the s...

Popular Design News of the Week: June 18, 2018 – June 24, 2018

24Jun

By Cameron ChapmanNo Comments

Web Tricks

Popular Design News of the Week: June 18, 2018 – June 24, 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. 8 Brilliant Blogs Run by Ecommerce Stores (And What You Can Learn from Them) The Ultimate ECommerce Website Design Guide How to Design a High Converting Email Newsletter Lesson...

23Jun

By WalterNo Comments

Web Tricks

Comics of the Week #436

Every week we feature a set of comics created exclusively for WDD. The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers. These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today. So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons. Feel free to leave your comments and suggestions below as well as any related stories of your own… Retro look Multitasker Exploding head Can you relate to these situations? Please share your funny stories and comments below… Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5! Source...

22Jun

By Claus ColloseusNo Comments

CSS Tricks

Animate Calligraphy with SVG

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this: I have something that is sort of a line, but because it has varying brush widths, in SVG it is defined as the fill of a path. How can this "brush" be animated? In short: How do you animate calligraphy? A mask path covers the calligraphic brushThe basic technique for this is relatively simple: draw a second (smooth) path on top of the calligraphy so that it follows the brush line and then choose the stroke width in such a way that it covers the calligraphy everywhere. This path on top will be used as a mask fo...

Improving Performance Perception with Pingdom and GTmetrix

22Jun

By Tonino JankovNo Comments

PHP

Improving Performance Perception with Pingdom and GTmetrix

This article is part of a series on building a sample application --- a multi-image gallery blog --- for performance benchmarking and optimizations. (View the repo here.) In this article, we'll analyze our gallery application using the tools we explained in the previous guide, and we'll look at possible ways to further improve its performance. As per the previous post, please set up Ngrok and pipe to the locally hosted app through it, or host the app on a demo server of your own. This static URL will enable us to test our app with external tools like GTmetrix and Pingdom Tools. We went and scanned our website with GTmetrix to see how we can improve it. We see that results, albeit not catastrophically bad, still have room for improvement. The first tab --- PageSpeed --- contains a list of ...

22Jun

By Ryan GoldmanNo Comments

Web Tricks

What the heck is "Script error?"

If you’ve done any work with the JavaScript onerror event before, you’ve probably come across the following: "Script error." “Script error” is what browsers send to the onerror callback when an error originates from a JavaScript file served from a different origin (different domain, port, or protocol). It’s painful because, even though there’s an error occurring, you don’t know what the error is, nor from which code it’s originating. And that’s the whole purpose of window.onerror — getting insight into uncaught errors in your application. The cause: cross-origin scripts To better understand what’s going on, consider the following example HTML document, hypothetically served from http://example.com/test: <!doctype html> <html> <head> <title>example.com/test</tit...

22Jun

By Valeri KarpovNo Comments

Web Tricks

Getting Started With Google Cloud Functions and MongoDB

Serverless architectures are becoming increasingly popular, and with good reason. In my experience, container-based orchestration frameworks have a steep learning curve and are overkill for most consumer-facing companies. With FaaS architectures, like AWS Lambda and Azure Functions, in theory the only devops you need is bundling and uploading your app. This article will walk you through setting up a Google Cloud Function in Node.js that connects to MongoDB. However, one major limitation of stateless functions is the need to establish a separate database connection every time the stateless function runs, which incurs a major performance penalty. Unfortunately, I haven't been able to figure out how to reuse a database connection in Google Cloud Functions, the trick that works for IBM Cloud,...

22Jun

By Sarah DrasnerNo Comments

CSS Tricks

Balancing Time

I first wrote this post four years ago. I put it on a blog that no longer exists. Funnily enough, I still refer to it myself, so I figured it might be best served in a place where other people can see it. I've made only a few minor tweaks to the original content. A lot about how I work has changed, but most of these pieces have not. I work on many personal projects concurrently. I love doing this, as it keeps me in a constant mode of creation. At the same time, it can become a delicate balancing act. In order to keep everything moving forward, I have set up some guidelines for myself and I'm going to share them with you in this post. However, it's more important to understand what works best for you and consider the sage words of Thich Nhat Hahn: “Don’t follow someone else’s map.” What w...

Advanced Document Conversions with Filestack

22Jun

By Chris CoyierNo Comments

CSS Tricks

Advanced Document Conversions with Filestack

You might know Filestack from being an incredible service to add file uploading, storage, and management to your own web apps. There is another thing Filestack can do for you: convert documents into different formats. For one thing, it can manipulate documents. Take images. Perhaps you would like to offer some image manipulation for your users uploaded images, like cropping and rotation. That's a common feature for apps that offer avatar uploading. With Filestack, you got it. It's great to be able to have that kind of functionality without having to build it yourself. You almost surely aren't in the avatar cropping business, you're in your own unique business that just happens to have users with avatars. I've said it before: But let's up the ante a little bit here. What if you need to ...

Why Altruism Is The Ace To Get Your Dream Design Job

22Jun

By No Comments

Web Tricks

Why Altruism Is The Ace To Get Your Dream Design Job

Why Altruism Is The Ace To Get Your Dream Design JobWhy Altruism Is The Ace To Get Your Dream Design Job Andree Huk 2018-06-22T14:30:38+02:00 2018-07-10T16:18:00+00:00 Hunting for a design job can be daunting but it does not need to be. In fact, the most telling predictor of how user-focused a designer you are, is how you see the company you apply to. In this article, I’d like to outlines uncommon tactics and crucial aspects that can help any designer. In order to get your dream job, I’ll discuss in detail on how to plan and execute your outreach to recruiters or hiring managers. Writing a stellar CV by analyzing job descriptions or calculating how many applic...

22Jun

By Kallie FalandaysNo Comments

Web Tricks

6 Ways to Collaborate for Better Design

Your team is all spread out— your designers are working from Lisbon, your content team is in New York, and your project manager is in Argentina. How do you create a system that makes it simple to organize and plan large web projects? There is a trick to getting designers and copywriters to work together smoothly, and it’s called communication. But even simple communication will fail if you don’t have the correct processes in place. 1. Set Up a Project Management Foundation Before you begin collaborating, you’ll want to make sure you have an actual system set up. “I want to move forward, but I’m not sure what’s approved.” How often have you said that to your team? Some teams have a lot of fire in them. They like to dive right into the problem to find the solution, but that could cause a ...

22Jun

By William ImohNo Comments

Web Tricks

JavaScript Functional Programming (Solution to Code Challenge #11)

Tried the code challenge #11? In that, we delved into solving basic array problems using array methods such as map(), reduce(), filter() etc. You can find the awesome entries in the comment section of the post as well on Twitter using the hashtag #scotchchallenge. Also, you see some other fantastic submissions for the challenge if you check out the Scotch Slack Group as well as this Spectrum thread for the challenge. The Challenge Functional programming is a style in writing programs which utilizes functions and function evaluations to carry out computations. In this challenge, we were tasked with solving problems by manipulating given arrays in a base codepen. This challenge will be solved using native array methods to manipulate the given array. Methods are properties of a given data ty...