Saturday, February 22

Author: phpInfo

Moving from NodeJS to Go
Web Tricks

Moving from NodeJS to Go

The approach of this article is this: You are a seasoned NodeJS developer, and are looking to learn a new language, but you don't want to go deep, just see how things compare with your current expertise, and then make a final decision. Chances are, you were initially a PHP developer, then you found your way into NodeJS and now you feel like you want to expand your expertise. Of course I might be wrong, but in this article we are going to look at some common patterns when working with NodeJS and how they compare in Go. Prerequisites Approach Since this is a NodeJS to Go comparison, we're going to focus on language constructs and servers. We'll break it down like this: Why Go The most common reasons to learn Go include the following: We see that Go has only 25 keywords, and this can give you...
XOXO 2018
CSS Tricks

XOXO 2018

There’s not much talk about frameworks here. There’s no shaming about old techniques, or jokes about JavaScript. There’s just a couple hundred people all around me laughing and smiling and watching talks about making things on the web and it all feels so fresh and new to me. Unlike many other conferences I’ve visited, these talks are somehow inclusive and rather feel, well, there’s no other word for it: inspiring. I’m sitting in a little room buried underneath the Veterans Memorial Coliseum in Portland and I’m here for my third XOXO. And I can’t stop smiling. Although the festival is not entirely focused on coding and front-end development, there are a lot of developers here that make art on the web for fun. From Jenn Schiffer’s pixel art to Monica Dinculescu’s emoji projects and Nicole He...
Uber Unveils Simple New Rebrand
Web Tricks

Uber Unveils Simple New Rebrand

A little less than three years ago, Uber rebranded as the cab-service of choice for dystopian sci-fi pac-man fans. It was a move reportedly intended to recast the startup as the choice of every day people; it actually stripped the brand of all personal connections. This week, a little less than three years longer than it should have waited, Uber have unveiled a far more coherent, far more appealing identity. Designed by the “Uber Brand Experience” team alongside Wolff Olins, the rebrand does an excellent job of correcting the obvious deficiencies in the previous identity. As a corporation—they’re really no longer a startup—Uber is globally recognized; from name-drops in Netflix series, to street signs in Rome (mis)informing potential customers of heavy fines for using the service, you’ll...
CSS Tricks

What’s the difference between ./dogs.html and /dogs.html?

They are both URL paths. They have different names, though. <!-- root-relative --> <a href="./dogs.html">Dogs</a> <!-- absolute --> <a href="/dogs.html">Dogs</a> There are also fully-qualified URLs that would be like: <!-- fully qualified --> <a href="https://website.com/dogs.html">Dogs</a> Fully-qualified URL's are pretty obvious in what they do — that link takes you to that exact place. So, let's look those first two examples again. Say you have a directory structure like this on your site: public/ ├── index.html └── animals/ ├── cats.html └── dogs.html If you put a link on cats.html that links to /dogs.html (an "absolute" path), it's going to 404 — there is no dogs.html at the base/root level of this site! The / at the beg...
CSS Tricks

Visual. Intuitive. Unlike Anything Else.

(This is a sponsored post.)This team management tool is exceptionally suitable for any industry sector and by any sized team. monday.com will perfectly serve a team of two or a team of hundreds spread around the globe, and it can manage multiple projects at once. monday.com promotes effortless collaboration and transparency, it's "cheetah fast," it displays status in as many as 20 different colors, and its status board can be customized to fit your needs and your workflow. It serves as an excellent alternative to having to force fit your work to meet the demands of your project management tools or systems. Start Free Trial Direct Link to Article — PermalinkThe post Visual. Intuitive. Unlike Anything Else. appeared first on CSS-Tricks. Source: CSS-tricks.com
Smashing Book 6 Is Here: New Frontiers In Web Design
Web Tricks

Smashing Book 6 Is Here: New Frontiers In Web Design

Smashing Book 6 Is Here: New Frontiers In Web DesignSmashing Book 6 Is Here: New Frontiers In Web Design Vitaly Friedman 2018-09-13T13:25:00+02:00 2018-09-13T21:39:43+00:00 Imagine you were living in a perfect world. A world where everybody has fast, stable and unthrottled connections, reliable and powerful devices, exquisite screens, and capable, resilient browsers. The screens are diverse in size and pixel density, yet our interfaces adapt to varying conditions swiftly and seamlessly. What a glorious time for all of us — designers, developers, senior Webpack configurators and everybody in-between — to be alive, wouldn’t you agree? Well, we all know that the ...
30 Tools and Services That Boost Productivity
Web Tricks

30 Tools and Services That Boost Productivity

The market is overcrowded with web tools and services, today it’s easy to launch your own product and everybody is playing the game. It’s good to have competition but some of these solutions are far from being excellent in terms of functionality, safety, and support, but the pricing is the same as premium solutions, so it’s hard to judge which to use. Testing them all, and picking the best takes time and money. That’s why we’ve handpicked a collection of excellent web tools and services from different fields: logo and website builders, analytics and feedback, landing page creators, and much more. Check these 30 tools and services that will boost productivity. 1. Tailor Social – The Smarter Social Media Management Tool Tailor Social, gives you the tools to take your social media to the nex...
Styling Broken Images
Web Tricks

Styling Broken Images

Images should add that extra touch of beauty to your site. But what happens when the image fails to load? You end up with this annoying looking icon: Nobody want this on their website. Luckily, there's a fall back option that will make our page retain it's pretty look. Let's get started with styling broken images. Getting Started Now how do we create a custom style for our broken images? Before jumping into styling a broken image we first need to understand a few things about the <img> tag. Regular typography styles : These styles are applied to the alternate text (alt). It only shows up when the image is broken. If the image happens to load as expected then the alternate text and its styling will be ignored altogether. This doesn't mean we wasted our time to style it, since we actu...
CSS Tricks

Updating a CSS Variable with JavaScript

Here's a CSS variable (formally called a "CSS custom property"): :root { --mouse-x: 0px; --mouse-y: 0px; } Perhaps you use them to set a position: .mover { left: var(--mouse-x); top: var(--mouse-y); } To update those values from JavaScript, you'd: let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); }); That's all. Source: CSS-tricks.com
CSS Tricks

Introducing Trashy.css

Trashy.css: The throwaway CSS library with no class   Why throwaway? Well, it's not really meant to be a fully fledged, production-ready style framework. Rather, it's like training wheels for document semantics, with some bumper lanes (think: bowling) to keep you on the right track. It's part of our ongoing effort at TandemSeven to promote code literacy throughout our organization. As more of our UX designers are beginning to share responsibility for the accessibility and semantics of a project, it makes sense that we would build in such a way that allows UX and development to be more collaborative. There are four main aspects to Trashy. Trashy: "Basic" First is the base trashy.css file, which applies a passably basic look and feel to the majority of common HTML elements...
CSS Tricks

The Low Hanging Fruit of Web Performance

I kicked off a really poppin' Twitter thread the other day: What are the LOWEST hanging fruit of web performance? Nothing fancy, anyone can do, big impact. Gzip. Optimize stuff. Reduce requests... What are other big ones? — Chris Coyier (@chriscoyier) August 17, 2018 So, I decided to round up all the ideas (both my own and yours) around that in a post over on the Media Temple blog. These are the things we dive into in that post: Reduce Requests Optimize Assets Make sure you’re gzipping Make sure you’re browser caching Use a CDN Lazy Load and Defer Loading of Things Use responsive images (or at least use reasonable sizes) Mind Your Fonts Good Hosting / HTTP2 / PHP7 Turbolinks Direct Link to Article — PermalinkThe post The Low Hanging Fruit of Web Performance appeared first on CSS-Tricks...
Web Tricks

The Importance Of Manual Accessibility Testing

The Importance Of Manual Accessibility TestingThe Importance Of Manual Accessibility Testing Eric Bailey 2018-09-12T13:30:55+02:00 2018-09-12T12:04:44+00:00 Earlier this year, a man drove his car into a lake after following directions from a smartphone app that helps drivers navigate by issuing turn-by-turn directions. Unfortunately, the app’s programming did not include instructions to avoid roads that turn into boat launches. From the perspective of the app, it did exactly what it was programmed to do, i.e. to find the most optimal route from point A to point B given the information made available to it. From the perspective of the man, it failed him by not ...
How to Recover Abandoned ECommerce Carts
Web Tricks

How to Recover Abandoned ECommerce Carts


If WordPress is the world’s favorite blogging platform, then WooCommerce is surely the most popular e-commerce solution available. WooCommerce is currently leading the WordPress e-commerce market and in popularity exceeds its nearest rivals—Shopify and Magento—roughly 4 times over. In this post we’ll learn how to capture and recover abandoned shopping carts in WooCommerce and how to create a successful abandoned cart recovery email. But before we dive in, let’s quickly look at what cart abandonment is, and how we can reduce it in the first instance. What is Shopping Cart Abandonment? Shopping cart abandonment is an e-commerce term that is used to define the action when a visitor adds items to their shopping cart and then decides to leave the website without completing a purchase—they li...
Web Tricks

Javascript's three dots ( … ): Spread vs rest operators

Javascript's ECMA6 came out with some cool new features; ... is one of these new Javascript functionalities. It can be used in two different ways; as a spread operator OR as a rest parameter. Rest parameter: collects all remaining elements into an array. Spread operator: allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements. In this article we will look into these two ways of using ...; keeping it short and sweet as usual. Enjoy! Rest parameters From the definition we saw earlier, rest parameters collect all the remaining elements into an array. This allows us to do really neat function definitions. Let's see how we put them to use. function add(x, y) { return x + y; } add(1, 2, 3, 4, 5) // returns 3 The above function call returns 3, this is becau...
Web Tricks

Going From ES5 to ES6 (Solution to Code Challenge #13)

Last week on the code challenge #13 we looked at converting sample code in ES5 to even simpler and more readable code in ES6. Yet to take the challenge? You can check it out here. In this post, we shall solve the challenge. Awesome entries for the challenge can be found in the comment section of the post, on Twitter using the hashtag #ScotchChallenge and on the Spectrum forum. The Challenge No doubt that the ES6 version of JavaScript came with tons of amazing and useful features making web development with JavaScript even simpler and less error-prone. In this challenge, we are presented with a set of 5 different code pieces requiring a re-write using a key ES6 feature. We would go over these individual challenges and the solution for each shortly. However, we were provided with boilerplat...