#+TITLE: CSS
Cool tricks with CSS.
* Codepens
https://codepen.io/Mamboleoo/pen/MWyNZYr rainbow hypercube
https://codepen.io/jh3y/pen/LYNZwGm impossible checkbox
https://webdevtrick.com/html-css-glitch-effect/
https://codepen.io/jh3y/pen/yLYXVJa -- snorlax
https://codepen.io/a-trost/pen/BaoZgaK -- neat animation!
https://codersblock.com/blog/using-css-to-control-text-selection/ -- using css to control text selection
https://codepen.io/lukes611/pen/dyyYXqP -- Tamagochi!!!
https://codepen.io/KilledByAPixel/pen/BaowKzv -- synth
https://codepen.io/YusukeNakaya/pen/dyYzRVx snakes, airpods or something
https://codepen.io/fossheim/pen/jObGxQQ nintendo switch through only css
https://codepen.io/chrisgannon/pen/RwWVJWd this man is rolling
https://codepen.io/chris22smith/pen/wvKqMOR -- make new fish!
https://codepen.io/jordirue/pen/NWGjwzz
https://codepen.io/collection/njYZRV image hovers!
https://codepen.io/RominaMartin/pen/OJVdvRm -- cool blood donation UI!
https://codepen.io/pavlovsk/pen/OJymPmd tree generation
https://codepen.io/pavlovsk/pen/OJymPmd -- braun radio design in css
https://codepen.io/KilledByAPixel/pen/abvqydY bloodflow codepen!
https://codepen.io/jkantner/pen/vYNRdJL catbread!
https://codepen.io/jkantner/pen/vYNRdJL
https://codepen.io/hailedev/pen/OJyvvVQ minecraft in css
https://codepen.io/cobra_winfrey/pen/LYpeKrd flowing letters !!
https://codepen.io/wendko/pen/jObajYq choosing cats !
https://codepen.io/cybercountess/pen/gOaoWmX isabelle's day off
https://www.virtualgoodsdealer.com/: copy the css from this page. it's what i want to emulate the mac windows!!!!
[[https://github.com/ESWAT/john-carmack-plan-archive][john carmack's archive]]
[[https://leimao.github.io/blog/Group-Lasso/][lasso reg]]
[[https://www.youtube.com/watch?v=smlQbh6jQvg&app=desktop][amenity detection]]
[[https://www.thisworddoesnotexist.com/][this word not exist]]
[[http://agdr.org/blog/][blog i like the look of]]
[[http://math.ucr.edu/home/baez/twf.html][this week's finds ! cool content!]]
[[https://johncarlosbaez.wordpress.com/][wp blog for above]]
https://codepen.io/toshiya-marukubo/pen/oNbgPRX neat orbit thing
https://codepen.io/oliviale/pen/BaoXOOP fake newspaper !
https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/ mad magazine folding simulation!
https://www.simplified.guide/ssh/disable-timeout ssh timeout :: good reference.
https://shibumi.dev/posts/ good blog, some useful information and things to learn here
https://www.tessera.li/ math visualizations in js
https://avanier.now.sh/ i love this website
https://avanier.now.sh/w/bucket.html make a bucket list !
https://avanier.now.sh/w/glossary.html words i like
https://avanier.now.sh/w/links.html curated links and resources
https://avanier.now.sh/w/orion.html programming on android?
https://avanier.now.sh/w/navire.html
use all of these technologies -- check them out!
https://avanier.now.sh/w/natalie.html very cool; look into bringing this to
class instead of a laptop for taking notes!
https://avanier.now.sh/w/navire.html please do use this style for a website.
http://evenunto.net/ yooo
https://hraew.autophagy.io/ project and personal information repostiory. very cool interface
https://hraew.autophagy.io/antimber/ very cool; a uniform switch for theming and system configuration that integrates with a set of personal preferences
https://kaemura.com/ incredible website and experiments
https://avanier.now.sh/w/work.html incredible interface
https://avanier.now.sh/w/holly.html computer console; used as a portable ocmputer at school? very cool!
https://avanier.now.sh/w/rabbit.html great idea
https://avanier.now.sh/w/josh.html i love this
https://avanier.now.sh/w/malin.html firefox theme?
https://anxl.faith/ nut my pants
https://heracl.es/ cool projects found below; navigation of films, diy kit for router, etc
https://shards.lectronice.com/ this is pcool.
https://ellugar.co/ mexican game developer!
https://shoelace.style/ a minimal css starter kit
[[https://latex.now.sh/][latex in css!]]
[[https://tachyons.io/][responsive css framework]]
[[https://every-layout.dev/][relearn css layout]]
[[https://github.com/mcnuttandrew/cssql]["""Esoteric"" ""Programming"" ""Language"" transpiler for converting SQL to CSS "]]
** fun css
[[https://codepen.io/chrisgannon/pen/oNjqpLy][slider]]
[[https://codepen.io/chrisgannon/pen/oNjqpLy][inherit!]]
[[https://codepen.io/chrisgannon/pen/oNjqpLy][wow animation!]]
[[https://github.com/lionheart/pinboard.py][pinboard]]
[[https://github.com/brainrape/windows-95-ui-kit][Windows 95 UI Kit]], and [[https://themesberg.com/product/ui-kit/windows-95-ui-kit][Windows 95 UI Kit]]
[[https://github.com/brainrape/win95.css][brainrape/win95.css: Responsive Bootstrap 4 windows 95/98 theme & landing t]]
[[https://web.dev/one-line-layouts/][Ten modern layouts in one line of CSS]]
[[https://www.tailwindtoolbox.com/][Tailwind Toolbox - Free Starter Templates and Components for Tailwind CSS]]
[[https://tympanus.net/codrops/2021/02/10/simple-css-line-hover-animations-for-links/][simple css line hover animations for links!]]
* Convention
** Don't use Margin
[[https://www.amazon.com/dp/B0771V3SSP/?tag=wtpl-20][Don't use Margin]]
Margin breaks component encapsulation because components impact everything surrounding them and external to them.
It also makes reusability difficult and impacts external components.
The stack component, similar to other spacer components,
is useful for adding arbitrary spaces internal to and external from different components. THese help define discrete units for space as well which can be standardized across the application.
* vulnerabilities
[[https://github.com/saizai/cssfingerprint][saizai/cssfingerprint: a research project to see how well the CSS history hack can fingerprint a user]]
[[https://easings.net/][all of the different CSS easing functions]]
https://codepen.io/MrBlank/pen/JjXxovL cool css animation with envelope opening
https://tympanus.net/codrops/2020/10/05/recreating-the-100-days-of-poetry-effect-with-shader-scrolltriger-and-css-grid/
https://polypane.app/css-3d-transform-examples/
[[https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style][count in CSS]]
** Security
*** Do not blindly copy paste
[[https://lyngvaer.no/log/browser-to-clipboard-tainted][source]]
In this code segment, it's trivial to hide the truth of the text that's being copied, thus resulting in a blind paste into terminal being malicious:
#+BEGIN_SRC html
fuck
#+END_SRC
One way the author recommends safe pasting is via this command:
#+BEGIN_SRC zsh
alias prepaste='builtin fc -e "vim -c %d -c \"set paste\""'
#+END_SRC
This opens the line pasted in vim before sending it to the browser, encouraging you to preview and edit it.
css modules: https://github.com/css-modules/css-modules. a specification and convention for how we should interface with CSS.