Category: HTML and CSS

Responsive YouTube embeds

  1. Embed YouTube video in an iframe.
  2. Place the iframe in a container div.
  3. Give the iframe position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  4. The container gets position: relative; and its ::before pseudo-element is: content: ""; display: block; padding-bottom: n% where n is the ratio of height to width multiplied by 100. So a 16:9 video should be given a bottom padding of 9 / 16 * 100, or 56.25%.

This solution was provided by Thomas Wilburn in the News Nerdery Slack, and it can be coded auto-magically for you here.

The hidden danger in target='_blank'

Now I know why I often see rel="noopener" inside <a> tags. But it turns out rel="noopener" is not enough! We really need this:

<a href="https://somesite.com/" target="_blank" rel="noopener noreferrer">

Read more here.

tl;dr — The page that is opened in a new tab or window can change the window.opener.location property so that a user who goes back to your page will fall into phishing-scam hell!

I’ve seen this happen from those annoying cover-all pop-up adds on mobile, and I’ve learned the only way out is to close the original window or page. Now I know why.

Intrinsic Web Design

Jen Simmons just ushered in this new name for the way(s) web design is changing. She has been adding great videos on her YouTube channel, Layout Land, for about the past two months. She gave this presentation at An Event Apart in Seattle yesterday. There are notes on what she said here and here.

Oh, yeah, her talk is titled “Everything You Know About Web Design Just Changed.”

Now we can use white space in web design, for real.

We can squish, or shrink, or stretch. Deliberately.

Even media queries are changing. This is beyond responsive design, which has been our paradigm for eight years (!) already.

See Simmons’s cool examples of grid and more.

Also this great video series of how to write CSS that works in every browser.

Workout with flexbox

I started and completed the Code School flexbox course today, and then started and finished the surprisingly fun Flexbox Froggy exercises to reinforce what I’d just reviewed. It was very helpful to do this combination.

I wrote some Flexbox notes here back in August. Now I’ve got a more complete set of notes (offline) and a new Pen to remind me how to use flexbox the next time I need it.

Accessibility resources

Last night I went to a local developers meetup. Two people spoke about accessibility and shared these tips and links.

Web Content Accessibility Guidelines (WCAG)

These guidelines come from the W3C, and there are three levels of compliance. Level A is the minimum, and level AAA is the highest standard.

How to Meet WCAG 2.0 is the most user-friendly guide (there are several, with various amounts of complexity and details).

Web Content Accessibility Guidelines (WCAG) Overview is much more detailed (and less user friendly).

General tips to make sites accessible

  • Indicate errors (e.g. in a form submission) with icons and/or text — not only with color.
  • Popups and overlays must be able to be closed with a keyboard action, and not require a mouse click.
  • Field labels must be provided as readable text; do not use only the overwritable placeholder text inside a form field.
  • Use focus as well as hover if you have popup information. That is, make it appear on focus as well as on hover.
  • Line-height should be 1.5x (ugh — I prefer 1.4x).
  • Use @media print { } to write CSS specifically for printing — this might help with accessibility for some users (media queries).
  • I always tell students: “Don’t use click here as a link.” A good way to explain why: Make sure the purpose of the link can be determined by the link text alone.

Tools and sites to help you make your pages, apps accessible

Audits in Chrome Developer Tools — this is awesome! Use it to test your pages.

tota11y.js “helps visualize how your site performs with assistive technologies.” It is “a single JavaScript file that inserts a small button in the bottom corner of your document. (It’s on this very page.)” Go there, click the small button, be amazed.

Color Safe — this site generates color palettes! “Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

WAVE, an online website analyzer — open this, paste in a URL, and see what happens. Also mind blowing.

ChromeVox is a free screen reader. Blind people use a screen reader to read the web out loud to them. If you install this Chrome extension, you can hear how a screen reader reads your page.

The A11Y Project: “A community-driven effort to make web accessibility easier.” Nice resources! Just take a look and you’ll see at a quick glance how helpful this can be.

Use an a11y linter — this advice applies especially if you’re using grunt or gulp in your workflow. If not (e.g. you only make small projects), the tools listed above will suffice.

aXe Chrome extension — not sure we need this if using Audits (see above), but it will find accessibility defects on your site.

NOTE: Accessibility is often abbreviated as a11y, where the number 11 refers to the number of letters omitted. It is often pronounced like alley.

Flexbox notes

Reviewing some flexbox concepts today. Flexbox is really handy for coding things like a row of social icons, as shown in this image:

Image: Social icons in a row

  • “A flex container expands items to fill available free space, or shrinks them to prevent overflow.”
  • “Flexbox layout is good at small-scale layouts, whereas the (emerging) Grid layout is intended for larger-scale layouts.”
  • “Instead of talking about horizontal (inline) and vertical (block), flexible boxes use the terms main axis and cross axis. … The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.” (source)

In today’s browsers (2017), this calls for various prefixes and several lines of CSS to declare the main axis:

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;

Having supplied those four lines of CSS, you’ve determined that the main axis of the element is horizontal. Following the flexbox standards, you can write simply flex-direction: row; and then (when you’ve written all your CSS) run the file through a formatter (such as Atom’s autoprefixer package) to get all the extra lines added for you.

“By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed” with flex-wrap: wrap; (source). This is important to consider if you have a lot of things in a row (such as the social icons above), and you don’t want them to shrink to little dots on a vertical phone screen — which they will do if you don’t wrap the line. Using wrap will make the icons do this on a phone:

Image: Social icons with flex wrap

Since I don’t use flexbox often, I always have to look this stuff up.

Resources

Useful sites for CSS, browser support issues

Found today while searching for answers to some coding questions:

Unminify: It’s impossible to read minified CSS, JavaScript, etc. This site accurately reformats minified code for you, making it human-readable.

Can I Use … ? Find out which browsers fully or partially support any given front-end web technology (such as box-sizing: all browsers!).

Should I Prefix? For some CSS properties, we need to include extra versions for Chrome, Firefox, or both (using the prefixes -webkit- or -moz-) — find out which properties still need these.

DiffChecker: Compare two text files. The differences between the two files (even spacing and tabs) are shown clearly with side-by-side highlighting.

Advice for starting to learn to code

Start learning HTML and CSS here:
https://www.codecademy.com/learn/learn-html
https://www.codecademy.com/learn/learn-css

Free interactive exercises at Dash/General Assembly:
https://dash.generalassemb.ly/

Supplement your HTML and CSS learning:
http://htmldog.com/guides/

Best first website host for students and faculty:
Reclaim Hosting
Your first domain name registration is free.

Look stuff up and get good answers: HTML
https://developer.mozilla.org/en-US/docs/Web/HTML

Look stuff up and get good answers: CSS
https://developer.mozilla.org/en-US/docs/Web/CSS

Anything from W3schools — DON’T USE IT!
Do not confuse the bad W3schools with the good, proper W3C —
https://www.w3.org/standards/

After you feel comfortable with HTML and CSS, start learning JavaScript.
NOT JAVA! That is a completely different language.
JavaScript makes the web interactive.
https://www.codecademy.com/learn/introduction-to-javascript

Best book for learners — new edition will be published in February 2018:
https://www.amazon.com/Learning-Web-Design-Beginners-JavaScript/dp/1491960205

A good book for learning JavaScript and jQuery:
https://www.amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647

Where to write your code

The best code editor is ATOM (Mac and Windows):
https://atom.io/

NOT DREAMWEAVER — never Dreamweaver!

Play with code interactively here:

Links updated Nov 9, 2017

css.php