Archive

Archive for the ‘Others’ Category

Making Tables With Sticky Header and Footers Got a Bit Easier

June 14th, 2021 No comments

It wasn’t long ago when I looked at sticky headers and footers in HTML

s in the blog post A table with both a sticky header and a sticky first column. In it, I never used position: sticky on any

,

, or

element, because even though Safari and Firefox could do that, Chrome could not. But it could do table cells like

and

are sticky-able. That seems like it will be the most common use case here.

table thead,
table tfoot {
  position: sticky;
}
table thead {
  inset-block-start: 0; /* "top" */
}
table tfoot {
  inset-block-end: 0; /* "bottom" */
}
CodePen Embed Fallback

That works in all three major browsers. You might want to get clever and only sticky them at certain minimum viewport heights or something, but the point is it works.

I heard several questions about table columns as well. My original article had a sticky first column (that was kind of the point). While there is a table

tag, it’s… weird. It doesn’t actually wrap columns, it’s more like a pointer thing to be able to style down the column if you need to. I hardly ever see it used, but it’s there. Anyway, you totally can’tposition: sticky; a

, but you can make sticky columns. You need to select all the cells in that column and stick them to the left or right. Here’s that using logical properties…

table tr th:first-child {
  position: sticky;
  inset-inline-start: 0; /* "left" */
}

Here’s a sorta obnoxious table where the

,

, and the first and last columns are all sticky.

CodePen Embed Fallback

I’m sure you could do something tasteful with this. Like maybe:


The post Making Tables With Sticky Header and Footers Got a Bit Easier appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

CSS-Tricks Chronicle XXXX

June 14th, 2021 No comments

Just a little link roundup of some off-site stuff I’ve done recently. As I’m wont to do from time to time.

DevJourney Podcast

#151 Chris Coyier from ceramics to CSS-Tricks and CodePen

Chris took us from playing on his first C64 to his bachelor of arts in ceramics and back to web development. We talked about the different positions he held along the way and how they slowly but surely led him toward web development. We brushed over the creation and recreation of CSS-Tricks, learning in the open and what a good day looks like.

Podrocket Podcast

Rocket Surgery: Kaelan and Chris Coyier compare notes

Are you up to speed on all of this new CSS stuff? Chris Coyier and Kaelan compare notes on CSS and frontend development (they also discuss MDN plus).

CodePen Radio

I’ve been back to hosting the episodes of CodePen Radio this year, every week. Here are some recent episodes.

https://blog.codepen.io/feed/podcast/

I will randomly do the podcast as a video some weeks and call it CodePen Radio on TV! Here’s Adam Kuhn and I doing one of those videos. You’ll see a new intro animation on it that Adam himself did.

ShopTalk Show

Dave and I are six months away from doing this weekly for 10 years!! Again, some recent shows:

https://shoptalkshow.com/feed/podcast/

Some of the shows have been centered around a series called JavaScript in 2021.

The biggest change around ShopTalk is our Patreon + Discord which has been very awesome.


The post CSS-Tricks Chronicle XXXX appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

22 Exciting New Tools For Designers, June 2021

June 14th, 2021 No comments

This month’s new tools and resources collection is a mixed bag of elements for designers and developers. From fun little divots to tools that can speed up development, you are sure to find something usable here.

Here’s what new for designers this month:

June’s Top Picks

Codewell

Codewell is a service to help you learn, practice, and improve HTML and CSS skills with real templates. The benefit here is pretty obvious. When working with real templates, you can see the result of actions and changes. The tool includes free and premium options with new templates to work on weekly. Everything works in a responsive environment, and free plans have access to free challenges and a Slack community; a paid plan also includes source files and premium challenges. You need a Github login to get started.

LoomSKD

LoomSDK is an easy and reliable way to add video messaging to your product – and it’s free. The SDK enables your users to record, embed, and view with Loom videos directly within web apps – adding clarity and context to any workflow.

Pintr New Image

Pinter New Image turns photos into funky and fun line images. Upload an image with plenty of contrast, use the controls to set the look you want to achieve, and download. The new images are available as PNG or SVG. Maybe use it to create your next profile photos for social media or a nifty avatar.

Terms & Conditions Apply

Terms & Conditions Apply is a game that explains all those little pop-ups that you accept to enter and interact with websites. You are tasked with a mission to start the game: Do not accept terms and conditions, say no to notifications, and opt-out of cookies. Can you do it?

Khroma

Khroma uses artificial intelligence (via personalized algorithm) to learn what colors you love and create palettes for you to discover, search, and save for use in projects. The beta tool is easy to get started with, although you do have a little color-picking homework to get started.

6 WebTools

Mmm

Mmm is a different type of website builder. The tool, which is still in alpha, allows users to create drag and drop websites in a simple manner. It works almost like making a digital collage. Users can get a custom URL, and every page is responsive. The interface is designed so that you can even build yours on a phone. And here’s the other feature – they encourage messy designs.

LightGallery

LightGallery is a lightweight, modular, JavaScript image and video lightbox gallery plugin. It works with React.js, Vue.js, Angular, and TypeScript. It includes plenty of demos and documentation to help you make the most of this gallery tool.

Vandal

Vandal is a nifty browser extension for Firefox or Chrome that allows you to navigate back in time without changing tabs. The utility of Vandal is to allow quick and easy access to all the archived snapshots for a URL, and it supports navigation to a snapshot as well.

CSS Layout Generator

The CSS Layout Generator is a tool for creating the CSS for layout components. It is also a learning tool for teaching what is possible in CSS for positioning elements in the browser. Tweak specifications to see how it impacts the layout, CSS, and HTML.

Alpaca Data API

Alpaca Data API is an easy-to-use feed that allows you to bring in stock market data for modeling and backtesting. (it includes free and premium options based on your needs.)

Mobile Palette Generator

Mobile Palette Generator is a color-picking tool that will help you select the best hues for mobile design projects. It then shows you all the specs for primary, secondary, and accent colors.

6 Icons and UI Kits

Iconoir

Iconoir is an open-source icon repository with more than 900 SVG icons. Search icons, browse by category or poke around for what you are looking for. Everything is ready to use without signups or forms to fill out.

Pmndrs Market

Pmndrs Market has a collection of more than 300 three-dimensional elements and drawings of things for use in projects. Model renders are in a rough style with a realistic feel.

Boring Avatars

Boring Avatars is a fun collection of semi-customizable avatars without faces, hence the name. It’s a fun playground that puts a new twist on something that you might not expect to do differently.

Spark

Spark is a free download with three different website design starters. The hero images are ready to build from and are made for Figma.

Venus Design System

Venus Design System is a premium UI kit packed with more than 2,000 components and states that allow you to design fast. There’s also a demo version for you to test before you buy.

ReadyUI

ReadyUI contains more than 200 blocks and designs for agencies, developers, startups, and more. Everything is production-ready using Bootstrap and Figma files. Choose from light or dark themes and search for a design that works for your project.

5 Tutorials

Creating Generative SVG Characters

Creative Generative SVG Characters is a marriage of JavaScript and SVG that creates fun characters derived from drawings. Using shapes and a little code, you can see how to draw smooth lines, create polygons, and add other shapes for a fun feel. There’s a full demo on Codepen.

5 Steps to Faster Web Fonts

5 Steps to Faster Web Fonts helps you remove some of the bulk from popular typography options. Iain Bean explains a set of methods you can deploy to ensure that load times are quick with some applicable code snippets. Here’s a preview: Tip 1 is to use the most modern file formats (WOFF2).

The Perfect Link

The Perfect Link walks you through some accessibility checks from the A11Y Collective for linking best practices. Some of the things you think are the “right way” may be challenged here. The information goes through everything from design to semantics and is wonderfully thorough. It’s a must-read.

Readsom

Readsom is a curated collection of newsletters and emails that you can read online or sign up for. Its catchphrase is to “discover content you’ll want to read.” It is a good way to find newsletters that interest you, including plenty of design and development options that you might not otherwise know about.

Famous First Websites

Famous First Websites isn’t a tutorial per se, but it does provide a good place to do some visual learning. See what your favorite websites looked like when they launched and the evolution of the designs.

Source

The post 22 Exciting New Tools For Designers, June 2021 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Securing Your Website With Subresource Integrity

June 14th, 2021 No comments

When you load a file from an external server, you’re trusting that the content you request is what you expect it to be. Since you don’t manage the server yourself, you’re relying on the security of yet another third party and increasing the attack surface. Trusting a third party is not inherently bad, but it should certainly be taken into consideration in the context of your website’s security.

A real-world example

This isn’t a purely theoretical danger. Ignoring potential security issues can and has already resulted in serious consequences. On June 4th, 2019, Malwarebytes announced their discovery of a malicious skimmer on the website NBA.com. Due to a compromised Amazon S3 bucket, attackers were able to alter a JavaScript library to steal credit card information from customers.

It’s not only JavaScript that’s worth worrying about, either. CSS is another resource capable of performing dangerous actions such as password stealing, and all it takes is a single compromised third-party server for disaster to strike. But they can provide invaluable services that we can’t simply go without, such as CDNs that reduce the total bandwidth usage of a site and serve files to the end-user much faster due to location-based caching. So it’s established that we need to sometimes rely on a host that we have no control over, but we also need to ensure that the content we receive from it is safe. What can we do?

Solution: Subresource Integrity (SRI)

SRI is a security policy that prevents the loading of resources that don’t match an expected hash. By doing this, if an attacker were to gain access to a file and modify its contents to contain malicious code, it wouldn’t match the hash we were expecting and not execute at all.

Doesn’t HTTPS do that already?

HTTPS is great for security and a must-have for any website, and while it does prevent similar problems (and much more), it only protects against tampering with data-in-transit. If a file were to be tampered with on the host itself, the malicious file would still be sent over HTTPS, doing nothing to prevent the attack.

How does hashing work?

A hashing function takes data of any size as input and returns data of a fixed size as output. Hashing functions would ideally have a uniform distribution. This means that for any input, x, the probability that the output, y, will be any specific possible value is similar to the probability of it being any other value within the range of outputs.

Here’s a metaphor:

Suppose you have a 6-sided die and a list of names. The names, in this case, would be the hash function’s “input” and the number rolled would be the function’s “output.” For each name in the list, you’ll roll the die and keep track of what name each number number corresponds to, by writing the number next to the name. If a name is used as input more than once, its corresponding output will always be what it was the first time. For the first name, Alice, you roll 4. For the next, John, you roll 6. Then for Bob, Mary, William, Susan, and Joseph, you get 2, 2, 5, 1, and 1, respectively. If you use “John” as input again, the output will once again be 6. This metaphor describes how hash functions work in essence.

and

, which was a decent-enough workaround.

Well that’s changed.

Sounds like a big effort went into totally revamping tables in the rendering engine in Chromium, bringing tables up to speed. It’s not just the stickiness that was fixed, but all sorts of things. I’ll just focus on the sticky thing since that’s what I looked at.

The headline to me is that

Name (input) Number rolled (output)
Alice 4
John 6
Bob 2
Mary 2
William 5
Susan 1
Joseph 1

You may have noticed that, for example, Bob and Mary have the same output. For hashing functions, this is called a “collision.” For our example scenario, it inevitably happens. Since we have seven names as inputs and only six possible outputs, we’re guaranteed at least one collision.

A notable difference between this example and a hash function in practice is that practical hash functions are typically deterministic, meaning they don’t make use of randomness like our example does. Rather, it predictably maps inputs to outputs so that each input is equally likely to map to any particular output.

SRI uses a family of hashing functions called the secure hash algorithm (SHA). This is a family of cryptographic hash functions that includes 128, 256, 384, and 512-bit variants. A cryptographic hash function is a more specific kind of hash function with the properties being effectively impossible to reverse to find the original input (without already having the corresponding input or brute-forcing), collision-resistant, and designed so a small change in the input alters the entire output. SRI supports the 256, 384, and 512-bit variants of the SHA family.

Here’s an example with SHA-256:

For example. the output for hello is:

2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824

And the output for hell0 (with a zero instead of an O) is:

bdeddd433637173928fe7202b663157c9e1881c3e4da1d45e8fff8fb944a4868

You’ll notice that the slightest change in the input will produce an output that is completely different. This is one of the properties of cryptographic hashes listed earlier.

The format you’ll see most frequently for hashes is hexadecimal, which consists of all the decimal digits (0-9) and the letters A through F. One of the benefits of this format is that every two characters represent a byte, and the evenness can be useful for purposes such as color formatting, where a byte represents each color. This means a color without an alpha channel can be represented with only six characters (e.g., red = ff0000)

This space efficiency is also why we use hashing instead of comparing the entirety of a file to the data we’re expecting each time. While 256 bits cannot represent all of the data in a file that is greater than 256 bits without compression, the collision resistance of SHA-256 (and 384, 512) ensures that it’s virtually impossible to find two hashes for differing inputs that match. And as for SHA-1, it’s no longer secure, as a collision has been found.

Interestingly, the appeal of compactness is likely one of the reasons that SRI hashes don’t use the hexadecimal format, and instead use base64. This may seem like a strange decision at first, but when we take into consideration the fact that these hashes will be included in the code and that base64 is capable of conveying the same amount of data as hexadecimal while being 33% shorter, it makes sense. A single character of base64 can be in 64 different states, which is 6 bits worth of data, whereas hex can only represent 16 states, or 4 bits worth of data. So if, for example, we want to represent 32 bytes of data (256 bits), we would need 64 characters in hex, but only 44 characters in base64. When we using longer hashes, such as sha384/512, base64 saves a great deal of space.

Why does hashing work for SRI?

So let’s imagine there was a JavaScript file hosted on a third-party server that we included in our webpage and we had subresource integrity enabled for it. Now, if an attacker were to modify the file’s data with malicious code, the hash of it would no longer match the expected hash and the file would not execute. Recall that any small change in a file completely changes its corresponding SHA hash, and that hash collisions with SHA-256 and higher are, at the time of this writing, virtually impossible.

Our first SRI hash

So, there are a few methods you can use to compute the SRI hash of a file. One way (and perhaps the simplest) is to use srihash.org, but if you prefer a more programmatic way, you can use:

sha384sum [filename here] | head -c 96 | xxd -r -p | base64
  • sha384sum Computes the SHA-384 hash of a file
  • head -c 96 Trims all but the first 96 characters of the string that is piped into it
    • -c 96 Indicates to trim all but the first 96 characters. We use 96, as it’s the character length of an SHA-384 hash in hexadecimal format
  • xxd -r -p Takes hex input piped into it and converts it into binary
    • -r Tells xxd to receive hex and convert it to binary
    • -p Removes the extra output formatting
  • base64 Simply converts the binary output from xxd to base64

If you decide to use this method, check the table below to see the lengths of each SHA hash.

Hash algorithm Bits Bytes Hex Characters
SHA-256 256 32 64
SHA-384 384 48 96
SHA-512 512 64 128

For the head -c [x] command, x will be the number of hex characters for the corresponding algorithm.

MDN also mentions a command to compute the SRI hash:

shasum -b -a 384 FILENAME.js | awk '{ print $1 }' | xxd -r -p | base64

awk '{print $1}' Finds the first section of a string (separated by tab or space) and passes it to xxd. $1 represents the first segment of the string passed into it.

And if you’re running Windows:

@echo off
set bits=384
openssl dgst -sha%bits% -binary %1% | openssl base64 -A > tmp
set /p a= < tmp
del tmp
echo sha%bits%-%a%
pause
  • @echo off prevents the commands that are running from being displayed. This is particularly helpful for ensuring the terminal doesn’t become cluttered.
  • set bits=384 sets a variable called bits to 384. This will be used a bit later in the script.
  • openssl dgst -sha%bits% -binary %1% | openssl base64 -A > tmp is more complex, so let’s break it down into parts.
    • openssl dgst computes a digest of an input file.
    • -sha%bits% uses the variable, bits, and combines it with the rest of the string to be one of the possible flag values, sha256, sha384, or sha512.
    • -binary outputs the hash as binary data instead of a string format, such as hexadecimal.
    • %1% is the first argument passed to the script when it’s run.
    • The first part of the command hashes the file provided as an argument to the script.
    • | openssl base64 -A > tmp converts the binary output piping through it into base64 and writes it to a file called tmp. -A outputs the base64 onto a single line.
    • set /p a= <tmp stores the contents of the file, tmp, in a variable, a.
    • del tmp deletes the tmp file.
    • echo sha%bits%-%a% will print out the type of SHA hash type, along with the base64 of the input file.
    • pause Prevents the terminal from closing.

SRI in action

Now that we understand how hashing and SRI hashes work, let’s try a concrete example. We’ll create two files:

// file1.js
alert('Hello, world!');

and:

// file2.js
alert('Hi, world!');

Then we’ll compute the SHA-384 SRI hashes for both:

Filename SHA-384 hash (base64)
file1.js 3frxDlOvLa6GGEUwMh9AowcepHRx/rwFT9VW9yL1wv/OcerR39FEfAUHZRrqaOy2
file2.js htr1LmWx3PQJIPw5bM9kZKq/FL0jMBuJDxhwdsMHULKybAG5dGURvJIXR9bh5xJ9

Then, let’s create a file named index.html:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="./file1.js" integrity="sha384-3frxDlOvLa6GGEUwMh9AowcepHRx/rwFT9VW9yL1wv/OcerR39FEfAUHZRrqaOy2" crossorigin="anonymous"></script>
    <script type="text/javascript" src="./file2.js" integrity="sha384-htr1LmWx3PQJIPw5bM9kZKq/FL0jMBuJDxhwdsMHULKybAG5dGURvJIXR9bh5xJ9" crossorigin="anonymous"></script>
  </head>
</html>

Place all of these files in the same folder and start a server within that folder (for example, run npx http-server inside the folder containing the files and then open one of the addresses provided by http-server or the server of your choice, such as 127.0.0.1:8080). You should get two alert dialog boxes. The first should say “Hello, world!” and the second, “Hi, world!”

If you modify the contents of the scripts, you’ll notice that they no longer execute. This is subresource integrity in effect. The browser notices that the hash of the requested file does not match the expected hash and refuses to run it.

We can also include multiple hashes for a resource and the strongest hash will be chosen, like so:

<!DOCTYPE html>
<html>
  <head>
    <script
      type="text/javascript"
      src="./file1.js"
      integrity="sha384-3frxDlOvLa6GGEUwMh9AowcepHRx/rwFT9VW9yL1wv/OcerR39FEfAUHZRrqaOy2 sha512-cJpKabWnJLEvkNDvnvX+QcR4ucmGlZjCdkAG4b9n+M16Hd/3MWIhFhJ70RNo7cbzSBcLm1MIMItw
9qks2AU+Tg=="
       crossorigin="anonymous"></script>
    <script 
      type="text/javascript"
      src="./file2.js"
      integrity="sha384-htr1LmWx3PQJIPw5bM9kZKq/FL0jMBuJDxhwdsMHULKybAG5dGURvJIXR9bh5xJ9 sha512-+4U2wdug3VfnGpLL9xju90A+kVEaK2bxCxnyZnd2PYskyl/BTpHnao1FrMONThoWxLmguExF7vNV
WR3BRSzb4g=="
      crossorigin="anonymous"></script>
  </head>
</html>

The browser will choose the hash that is considered to be the strongest and check the file’s hash against it.

Why is there a “crossorigin” attribute?

The crossorigin attribute tells the browser when to send the user credentials with the request for the resource. There are two options to choose from:

Value (crossorigin=) Description
anonymous The request will have its credentials mode set to same-origin and its mode set to cors.
use-credentials The request will have its credentials mode set to include and its mode set to cors.

Request credentials modes mentioned

Credentials mode Description
same-origin Credentials will be sent with requests sent to same-origin domains and credentials that are sent from same-origin domains will be used.
include Credentials will be sent to cross-origin domains as well and credentials sent from cross-origin domains will be used.

Request modes mentioned

Request mode Description
cors The request will be a CORS request, which will require the server to have a defined CORS policy. If not, the request will throw an error.

Why is the “crossorigin” attribute required with subresource integrity?

By default, scripts and stylesheets can be loaded cross-origin, and since subresource integrity prevents the loading of a file if the hash of the loaded resource doesn’t match the expected hash, an attacker could load cross-origin resources en masse and test if the loading fails with specific hashes, thereby inferring information about a user that they otherwise wouldn’t be able to.

When you include the crossorigin attribute, the cross-origin domain must choose to allow requests from the origin the request is being sent from in order for the request to be successful. This prevents cross-origin attacks with subresource integrity.

Using subresource integrity with webpack

It probably sounds like a lot of work to recalculate the SRI hashes of each file every time they are updated, but luckily, there’s a way to automate it. Let’s walk through an example together. You’ll need a few things before you get started.

Node.js and npm

Node.js is a JavaScript runtime that, along with npm (its package manager), will allow us to use webpack. To install it, visit the Node.js website and choose the download that corresponds to your operating system.

Setting up the project

Create a folder and give it any name with mkdir [name of folder]. Then type cd [name of folder] to navigate into it. Now we need to set up the directory as a Node project, so type npm init. It will ask you a few questions, but you can press Enter to skip them since they’re not relevant to our example.

webpack

webpack is a library that allows you automatically combine your files into one or more bundles. With webpack, we will no longer need to manually update the hashes. Instead, webpack will inject the resources into the HTML with integrity and crossorigin attributes included.

Installing webpack

Yu’ll need to install webpack and webpack-cli:

npm i --save-dev webpack webpack-cli 

The difference between the two is that webpack contains the core functionalities whereas webpack-cli is for the command line interface.

We’ll edit our package.json to add a scripts section like so:

{
  //... rest of package.json ...,
  "scripts": {
    "dev": "webpack --mode=development"
  }
  //... rest of package.json ...,
}

This enable us to run npm run dev and build our bundle.

Setting up webpack configuration

Next, let’s set up the webpack configuration. This is necessary to tell webpack what files it needs to deal with and how.

First, we’ll need to install two packages, html-webpack-plugin, and webpack-subresource-integrity:

npm i --save-dev html-webpack-plugin webpack-subresource-integrity style-loader css-loader
Package name Description
html-webpack-plugin Creates an HTML file that resources can be injected into
webpack-subresource-integrity Computes and inserts subresource integrity information into resources such as  and 
style-loader Applies the CSS styles that we import
css-loader Enables us to import css files into our JavaScript

Setting up the configuration:

const path              = require('path'),
      HTMLWebpackPlugin = require('html-webpack-plugin'),
      SriPlugin         = require('webpack-subresource-integrity');

module.exports = {
  output: {
    // The output file's name
    filename: 'bundle.js',
    // Where the output file will be placed. Resolves to 
    // the "dist" folder in the directory of the project
    path: path.resolve(__dirname, 'dist'),
    // Configures the "crossorigin" attribute for resources 
    // with subresource integrity injected
    crossOriginLoading: 'anonymous'
  },
  // Used for configuring how various modules (files that 
  // are imported) will be treated
  modules: {
    // Configures how specific module types are handled
    rules: [
      {
        // Regular expression to test for the file extension.
        // These loaders will only be activated if they match
        // this expression.
        test: /.css$/,
        // An array of loaders that will be applied to the file
        use: ['style-loader', 'css-loader'],
        // Prevents the accidental loading of files within the
        // "node_modules" folder
        exclude: /node_modules/
      }
    ]
  },
  // webpack plugins alter the function of webpack itself
  plugins: [
    // Plugin that will inject integrity hashes into index.html
    new SriPlugin({
      // The hash functions used (e.g. 
      // <script integrity="sha256- ... sha384- ..." ...
      hashFuncNames: ['sha384']
    }),
    // Creates an HTML file along with the bundle. We will
    // inject the subresource integrity information into 
    // the resources using webpack-subresource-integrity
    new HTMLWebpackPlugin({
      // The file that will be injected into. We can use 
      // EJS templating within this file, too
      template: path.resolve(__dirname, 'src', 'index.ejs'),
      // Whether or not to insert scripts and other resources
      // into the file dynamically. For our example, we will
      // enable this.
      inject: true
    })
  ]
};

Creating the template

We need to create a template to tell webpack what to inject the bundle and subresource integrity information into. Create a file named index.ejs:

<!DOCTYPE html>
<html>
  <body></body>
</html>

Now, create an index.js in the folder with the following script:

// Imports the CSS stylesheet
import './styles.css'
alert('Hello, world!');

Building the bundle

Type npm run build in the terminal. You’ll notice that a folder, called dist is created, and inside of it, a file called index.html that looks something like this:

<!DOCTYPE HTML>
<html><head><script defer src="bundle.js" integrity="sha384-lb0VJ1IzJzMv+OKd0vumouFgE6NzonQeVbRaTYjum4ql38TdmOYfyJ0czw/X1a9b" crossorigin="anonymous">
</script></head>
  <body>
  </body>
</html>

The CSS will be included as part of the bundle.js file.

This will not work for files loaded from external servers, nor should it, as cross-origin files that need to constantly update would break with subresource integrity enabled.

Thanks for reading!

That’s all for this one. Subresource integrity is a simple and effective addition to ensure you’re loading only what you expect and protecting your users; and remember, security is more than just one solution, so always be on the lookout for more ways to keep your website safe.


The post Securing Your Website With Subresource Integrity appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Popular Design News of the Week: June 7 2021 – June 13, 2021

June 13th, 2021 No comments

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Patttterns

What I Learned by Relearning HTML

All You Need is 5 Fonts

What Is Glassmorphism? (With Examples)

Half the Internet Went Down Today — Here’s What Happened

3 Essential Design Trends, June 2021

50 Free Cursive Handwritten Fonts to Spice Up Your Design

The 4 Biggest UI Trends Shaping Apple’s Future

Google Changes Core Web Vitals Metrics

Storytelling In Design – Top Trends For 2021

Source

The post Popular Design News of the Week: June 7 2021 – June 13, 2021 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo!

June 11th, 2021 No comments

There’s a 33-minute video (and resources) over on apple.com covering the upcoming Safari changes we saw in the WWDC keynote this year in much more detail. Look who’s got a little cameo in there:

Perhaps the most noticeable thing there in Safari 15 on iOS is URL bar at the bottom! Dave was speculating in our little Discord watch party that this probably fixes the weird issues with 100vh stuff on iOS. But I really just don’t know, we’ll have to see when it comes out and we can play with it. I’d guess the expectation is that, in order for us to do our own fixed-bottom-UI stuff, we’d be doing:

.bottom-nav { 
  position: fixed; /* maybe sticky is better if part of overall page layout? */
  bottom: 100vh; /* fallback? */
  bottom: calc(100vh - env(safe-area-inset-bottom)); /* new thing */
}

On desktop, the most noticeable visual feature is probably the theme-color meta tags.

This isn’t even a brand new Apple-only thing. This is the same tag that Chrome’s Android app has used since 2014, so you might already be sporting it on your own site. The addition is that it supports media queries.

<meta name="theme-color" 
      content="#ecd96f" 
      media="(prefers-color-scheme: light)">
<meta name="theme-color" 
      content="#0b3e05" 
      media="(prefers-color-scheme: dark)">

It’s great to see Safari get aspect-ratio and the new fancy color systems like lab() and lch() as well. Top-level await in JavaScript is great as it makes patterns like conditional imports easier.

I don’t think all this would satisfy Alex. We didn’t exactly get alternative browser engines on iOS or significant PWA enhancements (both of which would be really great to see). But I applaud it all—it’s good stuff. While I do think Google generally takes privacy more seriously than what general internet chatter would have to believe, it’s notable to compare each company’s newly-released features. If you’ll forgive a bit of cherry-picking, Google is working on FLoC, a technology very specifically designed to help targeted advertising. Apple is working on Private Relay, a technology very specifically to making web browsing untrackable.


The post Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo! appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Web Design Done Well: Making Use Of Audio

June 11th, 2021 No comments

It’s easy to get hyper-focused on how things look on the web. There’s a lot to look at. You’re looking at this right now! However, in the age of touchscreens and home assistants, it’s safe to say sight isn’t the only sense worth caring about.

George Lucas once said half of any movie’s magic comes from its sounds. The same could be said of certain online experiences. For part two of this series, we’ve assembled some of our favorite examples of sound being used on the web. Most of us have had the misfortune of crossing bad examples (auto-playing videos being a particularly egregious example) but audio can give web experiences a whole new dimension when applied well.

What follows are some astounding sounds from the World Wide Web. We hope these bright ideas help you to think about your own projects a little bit differently.

Part Of: Web Design Done Well

The New Yorker’s Audio Articles

The word ‘article’ generally brings to mind words on a page, with some wiggle room on whether that page is paper or on a screen. With each passing year, this assumption becomes more restrictive and reductive. Words can be heard as well as read. This is something a growing number of websites are clocking on to, with the The New Yorker being a particularly good example. Much of their writing — fiction and non-fiction — comes complete with an audio version, often read by the authors themselves.

Most websites don’t have the luxury of recording people like Margaret Atwood, but with text-to-speech software getting better and better, we love seeing sites incorporating it into their design and functionality. Nieman Reports did a fantastic article on the subject last year, and yes, there’s an audio version.

Tune In To The World’s Radios In Radio Garden

Lest we forget, websites can take forms other than grids. Radio Garden takes you around the world’s radio stations in an instant. It’s like Google Earth, but with music. Spin the globe, turn on, tune in, drop out. A deceptively simple idea executed with a playful elegance.

A lot of pieces are needed for this to be possible, among them CesiumJS for the globe, Esri for satellite imagery, and Free GeoIP for the location API. A wonderful idea beautifully executed. (An honorable mention must also go to Radiooooo, a kind of time travel equivalent.)

Botany And Symphonies In Penderecki’s Garden

We doubt you’ve ever seen a memorial garden quite like Krzysztof Penderecki. Wander the virtual garden of the legendary Polish composer (and keen gardener) with his music playing in the background. It’s a beautiful tribute, and a cracking case study in web design to boot. There’s a lot of cool stuff going on but the music seemed the apt thing to focus on.

Akkers van Margraten’s Oral Histories Of WWII

The scope for archival material to reinvent itself online in new and exciting ways is almost limitless. The Akkers van Margraten oral history project builds its website around its audio content, with the audio clips accompanied by mournful musical arrangements.

The music is supplemental, helping the interviewees to conjure the spirit of a time and place. Would the effect be the same without? We’re not so sure.

Netflix Brings Trailer-Like Intensity To Its Dark Series Guide

There is a wariness of media that plays automatically on web pages. This wariness is well earned. Still, the guide for Netflix’s “Dark” series shows how powerful it can be when done right. The site’s deep ambient tones pull you headfirst into the mood.

Imagine a long-form article with the right accompaniment — a horror story paired with dissonant ambient arrangements perhaps, or a look back at the Swinging Sixties with a Jefferson Airplane song playing in the distance. This Dark guide shows how much of a shot in the arm that can be.

IT Museum Brings Audio Tours To The Web

The DataArt IT Museum is an ever-growing collection of Eastern European tech hardware, each item appropriately brought online. This e-museum is beautiful in all sorts of ways, but its use of interview snippets is particularly sharp. Not unlike Akkers van Margraten, the audio snippets bridge the gap between then and now.

It almost feels obvious once you see it. Just about everyone has wandered through a museum or gallery or historical building while listening to an audio guide. Why shouldn’t the same option be available to us online?

Ethics For Design

What is the role of a designer? That is the question posed to a dozen designers and researchers in Ethics for Design, with the answers presented in a way only the web could really pull off. Instead of presenting the results in one glossy run-of-the-mill video, the site instead separates all the pieces.

As much as anything else, it shows how much can be lost when we limit ourselves to one medium — be it text, sound, videos, photographs, or graphics. Although a little jarring to begin with, maybe that’s what’s needed to think about how each piece fits into a wider puzzle.

SoundCloud’s Sticky Music Player Bar

We figured we should close with a god-honest feature. For that, we turn to SoundCloud, which has a music player that plays independently of the rest of the site. Clicking on a new page doesn’t reset the player, allowing visitors to browse artists and albums without breaking the flow of what they’re listening to. It feels so natural that it’s hard to imagine there one not being there.

We’ve become used to this through apps like Spotify, but on the web proper, it still screams untapped potential. Think of how it might be combined with other ideas featured here. Imagine you’re on a news website and start listening to a story, a la The New Yorker. With a player like this, visitors could continue browsing the site while still listening to the original story. Sounds like the future.

Wrapping Up

The sites featured here only scratch the surface of what’s possible. Sound can take countless forms: radio, music players, interviews, narration, and navigation to name but a few. We’re not all that far away from conversing with websites.

If you’re interested in learning more, the articles below offer a sound starting point for audio design online:

Technical capabilities have grown massively in recent years, with more and more flexibility demanded of the sites we use. They are seen, they are touched, and, increasingly, they are heard. We’ll hold off advocating for edible, pleasantly scented websites (for now) but sometimes it’s absolutely worth making them noisier.

Categories: Others Tags:

Put a Background on Open Details Elements

June 11th, 2021 No comments
A screenshot of some text with details elements present. One of them is open. It's not clear what text is within that details and what isn't.

One thing that can be just a smidge funky about the

element is that, when open, it’s not always 100% clear what is inside that element and what isn’t. I’m not saying that always matters or that it’s a particularly hard problem to solve, I’m just noting it as it came up recently for me.

Here’s a visual example:

What text here is inside a

and what isn’t?

The solution is… CSS. Style the

somewhat uniquely, and that problem goes away. Even if you want the typography to be the same, or you don’t want any exclusive styling until the

is opened, it’s still possible. Using an alpha-transparent fill, you can even make sure that deeper-nested

remain clear.

Here’s that CSS:

details[open] {
  --bg: rgb(0 0 0 / 0.2);
  background: var(--bg);
  outline: 1rem solid var(--bg);
  margin: 0 0 2rem 0;
}

And the demo:

CodePen Embed Fallback

The post Put a Background on Open Details Elements appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Three Front-End Auditing Tools I Discovered Recently

June 10th, 2021 No comments

Is every resource properly minified and compressed? Are all the caching headers set correctly? Does the site load all the resources in the best order to guarantee a fast first paint? These are only a few questions to consider when having the goal of building a fast website. Building for the web is complex these days.

But how do you find all these things causing performance issues?

Let me share three tools that will help you spot performance issues and ship high-quality and fast websites.

Note: If you’re looking for a complete overview of best practices and tools, have a look at the Frontend performance checklist.

Waterfaller: A Tool Focusing On Network Waterfalls

I discovered Waterfaller just recently. Contrary to Lighthouse or WebPage Test, Waterfaller focuses on one thing alone — issues in the network waterfall.

The tool analyzes what resources are loaded on the website and in what order these resources come in. You can find advice on what you could implement to make every resource load faster right in the tool.

I love Waterfaller’s narrow scope! Run a test, find problematic files and receive advice — that’s all doable in 30 seconds. It’s beautiful!

Yellow Lab: A Tool That Analyses Your Site Top To Bottom

If you’re looking for an extensive overview of how well your site is structured, give Yellow Lab a try. The number of included performance tests and checks is outstanding! It provides standard metrics such as page weight and request count and analyzes your HTML, CSS, and JavaScript.

It’s a beautiful tool to find issues in your CSS architecture in the form of duplicated selectors or too many color declarations. It also points out a too complex HTML structure, and it also checks your server and cache header configuration. It’s a perfect companion to build a high-quality website.

webhint: The Pickiest Tool Out There

Let me introduce you to the end boss. Say hello to Microsoft’s webhint. webhint is comparable to Lighthouse, and it scans your site for issues in the areas of accessibility, compatibility, progressive web apps, performance, and security.

What astonishes me about webhint is that it’s incredibly picky. I encountered situations in the past where I had a completely green Lighthouse score, WebPage Test gave me straight A’s, but still, webhint was offering me areas for improvement.

If you haven’t used it yet, I recommend giving it a try. You might find surprising things to improve.

Use The Best Tools To Build The Best Websites

As you’ve seen, the tooling landscape includes many valuable tools. And while some of the tools scan for a wide range of issues, there’s no tool covering everything. The usual mantra applies:

“Use the right tool for the job.”

What web performance tools do you use? I’d love to learn more about your favorite tools helping you to ship the best and fastest websites.

Categories: Others Tags:

9 Amazing Design-Resource Package Sites

June 9th, 2021 No comments

Every designer has their own preferred strategy for collecting resources. Some pluck brushes, fonts, and templates from different “stock photo sites” and public marketplaces. Others collect graphics from swipe files and forums around the web.

The never-ending desire for themes, visual content, and graphical components has prompted an influx of “design packages” to appear around the web. These all-in-one bundles, ranging from Envato Elements to Elegant Themes, promise a selection of valuable creative content in exchange for a single fee or monthly subscription. 

If you’ve been planning to seek out a few of these high-value subscriptions yourself, you’re in the right place! Today, we’re going to talk about some of the top designer resources available on the market. 

1. Envato Elements

Probably the best-known of all the designer resource marketplaces, Envato Elements advertises itself as the unlimited creative subscription. On this website, you’ll be able to access around 54 million creative assets through a single subscription. There are endless resources to unlock here, ranging from templates for your graphics to video templates, audio, and stock photos. 

Unlike most marketplaces, Envato gives you peace of mind by promising only the highest quality designs and graphics. Your content comes with quality assurance, and there are many PSD elements on the site, too, including stationery and web design templates, mock-ups, and more. Categories for your creative content include:

  • Stock photos
  • Video templates
  • Music
  • Sound effects
  • Graphic templates
  • Graphic designs
  • Presentation templates
  • Fonts
  • Photos
  • Web templates
  • Add-ons
  • CMS templates
  • WordPress resources
  • 3D content

Pricing: Pricing starts at only $16.50 per month, and this gives you unlimited access to everything on the site, including millions of digital assets and stock photos. You’ll also be able to use various courses and tutorials on the website too.

2. Elegant Themes

Elegant Themes is an all-in-one creative resource for website themes. The solution offers you access to some of the most popular WordPress themes worldwide. 

You’ll also get access to a visual page builder as part of the kit. When you sign up for the Elegant Themes subscription, you get access to all of the resources within, including the Divi page builder and WordPress theme, Extra, Monarch, Bloom, and more. If you’re a site builder or work on building pages for clients, this is a must-have subscription. 

Elegant themes are currently the go-to resource for more than 750,000 people. It’s also home to some of the highest-rated themes around. Features include:

  • Divi WordPress page builder
  • Endless WordPress themes
  • Page editing tools
  • Monarch, Bloom, and Extra 
  • Hundreds of website packs
  • Lifetime premium support
  • Unlimited website usage

You can either pay for yearly access with Elegant Themes or pay a one-off price for lifetime access. For most, the lifetime option is likely to be a pretty appealing one. You don’t have to worry about renewing your subscription this way.

3. Template Monster

Template Monster offers the “ONE” web development membership, perfect for creative professionals. The MonsterONE offering is a complete unlimited subscription for all of your creative needs, with access to unlimited downloads, new weekly items, and simple licensing. You also get plenty of support from the Template Monster Team. 

A goldmine for anyone who needs to upgrade their selection of video and photo assets, graphic templates, HTML templates, or anything else, Template Monster is packed full of amazing resources for any project. You can also find new products from fresh contributors all the time, so the value of your membership is constantly increasing. 

Features include:

  • HTML templates
  • Presentation templates
  • CMS templates
  • Graphic templates
  • Video assets
  • 3D models
  • Audio assets
  • WordPress themes and plugins

Pricing starts at a tiny $6.90 per month, with a slight discount if you pay yearly. The lowest-cost package gives you access to all of your graphic and design assets, but you won’t get any eCommerce or WordPress themes. However, if you upgrade to the all-in-one package at $14.95 per month, you get a more extensive range of resources.

4. Creative Market

Creative Market is another one of those amazing all-in-one environments for creatives and designers. This marketplace is supplied by thousands of independent artists from around the globe, each offering a host of top-quality designs and resources. You’ll find photos, graphics, templates, fonts, web themes, and countless other tools on the Creative Market. 

If you’re looking for sheer size, it’s hard to find another company that competes with the Creative Market package. There are literally millions of ready-to-use products available, including Instagram templates, textures, and procreate brushes. 

You’ll have access to 3D content for your immersive website designs and a host of purchasing products. Although there’s no “subscription model” per-se for this marketplace, you can invest in a credit plan that allows you to set how much you spend on your assets each month. 

Features include:

  • Millions of creative products
  • Huge selection of independent designers
  • Brushes, textures, templates 
  • Fonts and web content available
  • Huge selection of stock photos
  • Convenient credit plan

The individual purchasing plan is likely to appeal more to people just beginning to test Creative Market for the first time. However, if you want a subscription experience, we’d recommend using the credit plan to estimate how many credits you’ll need each month.

5. Adobe Stock

All web designers know Adobe. The chances are that no matter what kind of creative work you do, you’ve developed a few skills with an Adobe product, from Photoshop to Lightroom. Adobe Stock is also one of the leading platforms for images on any topic. 

Although Adobe Stock doesn’t compete with other marketplaces in terms of versatility, it still stands out as one of the main resources for designers. There are hundreds of millions of stock images, videos, editorial content, and vectors. You can also access a premium collection of custom content and 3D resources too. The great thing about Adobe stock is that you can easily create your own libraries and download content into your Adobe software. Resources include:

  • Stock photos
  • Premium images
  • 3D content
  • Vectors and brushes
  • Stock video footage
  • Royalty-free templates
  • Vector art and illustrations
  • Stock music and audio
  • Integration with Adobe software

Adobe Stock is a little pricier than some of the other marketplaces available today, but it’s still pretty impressive. You’ll pay around $29.99 per month for 10 assets per month, or you can access a full annual plan at $199.99 per month. The amount you pay will depend on the quality of the resources that you want to download.

6. Motion Elements

If Elegant Themes is the go-to resource for designers searching for WordPress themes and web design solutions, Motion Elements is the top choice for “motion” content. Here, you’ll find videos, SFX content, images, music, 3D solutions, and so much more. 

Though it’s located in Asia, Motion Elements is available worldwide. The marketplace offers a monthly subscription plan wherever you can download unlimited products to suit your needs. There are tons of resources to choose from here, including After Effects elements, tools for Lottie, Premiere Pro, FCPX motion, DaVinci Resolve, and more. 

Features include:

  • After Effects elements
  • Premier Pro resources
  • FCPX Motion
  • DaVinci Resolve
  • Video and audio content
  • Stock images
  • SFX resources
  • 3D content

Pricing starts at $16.50 per month for an unlimited annual plan. This means that you can download as much as you like without having to pay any more. There is a small discount if you pay for a full year of access in one go.

7. Creative Tim

Simple but effective, Creative Tim is an amazing resource for front-end and back-end content bundles. You get fully coded UI tools here that can help you create various mobile and web apps and a huge selection of dashboards and templates. If you’re the kind of designer who likes working on top of things like Bootstrap, React, Angular, Laravel, Node.js, and more, then Creative Tim has you covered. 

This is one of the more technical creative resource packages that we’ve looked at so far, but it has a lot of value to offer. That’s probably why there are already more than 1.5 million people using the service. You can search through administration dashboards, UI kits, premium templates, free content, and design systems. Of course, everything is easy to access too. Features include:

  • Frontend design technologies for endless platforms
  • Soft design, light design, paper design, and more
  • Bootstrap content 
  • Resources and third-party tools
  • Complete design and web kits
  • UI kits and templates
  • Admin and dashboard templates

There’s a free version of Creative Tim available for beginners if you want to keep your costs low, but it’s generally much better to sign up for the premium subscription. You can also purchase kits and templates on a one-off basis if you prefer to start small. However, the best prices generally come from buying the bundles from Creative Tim’s subscription side. 

8. Storyblocks

Similar in style to Motion Elements, Storyblocks is a creative design resource for any designer getting involved with the video world. This website is home to some of the best free-to-use videos around, with simple licensing available at a click. Aside from high-quality videos and templates, you also get audio and sound effects as part of your subscription and images or illustrations. 

The unlimited access pass gives you all the resources you might want, from 4K and HD footage to music and sound effects, After Effects templates, and photos, vectors, or illustrations. You can also export a host of your own video projects with access to the Maker video editor, which allows you to make various changes to your custom video content. Features include:

  • HD and 4K video footage
  • After Effects Templates
  • Sound Effects and Music
  • Photos, Illustrations, and Vectors
  • Unlimited video exports
  • Video editor access
  • Licensing support

The standard all-access plan from Storyblocks starts at a very affordable £39 per month for all of the content you might want. In addition, everything you get here is unlimited, so you don’t have to worry about running out of credits. There’s also an enterprise option available if you want to share access to resources with your team.

9. Motion Array

Motion Array is an all-in-one video creation platform for those with an eye for visual content. This fantastic resource center is packed full of valuable tools, from Da Vinci Resolve templates to Adobe Premier Pro Content. As part of your subscription payment, you’ll get endless presets, audio effects, plugins, video footage, tutorials, and more. 

Though a little more expensive than some of the other premier subscription services on the market, Motion Array does offer a lot of content that you can’t get anywhere else. There’s an unlimited marketplace constantly updating with access to royalty-free footage, stock photos, music, and sound effects. You also get plugins built for Premiere Pro. Features include:

  • Adobe Exchange elements
  • Final Cut Pro and DaVinci resolve templates
  • Royalty-free music and sound effects
  • Stock footage and video
  • Photos and images
  • Time-saving integrations with your favorite apps
  • Portfolio site builder
  • Stock media requests

There’s a free subscription option for Motion Array, which you won’t find from most alternatives. This only gives you access to some basic stock photos and assets, but it’s a nice way to start. When you are ready to upgrade, you can pay $29.99 per month for the full stock media library, as well as requests for custom media assets and exclusive plugins.

Start Stocking Up on Designer Resources

As a designer or creative professional, keeping a constant stack of resources available is crucial to your ongoing productivity. Fortunately, there are tons of premium marketplaces out there today, making it easier to access everything you need. 

Whether you’re looking for full UI kits and templates, or you want some free-to-use images and videos for the website content you’re creating, there’s something for everyone. With most monthly subscription services available at a highly affordable price, you could even sign up for multiple sites at once. 

Source

The post 9 Amazing Design-Resource Package Sites first appeared on Webdesigner Depot.

Categories: Designing, Others Tags: