Web Tricks Archives - Page 25 of 27

4Jun

By phpInfoNo Comments

CSS Tricks, Web Tricks

Making Avengers ID Card In HTML And CSS

Let’s suppose Tony Stark would like to redesign the ID cards of the Avengers, and he needs our help to create them in HTML and CSS. So, how can we help? In this tutorial, we’ll be using Flexbox to create the desired layout while diving into nested flexboxes for some advanced layouts. We will also be using rounded as well as transparent borders to create sci-fi arcs in CSS, and then animating them by using CSS animations around the picture of the Avenger. Last but not least, we’ll be using the box-shadow and text-shadow properties to give our ID card a final sci-fi touch. By the end of the tutorial, we will build a sci-fi animated Avengers ID card, and also learn the basics of Flexbox, nested Flexbox, CSS animations, borders, shadows, and many other frequently used CSS properties...

4Jun

By Carrie CousinsNo Comments

Web Tricks

3 Essential Design Trends, June 2018

Sometimes the most fun part of looking at design trends is when you start to notice subtle shifts in trends that create new design patterns altogether. Each of the trends this month is an evolution of something that’s been pretty popular, with an interesting spin. Here’s what’s trending in design this month: 1. Full Screen Photo The oversized hero image gets even bigger with full-screen photo displays. The key element in this website design trend is that the home “screen” is stripped of other elements so that the photo fills the entire screen. There aren’t separate space for navigation or other elements outside the image area. All elements are actually contained within the image. This design concept works best with a great image. Only the best, most striking and interestin...

1Jun

By phpInfoNo Comments

Web Tricks

A Reference Guide For Typography In Mobile Web Design

With mobile taking a front seat in search, it's important that websites are designed in a way that prioritize the best experience possible for their users. While Google has brought attention to elements like pop-ups that might disrupt the mobile experience, what about something as seemingly simple as choice of typography? The answer to the typography question might seem simple enough: what works on desktop should work on mobile so long as it scales well. Right? While that would definitely make it a lot easier on web designers, that’s not necessarily the case. The problem in making that statement a decisive one is that there haven’t been a lot of studies done on the subject of mobile typography in recent years. So, what I intend to do today is give a brief summary of what it i...

3 SEO “Hacks” to Boost Your Website Ranking

1Jun

By Carrie CousinsNo Comments

Web Tricks

3 SEO “Hacks” to Boost Your Website Ranking

Looking to boost your search rankings? While nothing can help you reach an audience better than great content, there are simple habits that can help you boost search ranking and provide valuable information for users. And it doesn’t require a complete website overhaul or hiring an SEO expert. Here are three hacks to help you boost your website ranking and help more users find your website content. 1. Use Video and Transcription You might already know that video is a great way to engage with users on your website. From full-screen video headers to short clips to grab attention, moving images can provide information to users that still photos can’t. Video can be more than that as well. Use video for tutorials or how-to features to drive even more engagement. Often in webs...

31May

By Nicholas CerminaraNo Comments

CSS Tricks, Web Tricks

Build Multiple Stacking Sticky Sidebars with Pure CSS and Bootstrap 4

Making high performant, pure CSS sticky sidebars that stack with Bootstrap 4. This will be a quick and pretty cool tutorial on a neat trick on how to have multiple sticky sidebars that stack without using any JavaScript! I figured this out the other day brain storming ideas with @chrisoncode for the new Scotch website sidebar. As fun and cool as JavaScript is, it's just not as snappy and way more bloated than say a pure CSS implementation of stuff like this (which is one of our main goals for our Scotch.io redesign). In this tutorial I will discuss: What the heck I mean by this mouthful: "Multiple Stacking Sticky Sidebars. Reasons that you would want to do this. General beefs devs have with doing it with JavaScript or plugins. The technique with CSS3 (positio...

7 Tutorials and Tools to Get You Started With CSS Grid

31May

By Ezequiel BruniNo Comments

CSS Tricks, Web Tricks

7 Tutorials and Tools to Get You Started With CSS Grid

CSS Grid is here, people are starting to use it, and it’s even referenced by our industry’s latest official buzzword. I could go on about how it’s the future of web design and layout. I could wax lyrical about how anyone not using Grid will be left behind when the Rapture happens, and everybody on Wikipedia’s list of Internet pioneers will come back to take us to the great LAN party in the sky. Comcast (yes, all of them) won’t be invited. My point is that if you’ve been paying attention — if you’re reading this, you probably do — then you know that stuff already. But let’s just say that you’ve heard a lot of good things about CSS Grid, but haven’t had a chance to play with it, yet. Where do you start? You start here, and you click the links listed below. Tutorials Your ...

31May

By David MattockNo Comments

CSS Tricks, Web Tricks

The Best UK Animation or VFX Courses

The animation and VFX scene is growing everyday with almost all feature films now containing some clever CGI. Even the movies with no monsters or other worlds have cleverly swapped out landscapes and beautiful scenery usually changed or added after filming that you would never notice was not real. The United Kingdom has a booming scene with studios such as MPC , Framestore, Dneg, Passion Pictures and many more, even Industrial Light & Magic have set up shop in London while working on Star Wars. With artists from around the globe coming to the UK to work in an historic city, full of different cultures, London is an attractive experience for any budding artist. With that in mind it’s no wonder international students also love to study here amongst the best, and here in En...

30May

By Chris CoyierNo Comments

CSS Tricks, Web Tricks

Transmit Droplets

Ethan Marcotte documented his workflow for storing GIFs in a web directory. Sometimes just SFTPing files into a folder is as fancy a workflow as you need, and in fact, modern workflows don't have anything on it! I've also used Transmit's fancy features for this kind of thing. I prefer saving the connection as a Droplet, which is basically a little application you can drop a file onto and have it upload to exactly where you want it...say a GIF in a specific server directory. There are two things that make this even more useful. One, you can have it copy the URL after uploading: Two, you can set rules for file types so that they have the right permissions as soon as they are uploaded. I find this particularly useful for S3 where by default they aren't "world readab...

30May

By James QuickNo Comments

Web Tricks

Getting Started with Live Coding in Visual Studio Code w/ Live Share

Live Share for Visual Studio Code is HOT OFF THE PRESS and publically available as of May 7th 2018! What? You've been living under a rock and haven't heard of it? Don't worry, let me fill you in. Live Share is an extension for VS Code that enables real-time collaboration between developers. Live Share is an extension for VS Code that enables real-time collaboration between developers. As you'll see in a second, you'll have the ability to share a "session" with someone else, allowing them to edit code as well as share a sever and debugging session. I've seen real-time collaboration in action with Cloud 9 before, but to have this now be a part of my favorite text editor is extremely exciting! So, let's go ahead and take a look at how it works. TLDR: How do I set up Live Share in 4...

30May

By Jay GordonNo Comments

Web Tricks

Modern Distributed Application Deployment with Kubernetes and MongoDB Atlas

Storytelling is one of the parts of being a Developer Advocate that I enjoy. Sometimes the stories are about the special moments when the team comes together to keep a system running or build it faster. But there are less than glorious tales to be told about the software deployments I’ve been involved in. And for situations where we needed to deploy several times a day, now we are talking nightmares. For some time, I worked at a company that believed that deploying to production several times a day was ideal for project velocity. Our team was working to ensure that advertising software across our media platform was always being updated and released. One of the issues was a lack of real automation in the process of applying new code to our application servers. What both ops an...

30May

By Chris NwambaNo Comments

Web Tricks

Node.js Cron Jobs By Examples

Ever wanted to do specific things on your application server at certain times without having to physically run them yourself. You want to spend more of your time worrying about productive tasks instead of remembering that you want to move data from one part of the server to another every month. This is where Cron jobs come in. In your Node applications, the applications of these are endless as they save. In this article, we’ll look at how to create and use Cron jobs in Node applications. To do this, we’ll make a simple application that automatically deletes auto-generated error.log files from the server. Another advantage of Cron jobs is that you can schedule the execution of different scripts at different intervals from your application. Prerequisites To follow through th...

30May

By phpInfoNo Comments

PHP, Web Tricks

Building A Central Logging Service In-House

We all know how important debugging is for improving application performance and features. BrowserStack runs one million sessions a day on a highly distributed application stack! Each involves several moving parts, as a client’s single session can span multiple components across several geographic regions. Without the right framework and tools, the debugging process can be a nightmare. In our case, we needed a way to collect events happening during different stages of each process in order to get an in-depth understanding of everything taking place during a session. With our infrastructure, solving this problem became complicated as each component might have multiple events from their lifecycle of processing a request. That’s why we developed our own in-house Central Logging ...

Overflow – Turn Your Designs into Playable User Flow Diagrams That Tell a Story

30May

By WebdesignerDepot StaffNo Comments

Web Tricks

Overflow – Turn Your Designs into Playable User Flow Diagrams That Tell a Story

Designing the best user flow for your product is definitely not an easy task. It requires several iterations before getting it right. Creating and updating user flow diagrams has largely been considered a painful process for designers, with many of them skipping it entirely because of this. Presenting user flows to stakeholders and actually getting them to understand and follow the user’s journey might actually be the most challenging part. Overflow helps you do exactly that. It empowers you to effectively communicate your work, while fully engaging your audience with an interactive user flow presentation. Create User Flows in Minutes Creating user flow diagrams with Overflow is a quick and enjoyable experience. You can connect and sync Overflow with your favorite design to...

How Do You Know Your Website Is A Success?

29May

By phpInfoNo Comments

Web Tricks

How Do You Know Your Website Is A Success?

(This article is kindly sponsored by Adobe.) We live in a world where just about every business has an online presence. Let’s say you want to reach out to a business — what would be the first thing you would do? Well, you would probably look up their website to search for answers to your questions or simply any contact details you can find. With no doubt, the first impression of any website is now more important than ever. There are more than 1.8 billion websites on the Internet right now, and the number is growing. The increase of the competition brings a great interest in examining the factors of success of a website. While no one will argue that it’s essential to have a successful website, it’s still not easy to understand what exactly success means and how to actually measur...

29May

By Kingsley SilasNo Comments

CSS Tricks, Web Tricks

Managing State in React With Unstated

As your application becomes more complex, the management of state can become tedious. A component's state is meant to be self-contained, which makes sharing state across multiple components a headache. Redux is usually the go-to library to manage state in React, however, depending on how complex your application is, you might not need Redux. Unstated is an alternative that provides you with the functionality to manage state across multiple components with a Container class and Provider and Subscribe components. Let's see Unstated in action by creating a simple counter and then look at a more advanced to-do application. Using Unstated to Create a Counter The code for the counter we’re making is available on GitHub: View Repo You can add Unstated to your application wi...