From 5e97f43c10f04f24017fe1f652cf6bf37a59e226 Mon Sep 17 00:00:00 2001 From: Sami Samhuri Date: Tue, 11 Sep 2018 19:32:54 -0700 Subject: [PATCH] add Sub-Resource Integrity attributes on external sources --- public/_layout.ejs | 2 +- .../01/basics-of-the-mach-o-file-format.md | 6 ++-- .../working-with-c-style-structs-in-ruby.md | 4 +-- .../2010/11/37signals-chalk-dissected.md | 30 +++++++++---------- .../12/static-url-shortener-using-htaccess.md | 2 +- 5 files changed, 21 insertions(+), 23 deletions(-) diff --git a/public/_layout.ejs b/public/_layout.ejs index e2e23b0..66b2ef3 100644 --- a/public/_layout.ejs +++ b/public/_layout.ejs @@ -53,7 +53,7 @@ - + +

Segments

@@ -82,7 +82,7 @@ e.g. \_\_DATA or \_\_TEXT

The code exposes some more details about segment commands, but should be easy enough to follow.

- +

Sections

@@ -105,7 +105,7 @@ two underscores, e.g. \_\_bss or \_\_text

Finally, the Ruby code describing section structs:

- +

macho.rb

diff --git a/public/posts/2010/01/working-with-c-style-structs-in-ruby.md b/public/posts/2010/01/working-with-c-style-structs-in-ruby.md index 1b9da3d..8daf26f 100644 --- a/public/posts/2010/01/working-with-c-style-structs-in-ruby.md +++ b/public/posts/2010/01/working-with-c-style-structs-in-ruby.md @@ -28,11 +28,11 @@ supported by Array#pack is fairly easy to add though. First a quick example and then we'll get into the CStruct class itself. In C you may write the following to have one struct "inherit" from another: - + With CStruct in Ruby that translates to: - + CStructs act like Ruby's built-in Struct to a certain extent. They are instantiated the same way, by passing values to #new in the same order they diff --git a/public/posts/2010/11/37signals-chalk-dissected.md b/public/posts/2010/11/37signals-chalk-dissected.md index 86ca8a1..c68b26c 100644 --- a/public/posts/2010/11/37signals-chalk-dissected.md +++ b/public/posts/2010/11/37signals-chalk-dissected.md @@ -27,7 +27,7 @@

2k, 61 lines. 10 of which are Google Analytics JavaScript. Let's glance at some of it.

- +

Standard html5 doctype, and a manifest for application caching.

@@ -35,7 +35,7 @@

The interesting thing about the HTML is that without any JavaScript or CSS the document would be a completely blank white page (except for a strange looking share button w/ no title). Talk about progressive enhancement. Here's a look at the HTML:

- +

Onward.

@@ -59,16 +59,14 @@ background.jpg 1024x946px

The background is the blackboard itself, and is almost square at 1024x946. The cork border and light switch are there too. This is set as the background-image of the html element and is positioned at a negative x or y in order to centre it properly. CSS media queries are used to detect the screen's orientation. This way the same image is used for both orientations, clever.

- +

 

Chalkboard

Just a canvas element positioned over the chalkboard using media queries. There's also an image element called "output" used to render an image for sharing.

- +

 

Sprites

@@ -87,8 +85,7 @@ chalk-sprites.png

The dimmers background color is black at 67% opacity. The shade element fades in using -webkit-transition: on its visibility property while the dimmers use CSS3 transitions on their background. The dimmers are positioned using media queries as well, one on each side of the board. Interestingly their parent shade has a height and width of 0. Rather than each having a unique id they just have the class "dim" and the :nth-child pseudo-class selector is used to position them independently.

- +

If you took a look at the HTML before you'll have noticed there's no shade class defined on the body element. Looks like they're using JavaScript to add the shade class to body, triggering the transitions to the visible shades and setting the dimmers backgrounds to black at the same time, causing the fading effect. The shade fades in while the ledge and share button fade out.

@@ -99,8 +96,7 @@ chalk-sprites.png

There are 2 layers to the tools on the ledge. There are the images of the tools and their indicators, but also an anchor element for each tool that acts as targets to select them. When tools are select the indicators fade in and out using CSS3 transitions on opacity by adding and removing the class "active" on the tool.

- +

There are pattern images for each colour of chalk, and one for the the eraser. The eraser "pattern" is the entire blackboard so erasing it doesn't look ugly. I love that kind of attention to detail.

@@ -126,7 +122,7 @@ chalk-sprites.png

Initialization

 

- +

First we get a handle on all the elements and the canvas' 2d drawing context. I almost want to say views and controls as it really feels just like hooking up a controller and view in a desktop GUI app. Sometimes the line between dynamic web page and web app are blurred, not so here. Chalk is 100% app.

@@ -138,7 +134,7 @@ chalk-sprites.png

Tools

 

- +

createPattern(name, callback) loads one of the pattern images, chalk-tile-*, and then creates a pattern in the drawing context and passes it to the given callback.

@@ -152,7 +148,7 @@ chalk-sprites.png

Drawing

 

- +

Drawing is done by listening for touch events on the canvas element. An array of points to draw is initialized to a 1-element array containing null. Null values make the draw function break up the line being drawn by skipping the next point in the array. x and y coords are initialized in touchstart, points are appended to the points array in touchmove, and the touchend handler appends two points and null to the points array to end the line. I'm not sure why [x, y] is used as the points in the touchend handler rather than coords from the event. Please leave a comment if you know why!

@@ -164,7 +160,8 @@ chalk-sprites.png

Light Switch & Shade

 

- + +

When the light switch is touched (or clicked) the shade class on the body element is toggled. Nothing to it.

@@ -172,7 +169,7 @@ chalk-sprites.png

Sharing

 

- +

The share window is opened after a 10ms delay, just enough time for any drawing to be completed before rendering the image. The image is created by assigning the result of canvas' toDataURL() method to the output image element's src attribute.

@@ -187,7 +184,8 @@ chalk-sprites.png

Have fun drawing. Thanks to 37signals for a beautiful (and useful) example of a few modern web technologies.

- + + + I think this is a pretty neat hack and have not seen this technique anywhere else so I thought I'd share it. Maybe someone else will find it interesting or useful for their blog. How far it scales won't be a concern until I have thousands of posts. That sounds like a good problem for future Sami to solve should it arise.