Monday, December 23
More Unicode Patterns
CSS Tricks

More Unicode Patterns

Creating is the most intense excitement one can come to know. —Anni Albers, On Designing I recently wrote a post — that was shared here on CSS-Tricks — where I looked at ways to use Unicode characters to create interesting (and random) patterns. Since then, I’ve continued to seek new characters to build new patterns. I even borrowed a book about Unicode from a local library. (That's a really thick book, by the way.) It's all up to your imagination to see the possible patterns a Unicode character can make. Although not all characters are good as patterns, the process is a good exercise for me. And, aside from Unicode itself, the methods to build the patterns may not be so obvious. It usually takes a lot of inspiration and trial and error to come up with new ones. More tiling There are ac...
CSS Tricks

​Truly understand your site visitors’ behavior

(This is a sponsored post.)Hotjar is a quick and easy way to truly understand your visitors and identify opportunities for improvement and growth. Try the all-in-one analytics and feedback tool for free. Direct Link to Article — PermalinkThe post ​Truly understand your site visitors’ behavior appeared first on CSS-Tricks. Source: CSS-tricks.com
Smashing Book 6 Excerpt: Bringing Personality Back To The Web
Web Tricks

Smashing Book 6 Excerpt: Bringing Personality Back To The Web

Smashing Book 6 Excerpt: Bringing Personality Back To The WebSmashing Book 6 Excerpt: Bringing Personality Back To The Web Vitaly Friedman 2018-06-14T14:40:27+02:00 2018-06-14T17:15:49+00:00 Generic web layouts have become somewhat of a misnomer in conversations circling around web design these days. We’re bored and slightly annoyed by how predictable and uninspired most web experiences have become. Not without reason, though. Every single landing page seems to be a twin of pretty much every other web page. In the header, a compelling hero image with a short main heading is followed by a lengthier subheading. Beneath them, uniform blocks of media objects are a...
WWDC 2018 Diary Of An iOS Developer
Web Tricks

WWDC 2018 Diary Of An iOS Developer

WWDC 2018 Diary Of An iOS DeveloperWWDC 2018 Diary Of An iOS Developer Lou Franco 2018-06-14T13:45:32+02:00 2018-06-14T17:15:49+00:00 The traditional boundaries of summer in the US are Memorial and Labor Day, but iOS developers mark the summer by WWDC and the iPhone release. Even though the weather is cool and rainy this week in NYC, I’m in a summer mood and looking forward to the renewal that summer and WWDC promise. WWDC (Image source) (Large preview) It’s the morning of June 4th, and I’m reviewing my notes from WWDC 2017. Last year, I wrote that ARKit and Core ML were two of the big highlights. It was refreshing to see Apple focus o...
5 Simple Steps to Zero Conversions
Web Tricks

5 Simple Steps to Zero Conversions

Alright, so let me begin by addressing the title because there is a method to my madness: There are literally hundreds of articles out there with tips, tricks, and best practices when it comes to e-commerce; some are generic and some are more technical but they do cover most areas of interest. But how about the big no-nos of e-commerce? How can you be sure you won’t make a single sale today? Well, that’s why I’m here. I’ll go through a list of the biggest deal breakers and conversion killers that a store owner can implement to make sure their precious inventory will never reach the grubby hands of shoppers. Follow these tips and you won’t make a single sale… 1. The Store Platform That’s right, the platform is one of the biggest decisions in building a store that doesn’t sell anything. You...
Apache vs Nginx Performance: Optimization Techniques
PHP

Apache vs Nginx Performance: Optimization Techniques

Some years ago, the Apache Foundation's web server, known simply as "Apache", was so ubiquitous that it became synonymous with the term "web server". Its daemon process on Linux systems has the name httpd (meaning simply http process) --- and comes preinstalled in major Linux distributions. It was initially released in 1995, and, to quote Wikipedia, "it played a key role in the initial growth of the World Wide Web". It is still the most-used web server software according to W3techs. However, according to those reports which show some trends of the last decade and comparisons to other solutions, its market share is decreasing. The reports given by Netcraft and Builtwith differ a bit, but all agree on a trending decline of Apache's market share and the growth of Nginx. Nginx --- pronounced e...
What is Google Tag Manager Noscript?
Google Tag Manager

What is Google Tag Manager Noscript?

After you create a new Google Tag Manager container, the interface asks to place two codes on your website, one in the <head> and the after right after the opening <body> tag. But have you ever wondered why are there two codes instead of one? Usually tracking tools, like Google Analytics, Mixpanel, or others require to place one code on all pages, so how come GTM is different? In this blog post, I’ll explain what Google Tag Manager Noscript is and why you might need it (or not, after all).   Two codes This view looks familiar, doesn’t it? The top one ( a.k.a. the <script> part) is the essence of the Google Tag Manager. The higher you place it in the code, the sooner it will load, therefore your marketing and tracking tags will capture the data sooner. As a result, your ...
Web Tricks

The Next Scotch v8: How We're Getting to 1s Load Times

You might be wondering, "are they redesigning again?!" Whenever I'm asked that, my answer is always a resounding "OF COURSE!" Sure the Scotch site is currently good enough, but there's always ways to improve. This next version is what v7 was supposed to become. Some of the main features Fully cached pages (JAM stack-ish) Better discoverability (real-time search everywhere) Clearer site sections (Guides/Courses/Posts always confused people) More video content More community involvement In this post, I'll dive into some of the main technical changes and reasons why. Launch is impending (tm) (copyright). The Problems with Scotch v7 Before we can design something new, we need to know where we come from. We have to identify problems and iterate on them (or blow them up). Otherwise, we'd end up...
Understanding the Almighty Reducer
CSS Tricks

Understanding the Almighty Reducer

I was recently mentoring someone who had trouble with the .reduce() method in JavaScript. Namely, how you get from this: const nums = [1, 2, 3] let value = 0 for (let i = 0; i < nums.length; i++) { value += nums[i] } ...to this: const nums = [1, 2, 3] const value = nums.reduce((ac, next) => ac + next, 0) They are functionally equivalent and they both sum up all the numbers in the array, but there is a bit of paradigm shift between them. Let's explore reducers for a moment because they're powerful, and important to have in your programming toolbox. There are literally hundreds of other articles on reducers out there, and I'll link up some of my favorites at the end. What is a reducer? The first and most important thing to understand about a reducer is that it will always only retu...
Your Brain on Front-End Development
CSS Tricks

Your Brain on Front-End Development

Part of the job of being a front-end developer is applying different techniques and technologies to pull of the desired UI and UX. Perhaps you work with a design team and implement their designs. I know when I look at a design (heck, even if I know I'm not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task. Let's take a look at what I mean. Check out this lovely Dribbble shot for a Food Recipe Website from Riko Sapto Dimo. It's a very appealing design, and there is loads in there to think about from a front-end web design and development standpoint. We're going to mostly be talking about design pattern choices and HTML/CSS tech choices. There is much more to the job of front-end development. Accessibility! Performance! Se...
​Download 10 Free Images From Adobe Stock
Web Tricks

​Download 10 Free Images From Adobe Stock

It’s been just three years since Adobe unveiled Adobe Stock, and in that time the service has grown from 40 million photos and vectors, to over 90 million assets ranging from professional photographs, to high-quality 3D files; that’s over 45,000 new assets uploaded every day. The bitmaps, vectors, videos, 3D models, and design templates offer both designers and businesses a simple way of employing art-direction as a sales tool, without the associated cost. Professional-Grade Assets In a world of competitive marketing, social media, and 24 hour advertising, successful brands need shots that aren’t just well-taken, but well produced, with post-production in Adobe Lightroom or Photoshop as a minimum requirement. As the devices we view the web on become more sophisticated, the need for profes...
Meet Smashing Book 6: New Frontiers In Web Design
Web Tricks

Meet Smashing Book 6: New Frontiers In Web Design

Meet Smashing Book 6: New Frontiers In Web DesignMeet Smashing Book 6: New Frontiers In Web Design Vitaly Friedman 2018-06-13T12:00:09+02:00 2018-06-13T16:58:27+00:00 Let’s make sense of the front-end and UX madness. Meet Smashing Book 6 with everything from design systems to accessible single-page apps, CSS Custom Properties, Grid, Service Workers, performance patterns, AR/VR, conversational UIs & responsive art direction. And you can add your name into the book, too. About the book ↓.Smashing Book 6 is dedicated to the challenges and headaches that we are facing today, and how to resolve them. No chit-chat, no theory: only practical, useful advice applica...
Making Your Website Faster and Safer with Cloudflare
PHP

Making Your Website Faster and Safer with Cloudflare

Cloudflare is an industry leader in the content-delivery space, reducing load and speeding up millions of websites. What is peculiar about this provider is that it didn't start as speed-up/performance tool, but was instead born from Project Honeypot, which was conceived as a spam and hacking protection service. To this day, this is one of Cloudflare's major selling points: DDoS detection and protection. Their algorithms take note of visitors' IP addresses, payloads, resources requested, and request frequency to detect malicious visitors. Because it sits as a proxy between websites and all incoming traffic, Cloudflare is able to reduce strain on servers significantly, so much so that DDoS attacks won't even reach the origin websites, as explained in this introduction. Cloudflare also provi...
CSS Tricks

A Quick Roundup of Recent React Chatter

Like many, many others, I'm in the pool of leveling up my JavaScript skills and learning how to put React to use. That's why Brad Frost resonated with me when he posted My Struggle to Learn React." As Brad does, he clearly outlines his struggles point-by-point: I have invested enough time learning it React and ES6 travel together Syntax and conventions Getting lost in this-land I haven’t found sample projects or tutorials that match how i tend to work I'm less competent at JS than HTML and CSS It seems that Brad's struggles resonated with others as well, inspiring empathy and help from the community. For example, Kevin Ball touches on the second and third frustrations by supplying a distinction between React and ES6 and examples of the syntax and conventions of each: For each feature, I s...
Web Tricks

Build a Health Tracking App with React, GraphQL, and User Authentication

I think you’ll like the story I’m about to tell you. I’m going to show you how to build a GraphQL API with Vesper framework, TypeORM, and MySQL. These are Node frameworks, and I’ll use TypeScript for the language. For the client, I’ll use React, reactstrap, and Apollo Client to talk to the API. Once you have this environment working, and you add secure user authentication, I believe you’ll love the experience! Why focus on secure authentication? Well, aside from the fact that I work for Okta, I think we can all agree that pretty much every application depends upon a secure identity management system. For most developers who are building React apps, there’s a decision to be made between rolling your own authentication/authorization or plugging in a service like Okta. Before I dive into bui...