Snippets

Linear gradients are easy to create in CSS and are extremely useful. As we’ll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-linear in the easing sense, anyway!

[…]

In Material Design style guidelines for images, the designers at Google talk about text protection gradients. They call them a scrim. They recommend:

[the] gradient should be long… with the center point about 3/10 towards the darker side of the gradient. This gives the gradient a natural falloff and avoids a sharp edge.

We can’t create exactly that with linear gradients, but we can (and will) create a “low poly” approximation with more color stops.

Using only 5 color stops (like in the illustration above) would create some serious banding. Adding more stops makes the gradient a lot smoother. This is exactly what I’ve done in the demo you saw in the first image in this article. Il buono has a 13 color-stop gradient, which makes it blend nicer into the image.

(See the comments in the source link for Sass mixins.)

See also the gradient easing generator by the same author.

The :focus-within pseudo class becomes active when an element itself has focus or if any of its descendants does.

Take for example the following HTML code:

and the following CSS:

If the div with the class .container receives focus (it can in this case as it has a tabindex of 0, this is purely for example purposes), it will have a background colour of #aaa.

But it will also have a background colour of #aaa if any of its descendants have the focus. So if the <input> receives focus, then the div’s background will also be #aaa.

This will remove the need for JavaScript that is often used to achieve this effect.

Well, this settles that.

When you think about how much of your life (personally and professionally) is wrapped up in your business, it seems to make sense to think that by consolidating tasks, cutting corners, or just taking it all on yourself, you’ll save money and time.

Here’s the problem with that sort of thinking: it’s a dangerous and highly inefficient way to conduct business when you work in web design. No matter the size of our business, we rely on proven processes and techniques to ensure that what we create is always of the highest quality. Let’s face it, we are specialists, and diluting our offering by trying to do everything isn’t fair to our clients or ourselves.

My suggestion? Let more qualified people or tools tackle the “stuff” that forces you to slow down, lose productivity, and create something less than what your clients deserve. Sure, it’s scary to think about how much it will cost to outsource your accounting, your SEO, or anything else that isn’t in your wheelhouse. But think about how much momentum and overall quality of work you lose whenever you let that fear take over. I say: focus on what you do best, outsource the rest, and be happily surprised when you see how much your business soars as a result.

Your indispensable test assistant.

With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of sync settings from the UI or command line to create a personalised test environment. Need more control? Browsersync is easily integrated with your web platform, build tools, and other Node.js projects.

Mustache can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object.

We call it “logic-less” because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.

Ever needed/wanted to automatically determine if you should use light or dark text, given a provided background colour? This mixin does that for you.

Relevant points [of disabling Disqus] are:

• Load-time goes from 6 seconds to 2 seconds.
• There are 105 network requests vs. 16.
• There are a lot of non-relevant requests going through to networks that will be tracking your movements.

Among the networks you can find:

• disqus.com - Obviously!
• google-analytics.com - Multiple requests; no idea who’s capturing your movements.
• connect.facebook.net - If you’re logged into Facebook, they know you visit this site.
• accounts.google.com - Google will also map your visits to this site with any of your Google accounts.
• pippio.com - LiveRamp identify mapping for harvesting your details for commercial gain.
• bluekai.com - Identity tracking for marketing campaigns.
• crwdcntrl.net - Pretty suspect site listed as referenced by viruses and spyware.
• exelator.com - More identity and movement tracking site which even has a virus named after it!
• doubleclick.net - We all know this one: ad services and movement tracking, owned by Google.
• tag.apxlv.net - Very shady and tricky to pin-point an owner as they obsfuscate their domain (I didn’t even know this was a thing!). Adds a tracking pixel to your site.
• adnxs.com - More tracking garbage, albeit slightly more prolific.
• adsymptotic.com - Advertising and tracking that suppposedly uses machine learning.
• rlcdn.com - Obsfuscated advertising/tracking from Rapleaf.
• adbrn.com - “Deliver a personalized customer journey across devices, channels and platforms with Adbrain customer ID mapping technology.”
• nexac.com - Oracle’s Datalogix, their own tracking and behavioural pattern rubbish.
• tapad.com - OK, I cant’t be bothered to search to look this up anymore.
• liadm.com - More? Oh, ok, then…
• sohern.com - Yup. Tracking.
• demdex.net - Tracking. From Adobe.
• bidswitch.net - I’ll give you one guess…
• agkn.com - …
• mathtag.com - Curious name, maybe it’s… no. It’s tracking you.

I can’t visit many of these sites because I have them blocked in uBlock Origin so information was gleaned from google crawl results of the webpages and 3rd parties. Needless to say, it’s a pretty disgusting insight into how certain free products turn you into the product. What’s more worrying are the services that go to lengths to hide who they are and what their purposes are for tracking your movements.