PHPInfo

5Jun

By Jesse KrasnosteinNo Comments

Web Tricks

How to Integrate MongoDB Atlas and Segment using MongoDB Stitch

It can be quite difficult tying together multiple systems, APIs, and third-party services. Recently, we faced this exact problem in-house, when we wanted to get data from Segment into MongoDB so we could take advantage of MongoDB’s native analytics capabilities and rich query language. Using some clever tools we were able to make this happen in under an hour – the first time around. While this post is detailed, the actual implementation should only take around 20 minutes. I’ll start off by introducing our cast of characters (what tools we used to do this) and then we will walk through how we went about it. The Characters To collect data from a variety of sources including mobile, web, cloud apps, and servers, developers have been turning to Segment since 2011. Segment consolid...

5Jun

By Ana TudorNo Comments

CSS Tricks

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise: The original gradient infinity. After four hours and some twenty minutes, of which over four hours were spent on tweaking positioning, edges and highlights... I finally had the result below: My version of the rainbow gradient infinity. The gradient doesn't look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let's see how I did that! Markup As you've probably already guessed from the title, the HTML is just one element: <div class='∞'></div> Styling Deciding on the approach The first idea that migh...

5Jun

By phpInfoNo Comments

Web Tricks

The Ethics Of Persuasion

(This article is kindly sponsored by Adobe.) A few months ago, the world was shocked to learn that Cambridge Analytica had improperly used data from a harmless looking personality quiz on Facebook to profile and target the wider audience on the platform with advertisements to persuade them to vote a certain way. Only part of the data was obtained with consent (!), the data was stored by the app creator (!!), and it was sold to Cambridge Analytica in violation of terms of use (!!!). This was an example of black hat design, a deceptive use of persuasion tactics, combined with unethical use of personal information. On the other hand, the last time you shopped on eBay, you may have noticed the use of multiple design elements encouraging you to buy an item (“last item”, “3 watched in...

SVG Animation Made Easy With Hot New Tool SVGator

5Jun

By WebdesignerDepot StaffNo Comments

Web Tricks

SVG Animation Made Easy With Hot New Tool SVGator

The best format for images on the web in 2018 is SVG. Not only is SVG resolution-independent—meaning that SVG graphics stay crisp at any size, on any device—but SVG file sizes are smaller than other competing formats. One of the most popular features of SVG is the ability to access parts of the graphic with code, and use CSS to change properties like fill color. But did you know that you can also embed animation code in an SVG file? Animating SVG can be complex, and requires some pretty intricate code to get right. Until now that is, because with the amazing SVGator you can actually design SVG animations, right in your browser. Since its launch a little over 7 months ago SVGator has won legions of fans for its simple-to-use interface, and the quality of the modular code t...

4Jun

By Jecelyn YeenNo Comments

Web Tricks

3 Useful TypeScript Tips for Angular

These are the 3 tips I found pretty handy while working with Typescript: Eliminating the need to import interfaces Making all interface properties optional Stop throwing me error, I know what I'm doing Though I discovered these while working with Angular application, but all tips are not Angular specific, it's just Typescript. Eliminating the need to import interfaces I like interfaces. However, I don't like to import them everytime. Although Visual Studio Code has auto-import feature, I don't like my source files been "polluted" by multiple lines of imports - just for the purpose of strong typing. This is how we do it normally. // api.model.ts export interface Customer { id: number; name: string; } export interface User { id: number; is...

Combining the Powers of SEM and BIO for Improving CSS

4Jun

By Ryan YuNo Comments

CSS Tricks

Combining the Powers of SEM and BIO for Improving CSS

CSS is easy, some might argue, but that "easiness" can cause messy code. This is especially true through power of preprocessors like Sass or Less where, if you aren’t careful, your CSS can become harder to deal with instead of easier. Sass? Harder? This Gist shows a great example of Sass nesting hell. If your Sass code looks like that, you can definitely improve your code with SEM & BIO, a CSS technique I’ll introduce you to now! In this article, I am going to use the code example below to explain how SEM and BIO works and how they can help enhance your CSS strategy. See the Pen by thebabydino (@thebabydino) on CodePen. Generally, SEM is concerned with high level CSS philosophy whereas BIO is an actual technique to help you write better CSS to achieve SEM. The main purp...

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 Chris CoyierNo Comments

CSS Tricks

HSL() / HSLa() is great for programmatic color control

If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We've talked about it before but we can break it down a little more and do some interesting things with it. Hue: Think of a color wheel. Around 0o and 360o are reds. 120o is where greens are and 240o are blues. Use anything in between 0-360. Values above and below will be modulus 360. Saturation: 0% is completely desaturated (grayscale). 100% is fully saturated (full color). Lightness: 0% is completely dark (black). 100% is completely light (white). 50% is average lightness. alpha: Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transpare...

The State of Changing Gradients with CSS Transitions and Animations

1Jun

By Ana TudorNo Comments

CSS Tricks

The State of Changing Gradients with CSS Transitions and Animations

Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I was hopeful for the future. Sadly, six years have passed and nothing has changed in this department. Edge supports animating gradients with CSS, just like IE 10 did back then, but no other browser has added support for this. And while animating background-size or background-position or the opacity or rotation of a pseudo element layered on top can take us a long way in terms of achieving cool effects, these workarounds are still limited. There are effects we cannot reproduce without adding lots of extra elements or lots of extra gradients, such as "the bli...

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...

Forms, Auth and Serverless Functions on Gatsby and Netlify

31May

By Maxime Laboissonni reNo Comments

CSS Tricks

Forms, Auth and Serverless Functions on Gatsby and Netlify

Abstracting infrastructure is in our DNA. Roads, schools, water supply networks—you get the idea. Web development is no exception: serverless architectures are a beautiful expression of that phenomenon. Static sites, in particular, are turning into dynamic, rich experiences. Handling static forms, authentication, and backend functions on statically-generated sites is now a thing. Especially with the JAMstack pioneer platform that is Netlify. Recently, they announced support of AWS Lambda functions on front-end-centric sites and apps. I've been meaning to dive into their "backend" features since. Today, I'm doing just that, using a static Gatsby site, Netlify's Forms, Identity, and Functions features. This tutorial will show you how to: Add static forms to your site Ad...

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 ...