Skip to content

Commit 59eb37e

Browse files
committed
Vale first pass. Design/Web fully passes
Run `vale --config .vale.ini content/`
1 parent 7ada8a2 commit 59eb37e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1894
-253
lines changed

.vale.ini

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
StylesPath = styles
2+
3+
MinAlertLevel = suggestion
4+
5+
Vocab = OpWords
6+
7+
Packages = write-good, Hugo
8+
9+
[*.md]
10+
; Custom shortcode to ignore a Vale suggestion
11+
BlockIgnores += (?s) *({< vale >}.*?{< .vale >})
12+
; Ignore attributions, as they likely contain a name that Vale would complain about
13+
BlockIgnores += (?s) *({< attribution >}.*?{< .attribution >})
14+
; Ignore image embeds, as they likely have non-word file names
15+
BlockIgnores += (?s) *(!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\))
16+
; Ignore links with the first letter capitalized, as it's likely to an external article.
17+
BlockIgnores += (?s) *(\[[A-Z][^\]]*\]\(http(.*?)\s*\s*\))
18+
BasedOnStyles = Vale, write-good
19+

content/Design/animation.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# Animation
22

3-
[Why is "Choppy" Animation Better? (YouTube, Doodley)](https://www.youtube.com/watch?v=BBoVomEOKbc)
3+
{{< vale >}}[Why is "Choppy" Animation Better? (YouTube, Doodley)](https://www.youtube.com/watch?v=BBoVomEOKbc){{< /vale >}}

content/Design/digital.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ inkscape
6464

6565
dotgrid
6666

67-
[SVGPathEditor](https://yqnn.github.io/svg-path-editor/) ([Github](https://github.com/Yqnn/svg-path-editor))
67+
[SVGPathEditor](https://yqnn.github.io/svg-path-editor/) ([GitHub](https://github.com/Yqnn/svg-path-editor))
6868

6969
### 3D Art
7070

@@ -150,7 +150,7 @@ https://lospec.com/palette-list
150150
* [Color Emulation of the GameBoy](https://byuu.net/video/color-emulation/)
151151
* [Hello hsluv - blog post about how hsluv works](https://austinjones.onfabrik.com/blog/hello-hsluv)
152152
* [Graphics & Palettes - Super Nintendo Entertainment System Features Pt. 01 (YouTube)](https://www.youtube.com/watch?v=57ibhDU2SAI&ab_channel=RetroGameMechanicsExplained)
153-
* [Digital Video Introduction (Github)](https://github.com/leandromoreira/digital_video_introduction#how-does-a-video-codec-work) - "A hands-on introduction to video technology: image, video, codec (av1, vp9, h265) and more (ffmpeg encoding)."
153+
* [Digital Video Introduction (GitHub)](https://github.com/leandromoreira/digital_video_introduction#how-does-a-video-codec-work) - "A hands-on introduction to video technology: image, video, codec (av1, vp9, h265) and more (ffmpeg encoding)."
154154
* [Oklab](https://bottosson.github.io/posts/oklab/), [An interactive review of Oklab (Raph Levien's Blog)](https://raphlinus.github.io/color/2021/01/18/oklab-critique.html) - "A perceptual color space is desirable when doing many kinds of image processing"
155155
* [The hyperbezier pen tool (cmyr.net)](https://www.cmyr.net/blog/hyperbezier.html)
156156

content/Design/gen.md

+41-21
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
11
# Generative Art
22

3+
{{< tip >}}
4+
5+
AI tools, and to a lesser extend non-AI based generative art tools, have been contentious among artists for a while now. While the reasons for the apprehension vary, two common threads come up a lot:
6+
7+
* Is it ethical, and should it be legal, to train these systems on existing images with out consent from the artists?
8+
9+
This **way** out of scope for this page, but if you think no, that doesn't exclude you from using all generative tools - most don't use AI at all.
10+
11+
* How can artists can prove they drew a piece instead of using an AI tool?
12+
13+
One solution to this is to post a each piece with a WIP from earlier in the process or a time lapse of the creation process. This is something a lot of viewers already appreciate anyway, and, depending on your workflow, may be low effort.
14+
15+
{{< /tip >}}
16+
17+
{{< tip >}}
18+
19+
Due to the copy right office deciding on the un-copyright-ability of AI generated images with tools like DALL·E 2, Midjourney, and Stable Diffusion, there's some questions about how this will affect the copyright-ability of other generative tools. I don't want to comment if that's good or bad on this page, but you should at least be aware of it.
20+
21+
{{< /tip >}}
322

423
{{< columns >}}
524

6-
This page is almost completely devoid of actual educational content. Instead, I've tried to make the most complete list of generative art tools and libraries on the internet. Of course, I can't actually make an exhaustive list and may be missing some of the newest tools and ideals, so please check out these other communities for more:
25+
This page is almost entirely devoid of actual educational content. Instead, I've tried to make the most complete list of generative art tools and libraries on the internet. Of course, I can't actually make an exhaustive list and may be missing some of the newest tools and ideals, so please check out these other communities for more:
726

827
<--->
928

@@ -17,7 +36,7 @@ This page is almost completely devoid of actual educational content. Instead, I'
1736

1837
{{< tip >}}
1938

20-
You may notice this page lacks AI generative art tools such as DALL·E 2, Midjourney, & Stable Diffusion. This isn't because they're not interesting, it's because the space is [rapidly evolving](https://the-decoder.com/nvidias-ediffi-is-an-impressive-alternative-to-dall-e-or-stable-diffusion/) and I don't want to maintain constantly changing lists!</br></br>If you're totally new to AI Art, see [Stable Diffusion is a really big deal](https://simonwillison.net/2022/Aug/29/stable-diffusion/) by [@simonw](https://twitter.com/simonw), but even that is relatively old now and new features are coming rapidly, like the ability to pose characters in the scene.
39+
You may notice this page lacks AI generative art tools such as DALL·E 2, Midjourney, & Stable Diffusion. This isn't because they're not interesting, it's because the space is {{< vale >}}[rapidly evolving](https://the-decoder.com/nvidias-ediffi-is-an-impressive-alternative-to-dall-e-or-stable-diffusion/){{< /vale >}} and I don't want to maintain constantly changing lists!</br></br>If you're totally new to AI Art, see {{< vale >}}[Stable Diffusion is a really big deal](https://simonwillison.net/2022/Aug/29/stable-diffusion/){{< /vale >}} by [@simonw](https://twitter.com/simonw) but even that is getting old now as new features and extensions come out, like the ability to pose characters in the scene.
2140

2241
{{< /tip >}}
2342

@@ -31,7 +50,7 @@ If you're interested in generative music and sounds as well, you may want to che
3150

3251
{{< columns2 >}}
3352

34-
[roberthodgin - meander](http://roberthodgin.com/project/meander)
53+
{{< vale >}}[roberthodgin - meander](http://roberthodgin.com/project/meander){{< /vale >}}
3554

3655
<--->
3756

@@ -346,7 +365,7 @@ Noise maker can make a ton of generative art pieces, as you can see at the right
346365

347366
{{< columns2 >}}
348367

349-
[Noisey-Shapes (Github)](https://github.com/cnfrancis/noisey-shapes)
368+
[Noisey-Shapes (GitHub)](https://github.com/cnfrancis/noisey-shapes)
350369

351370
<--->
352371

@@ -364,7 +383,7 @@ Noise maker can make a ton of generative art pieces, as you can see at the right
364383

365384
<--->
366385

367-
[Github repo](https://github.com/jasonwebb/SuperformulaSVG-for-web)
386+
[GitHub repo](https://github.com/jasonwebb/SuperformulaSVG-for-web)
368387

369388
<--->
370389

@@ -466,7 +485,7 @@ Test different penrose tilings. If you edit the HTML you increase the slider lim
466485

467486
{{< columns2 >}}
468487

469-
[FastNoise2](https://github.com/Auburn/FastNoise2)
488+
[FastNoise2 (GitHub)](https://github.com/Auburn/FastNoise2)
470489

471490
<--->
472491

@@ -486,7 +505,7 @@ Modular node based noise generation library
486505

487506

488507

489-
[Themer (Live Demo)](https://themer.dev/?colors.dark.accent0=#F59597&colors.dark.accent1=#F2B494&colors.dark.accent2=#F2DB94&colors.dark.accent3=#C8F29D&colors.dark.accent4=#94F2DD&colors.dark.accent5=#94CEF2&colors.dark.accent6=#DB9CF7&colors.dark.accent7=#F79CE0&colors.dark.shade0=#44484F&colors.dark.shade7=#C7F3FF&colors.light.accent0=#E11418&colors.light.accent1=#E0530D&colors.light.accent2=#D2A623&colors.light.accent3=#61AB16&colors.light.accent4=#06B38B&colors.light.accent5=#34A4E7&colors.light.accent6=#A549CD&colors.light.accent7=#CC52AD&colors.light.shade0=#DBF7FF&colors.light.shade7=#3E444F&activeColorSet=dark&calculateIntermediaryShades.dark=true&calculateIntermediaryShades.light=true) [(Github)](https://github.com/mjswensen/themer), meant for making themes for Linux environments, but makes good textures in general
508+
[Themer (Live Demo)](https://themer.dev/?colors.dark.accent0=#F59597&colors.dark.accent1=#F2B494&colors.dark.accent2=#F2DB94&colors.dark.accent3=#C8F29D&colors.dark.accent4=#94F2DD&colors.dark.accent5=#94CEF2&colors.dark.accent6=#DB9CF7&colors.dark.accent7=#F79CE0&colors.dark.shade0=#44484F&colors.dark.shade7=#C7F3FF&colors.light.accent0=#E11418&colors.light.accent1=#E0530D&colors.light.accent2=#D2A623&colors.light.accent3=#61AB16&colors.light.accent4=#06B38B&colors.light.accent5=#34A4E7&colors.light.accent6=#A549CD&colors.light.accent7=#CC52AD&colors.light.shade0=#DBF7FF&colors.light.shade7=#3E444F&activeColorSet=dark&calculateIntermediaryShades.dark=true&calculateIntermediaryShades.light=true) [(GitHub)](https://github.com/mjswensen/themer), meant for making themes for Linux environments, but makes good textures in general
490509

491510
{{< /details >}}
492511

@@ -498,15 +517,15 @@ Modular node based noise generation library
498517

499518
[r/pixelsorting (Reddit)](https://www.reddit.com/r/pixelsorting/)
500519

501-
[PixelSorting using Processing (Github)](https://github.com/jeffThompson/PixelSorting)
520+
[PixelSorting using Processing (GitHub)](https://github.com/jeffThompson/PixelSorting)
502521

503-
[python pixelsort, with masks (Github)](https://github.com/satyarth/pixelsort)
522+
[python pixelsort, with masks (GitHub)](https://github.com/satyarth/pixelsort)
504523

505-
[Python again, but with animation support (Github)](https://github.com/rkargon/pixelsorter)
524+
[Python again, but with animation support (GitHub)](https://github.com/rkargon/pixelsorter)
506525

507526
[Pixsort for Adobe After Effects (15 USD)](https://wunkolo.itch.io/pixsort)
508527

509-
[GenerateMe (Github)](https://github.com/tsulej/GenerateMe) - lots of glitch effects
528+
[GenerateMe (GitHub)](https://github.com/tsulej/GenerateMe) - lots of glitch effects
510529

511530
{{< /details >}}
512531

@@ -648,7 +667,7 @@ Chaotica is **free for noncommercial use**, and can render up to 1.23 megapixel
648667
{{< /columns2 >}}
649668

650669
{{< columns2 >}}
651-
[p5-live (Github)](https://github.com/yangsu/p5-live)
670+
[p5-live (GitHub)](https://github.com/yangsu/p5-live)
652671
<--->
653672
live coding for p5.js - you'll probably want the VS Code Extension
654673
<--->
@@ -676,7 +695,7 @@ JS library for visulaization & creative coding
676695

677696
{{< best >}}
678697

679-
[Hydra (Github)](https://github.com/ojack/hydra)
698+
[Hydra (GitHub)](https://github.com/ojack/hydra)
680699

681700
{{< /best >}}
682701

@@ -695,7 +714,7 @@ JS library for visulaization & creative coding
695714
{{< /columns2 >}}
696715

697716
{{< columns2 >}}
698-
[Thixels by Ramsey Nasser (Github, Linux Only)](https://github.com/nasser/thixels)
717+
[Thixels by Ramsey Nasser (GitHub, Linux Only)](https://github.com/nasser/thixels)
699718
<--->
700719
"[PICO8](https://www.lexaloffle.com/pico-8.php) inspired live coding visual instrument."
701720
<--->
@@ -711,15 +730,16 @@ JS library for visulaization & creative coding
711730
{{< /columns2 >}}
712731

713732
{{< columns2 >}}
714-
[Ronin (Github)](https://github.com/hundredrabbits/Ronin)
733+
[Ronin (GitHub)](https://github.com/hundredrabbits/Ronin)
715734
<--->
716735
"Ronin is a procedural graphics tool designed to automate simple graphical tasks, like resizing, cropping, coloring, and generating algorithmic images. It interprets a minimal dialect of LISP, look at the examples to better understand how this all works."
717736
<--->
737+
718738
<iframe width="100%" height="150" src="https://www.youtube.com/embed/SgAWGh1s9zg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></a>
719739
{{< /columns2 >}}
720740

721741
{{< columns2 >}}
722-
[The Force (Github)](https://github.com/shawnlawson/The_Force)
742+
[The Force (GitHub)](https://github.com/shawnlawson/The_Force)
723743
<--->
724744
… this one basically lacks all description. Best you'll get is the [api docs in the wiki](https://github.com/shawnlawson/The_Force/wiki/API)
725745
<--->
@@ -752,7 +772,7 @@ Realtime GPU shader editor
752772
{{< /columns2 >}}
753773

754774
{{< columns2 >}}
755-
[Nimp (Github)](https://github.com/dan335/nimp)
775+
[Nimp (GitHub)](https://github.com/dan335/nimp)
756776
<--->
757777
"Node-Based Image Manipulation Program"
758778
<--->
@@ -762,7 +782,7 @@ Realtime GPU shader editor
762782
{{< columns2 >}}
763783
[vvvv](https://vvvv.org) - Heads up VVVV requires a licence for comercial use that is rather expensive
764784
<--->
765-
"vvvv is a hybrid visual/textual live-programming environment for easy prototyping and development. It is designed to facilitate the handling of large media environments with physical interfaces, real-time motion graphics, audio and video that can interact with many users simultaneously."
785+
{{< vale >}}"vvvv is a hybrid visual/textual live-programming environment for easy prototyping and development. It is designed to facilitate the handling of large media environments with physical interfaces, real-time motion graphics, audio and video that can interact with many users simultaneously."{{< /vale >}}
766786
<--->
767787
![vvvv](https://vvvv.org/sites/default/files/imagecache/large/images/vvvv_Propaganda_NEU_00_1.png)
768788
{{< /columns2 >}}
@@ -785,7 +805,7 @@ Realtime GPU shader editor
785805
{{< /columns2 >}}
786806

787807
{{< columns2 >}}
788-
[Cyril (Github)](https://github.com/cyrilcode/cyril) [(Main site)](http://cyrilcode.com)
808+
[Cyril (GitHub)](https://github.com/cyrilcode/cyril) [(Main site)](http://cyrilcode.com)
789809
<--->
790810
The Cyril programming language is designed for fast prototyping of visualisations and live coding visuals.
791811
<--->
@@ -957,7 +977,7 @@ is all that's needed to generate this shape:
957977
{{< columns2 >}}
958978
[ShaderGif](https://github.com/antoineMoPa/shadergif)
959979
<--->
960-
You can make gifs with shaders (glsl) and Javascript (either with raw canvas or with the coder-friendly p5.js library).
980+
You can make gifs with shaders (glsl) and JavaScript (either with raw canvas or with the coder-friendly p5.js library).
961981
<--->
962982
![](https://github.com/antoineMoPa/shadergif/raw/master/public/screenshot.png?v=1)
963983
{{< /columns2 >}}
@@ -1083,7 +1103,7 @@ Dain-App is a free app that let you take any form of media like movies, stop-mot
10831103
{{< /columns2 >}}
10841104

10851105
{{< columns2 >}}
1086-
[Neat auto lighting/shading software (Github pages site)](htt://lllyasviel.github.io/PaintingLight/)
1106+
[Neat auto lighting/shading software (GitHub pages site)](htt://lllyasviel.github.io/PaintingLight/)
10871107
<--->
10881108
"[]. Based on this observation, we design an algorithm to both estimate the density of strokes in a digital painting using color geometry, and then generate novel lighting effects by mimicking artists' coarse-to-fine workflow."
10891109
<--->

content/Design/photo.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22

33
[TODO]
44

5-
[This Guy Flipped an Element in an Old Lens and Got ‘Magic’ Bokeh (PetaPixel)](https://petapixel.com/2018/08/02/this-guy-flipped-an-element-in-an-old-lens-and-got-magic-bokeh/)
5+
{{< vale >}}[This Guy Flipped an Element in an Old Lens and Got ‘Magic’ Bokeh (PetaPixel)](https://petapixel.com/2018/08/02/this-guy-flipped-an-element-in-an-old-lens-and-got-magic-bokeh/){{< /vale >}}
66

77
https://hackaday.com/2022/10/12/enjoy-the-beauty-of-corona-discharge-with-this-kirlian-photography-setup/

content/Design/uiux.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ slug: "UI"
1616

1717
<--->
1818

19-
![dragonphone](/design/dragonphone.webp ':size=45%')
19+
{{< vale >}}![dragonphone](/design/dragonphone.webp ':size=45%'){{< /vale >}}
2020

2121
{{< attribution >}}[Source](https://twitter.com/kogotsuchidark/status/1313211696677302273/photo/1){{< /attribution >}}
2222

@@ -48,7 +48,7 @@ https://bids.github.io/colormap/
4848

4949
[Scrollbar Blindness (Sven Kadak's Blog)](https://svenkadak.com/blog/scrollbar-blindness)
5050

51-
[Github Dark Mode is too Dark. (Karen ying's blog)](https://blog.karenying.com/posts/github-darkmode-sucks)
51+
[GitHub Dark Mode is too Dark. (Karen ying's blog)](https://blog.karenying.com/posts/github-darkmode-sucks)
5252

5353
Figma
5454

content/Design/web/access.md

+10-9
Original file line numberDiff line numberDiff line change
@@ -86,34 +86,35 @@ color: #2672c8;
8686
<div class="item style2">♚ <b>High contrast colors</b> can look good. ♛</div>
8787
<div class="item style7">🙟Like this, nice nature-y theme.🙝</div>
8888
<div class="item style4"><b>→</b> Or this in-your-face purple <b>←</b></div>
89-
<div class="item style3">🗹🗹🗹 All of these boxes are <b>high contrast.</b></div>
89+
<div class="item style3">🗹🗹🗹 these boxes are <b>high contrast.</b></div>
9090
<div class="item style6">!<b>!</b>!</div>
9191
<div class="item style9">And it's not like this is hard to do. &nbsp&nbsp Hell, it's easier!</div>
92-
<div class="item style8">All of these palettes were made with </div>
92+
<div class="item style8">These palettes made using</div>
9393
<div class="item style10">https://randoma11y.com</div>
9494
<div class="item style5"> Though it's not hard to make your own.</div>
9595
<div class="item style11"> You just have to give a shit.</div>
9696
</div>
9797

9898

99+
99100
## Image alt-text
100101

101-
## Using basic-ass HTML the way it was intended.
102-
Don't make your buttons divs.
102+
## Using basic-ass HTML the way it's intended.
103+
Don't make your buttons `div`s.
103104

104105

105106
## Finding a balance.
106-
A lot of sites that preach accessibility miss a point that everyone is thinking "If I'm focused on accessibility, I won't be able to work as fast or make as many cool things.". Yep. That's true.
107+
A lot of sites that preach accessibility miss a point that everyone is thinking "If I'm focused on accessibility, I won't be able to work as fast or make {{< vale >}}as many{{< /vale >}} cool things.". Yep. That's true.
107108

108-
Hell, above where I wrote "🗹🗹🗹 All of these boxes are <b>high contrast.</b>"
109+
Hell, above where I wrote "🗹🗹🗹 these boxes are <b>high contrast.</b>"
109110

110-
It's likely a screen reader will read that as
111+
It's possible a screen reader will read that as
111112

112-
<p style="font-family: 'Courier New', monospace;">ballot box bold check ballot box bold check ballot box bold check all of these boxes are <b> high contrast bold text end. </b></p>
113+
<p style="font-family: 'Courier New', monospace;">ballot box bold check ballot box bold check ballot box bold check these boxes are <b> high contrast bold text end. </b></p>
113114

114115
With the bold text being in a, uh, bold voice? It depends on the user's screen reader.
115116

116-
And, yeah, oof. That's not a good experience. So, it's worth trying to balance your use of text, images, and (do-as-I-say-not-as-I-do) unicode abusing spice.
117+
And, yeah, oof. That's not a good experience. It's worth trying to balance your use of text, images, and (do-as-I-say-not-as-I-do) Unicode abusing spice.
117118

118119
## Not being a dick™
119120
TODO: Facebook putting each letter of sponsored in a different div breaking things.

0 commit comments

Comments
 (0)