9. listopadu ’22 | {𝐅}rontendisti

--- title: 9. listopadu ’22 | {𝐅}rontendisti tags: frontendisti --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} # {𝐅} Ataccama 9. listopadu '22 příště: 14. 12. 2022, Superkoders **v Brně** 8. 2. 2023, Heureka **v Praze** partneři: Ataccama, Emplifi, Artin, Pipedrive a Superkoders note: - poslední letošní setkání v Praze - pojeďte s námi do Brna na tradiční superkóderský punč - v Praze v únoru opět minikonference --- ## Pozvánky --- ### [JS Fwdays Europe](https://fwdays.com/en/event/javascript-fwdays-2022) The Full Stack JavaScript online conference for JS enthusiasts čt 10. listopadu 10.00–16.30 note: - témata: TypeScript, CSS, Micro-frontends, Remix, React - konference je v EN --- ### S Théseem bez překážek 2022 Online konference o digitální přístupnosti čt 10. listopadu, 10.00–15.00 (přestávka 12.00–13.00) note: - vysílá se živě na facebookových stránkách Střediska Teiresiás. --- ## Letem swwwětem --- ### Prohlížeče note: - oddechový čas po jarní a letní smršti - vynechávám Edge: novinkou je svislá lišta se záložkami… --- #### Firefox 106 _vydán 18. října 2022_ Nic zásadního… note: - pro frontendisty nic nového (pokud nepoužívají FF jako svůj výchozí prohlížeč ⇒ novinky v rozhraní a programu) - lze editovat PDF, respektive do PDF něco dokreslit, dopsat a uložit jako PDF --- #### Chrome 107 _vydán 25. října 2022_ - HEVC codec - Chrome 108 mění chování `overflow` u nahrazovaných prvků note: - kodek je úspornější v kompresi dat, podporován od Safari 14, FF zatím ne - uvidíme se až v příštím roce, na konci listopadu vyjde 108 - přináší změny, které mohou rozbít některé designy - [shrnutí na CSS tricks](https://css-tricks.com/a-couple-changes-coming-in-chrome-108/) - [A change to overflow on replaced elements in CSS](https://developer.chrome.com/blog/overflow-replaced-elements/) - [108: dynamické jednotky](https://twitter.com/bramus/status/1574495889300897805) – vlákno o tom, proč to trvalo --- #### Safari 16.1 _vydáno 24. října 2022_ Opravy note: - přináší jen opravy nově podporovaných vlastností - totéž chystaná 16.2 --- ## Zachyceno v síti --- [Container queries: demos](https://lab.ishadeed.com/container-queries/) [Container queries: intro](https://ishadeed.com/article/container-queries-are-finally-here/) note: - Ahmad Shadeed představuje velmi stravitelně container queries se sadou ukázek --- ### Nástroje a generátory --- - [Font inspector](https://wakamaifondue.com/beta/) - [Fallback font generator](https://screenspan.net/fallback) note: - inspektor: vytáhne z nahraného fontu všechny dostupné informace + vygeneruje CSS pro `@font-face` - fallback pomůže vyladit záchranný font, aby se předešlo CLS --- - [Retouch photos](https://cleanup.pictures/) note: - nahrajete fotku a retušujete s pomocí AI (lze překliknout vlevo nahoře na originál) --- - [Paper CSS](https://shkspr.mobi/blog/2022/06/paper-prototype-css/) note: - Paper CSS: repozitář s prvky ostylovanými jako načmáraný prototyp: když se chcete soustředit na prototypování a obsah - [ukázka](https://codepen.io/Kout/pen/KKeNWEb?editors=1100) --- ### Generátory CSS note: - generátory: kdo nějaký generátor použil? (já třeba gradienty a svého času `border-radius`) - šetří čas v prvotních fázích projektu - pomohou prolomit paralýzu z prázdné stránky a rychle začít --- - [generátor gridu](https://cssgrid-generator.netlify.app/) - [plastelína](https://neumorphism.io/#e0e0e0) - [mléčné sklíčko](https://markodenic.com/tools/glassmorphism-css-generator/) - [šišatoidy za hubičku](https://9elements.github.io/fancy-border-radius/) - [Animista](https://animista.net/play/basic) - [všecko dohromady](https://codepen.io/Kout/pen/OJEbmbo) note: - neumorphism: tvary s dvojitým stínem a zaoblením ⇒ působí plasticky --- - [knoflíkář](https://markodenic.com/tools/buttons-generator/) - [vlnky, vlny, vlnobití](https://getwaves.io/) - [stínítko](https://www.joshwcomeau.com/shadow-palette/) - [AnimatiSS](https://xsgames.co/animatiss/) – sada minimalistických animací - [Keyframes.app](https://keyframes.app/) note: - buttons: kliknutím se zkopíruje CSS, lze hned použít - [viz CodePen](https://codepen.io/Kout/pen/bGKBWVm?editors=1100) - stínítko: chytře využívá proměnné vlastnosti - getwaves: generuje SVG - AnimatiSS: „animovací utility“ - Keyframes.app: opačný přístup než předchozí, animaci si vytváříte sami - vizuální kontrola, vyladíte animaci, neřešíte kód --- - [sada generátorů pro CSS i JSX](https://omatsuri.app/gradient-generator) - [SVG generátory](https://www.smashingmagazine.com/2021/03/svg-generators/) – článek na Smashing Magazine - [Figma Autoname](https://www.figma.com/community/plugin/1160642826057169962/Figma-Autoname) note: - přistály mi v newsletteru po redakční uzávěrce… - generátory: přítomné programátorky a programátoři si můžou zkusit nějaký napsat jako projekt do svého portfolia --- [Holograms, light-leaks and how to build CSS-only shaders.](https://robbowen.digital/wrote-about/css-blend-mode-shaders/) note: - hutné efekty na obrázcích vytvořené moderním CSS - kompletní ukázky až dole na stránce --- [Your ~~account~~ content is permanently ~~suspended~~ gone](https://www.matuzo.at/blog/2022/your-account-is-permanently-suspended/): nesvěřujte svůj obsah cizím note: - ukládejte si obsah na své servery, můžete o něj snadno přijít --- Díky, prezentace za chvíli na [@frontendisti](https://twitter.com/frontendisti) note: - Pavel Peroutka - Ataccama - Sranda s Ramda: Funkcionální programování v příkladech - Lambda kalkulus, monada, high-order funkce, currying! Příklady ne teorie! - Petra Nuličková - Pale Fire Capital - Když ptáčka lapají... aneb na co si dat pozor než příjmu nabídku - Martin Michálek - Container Queries: krátká přednáška o velké věci