paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

thegitfather

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

hdragomir

<script type="text/javascript">
    (function () {
      "use strict";
      // once cached, the css file is stored on the client forever unless
      // the URL below is changed. Any change will invalidate the cache
      var css_href = './index_files/web-fonts.css';
      // a simple event handler wrapper
      function on(el, ev, callback) {
        if (el.addEventListener) {
          el.addEventListener(ev, callback, false);

samthor

// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
// does not support `nomodule` is probably not being used anywhere. The code below is left
// for posterity.

/**
 * Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
 * load <script nomodule> anyway. This snippet solve this problem, but only for script
 * tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
 *
 * Again: this will **not** prevent inline script, e.g.:

leekelleher

-- Copied from Hendy https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/72814-creating-a-list-of-unused-doc-types#comment-233729
-- Find all unused docTypes
-- These results may contain docTypes that are masters of used ones, so need to exclude these too...

SELECT
	A.nodeId as 'DocTypeId',
	B.text AS 'Name',
	A.alias AS 'Alias'
FROM
	cmsContentType A LEFT JOIN

jonathantneal

Practical ARIA Tabs

This is a small guide to marking up fully accessible tabs. Consider using PostHTML ARIA Tabs as a practical solution.

The Rules

1. Add tablist role to the <ul> to indicate it contains tabs.
2. Add presentation role to each <li> to bypass its list item state.
3. Add tab role to each <a> to incidate it is an actual tab.
4. Add href and aria-controls to each <a> to reference its tab panel.

vitalyfriedman

1. Highlight a recommended option,

2. Allow users to switch currency (€/$/£)

3. Allow users to switch pricing monthly/yearly

4. Keep the entire pricing plan area clickable

5. Use slider to calculate how much a user would save

6. Provide free first month for good engagement

7. Prominently highlight testimonials prominently

8. Repeating call to action on top and bottom

9. Sell benefits instead of features

10. Indicate that users can cancel any time


zersiax

Umbraco 8 Basic Website Tutorial: Accessibility/UX notes

Intro

This is a stream of consciousness-style list of notes I put down while trying to go through the Umbraco 8 Basic Site tutorial. Accessibility hurdles will be noted, nitpicky as they may be. This test is run using the dev/v8 branch on the 18th of September 2019.

Installer

• In the first screen, the button to customize the installation is a link ( tag). This is confusing as links and buttons do different things and a user hopping from button to button will outright miss this control.
• On the page to select if you want a starter kit or not, the link to accept the starter kit has the link text of "Loading".
• On the installer progress page, the heading structure is broken; the progress is denoted by a heading 3, with a "Did you know?" heading level 2 above it. There's two things wrong with this, namely:

cssquirrel

// Use whatever namespacing works for your project.
namespace YourSite.Web.Controllers.Api
{
    using System.IO;
    using System.Linq;
    using System.Net;
    using System.Net.Http;
    using System.Threading.Tasks;
    using System.Web;
    using System.Web.Http;