Tyto barvy by měly udávat designové trendy v roce 2021

Připravili jsme si pro tebe parádní akci - vyzkoušej si naše online kurzy na 30 dní zdarma. Žádné triky, skryté podmínky. Jednoduše se přihlásíš do předplatného na měsíc a můžeš studovat to, na co máš chuť. Postup aktivace kurzů na 30 dní zdarmaJe třeba jít na stránku https://skillmea.sk/akcia a potom klepnout na OBJEDNAT.[Akcia od Learn2Code]Pokud nejsi u nás zaregistrován, vytvoříš si registraci se svým emailem. Pokud již zaregistrovaný jsi, jednoduše se přihlásíš do svého účtu. Následně se dostaneš na objednávkový formulář a musíš zaškrtnout políčko 'Mám slevový kupón'. A do tohoto políčka vložíš kód “yablko  [V políčku zľavový kód zadaj: yablko]” Voilà, už jen klikneš Vstoupit do kurzu a předplatné máš aktivované. Pak už si jen vybereš kurzy, které chceš studovat. Například půjdeš na stránku https://skillmea.sk/kurzy/online-kurz-javascript-es6 a klikneš Zapsat kurz. Platnost tvého předplatného se zobrazuje ve tvém profilu, můžete si to hezky zkontrolovat. Kód je platný pouze do 31.8.2020. Co všechno na tebe čekáAbsoluj tolik kurzů, kolik jen chceš! Ať už se zaměřuješ na grafiku, weby, video či marketing, vybrat si můžeš z více než 140 online kurzů zahrnujících stovky hodin videa. Tvorba stránek, programování, Excel, ale ani fotografování či střih videa ti už nebudou dělat sebemenší problém 💪 Pojď na to a aktivuj si své předplatné na měsíc ještě dnes, kód je platný do 31.8.2020 👇

Od poloviny června máme přístup k první alpha verzi Bootstrap 5. Kromě nové verze loga v sexy závorkách {B} se dočkáme i obrovského množství vylepšení na všech frontách. Už samotná dokumentace je ukázkou vylepšeného vzhledu a funkcionalit. Pokud se neumíš dočkat a chceš nový Bootstrap vyzkoušet ASAP, začni tady. Je to stále Alpha verze, nedoporučuji ji proto nasadit do žádného projektu. Než dostaneme první betaverzi, může projít změnami, které Ti vyrobí více práce než pomoci. Toto je "sestřih" nejvýraznějších změn, které jsme popsali přesně pro Tebe. Na míru. [Image] JavaScriptUž žádná podpora pro jQuery, i když..Pro některé killer feature, pro jiné nic podstatného. Nový Bootstrap 5 nebude již obsahovat jQuery jako jednu ze svých závislostí (i přesto, že jQuery „asi“ stále žije a v dubnu letošního roku jsme dostali novou verzi jQuery – 3.5). Víme to už dávno, už jsme se na to jen těšili. Ještě nemáme oficiální konečná čísla, ale očekáváme, že Bootstrap díky této zásadní změně ztratí jak na kilobajtech, tak na milisekundách. Pokud si rozumíme 😉 Pokud však stále jQuery ve svém projektu potřebuješ, Bootstrap o tom bude vědět a všechny komponenty přidá k modulům jQuery. V zásadě to znamená, že stále bude možné inicializovat například Tooltip komponent takovým (starým) způsobem (v případě, že Bootstrap detekuje přítomnost jQuery): $('[data-toggle="tooltip"]').tooltip(); Button pluginZměnami projde i state-management tlačítek. Ty využíváme například i jako indikátory ZAP/VYP při různých funkcionalitách našich aplikací. Ve starších verzích Bootstrap stav tlačítka řešil JavaScript. Bootstrap 5 se snaží state-management řešit v co nejvyšší míře dostupnými funkcionalitami a elementy HTML a CSS. Výsledkem tak je manažování stavu tlačítka pomocí checkbox a radio elementů. Naše ZAP/VYP tlačítka tak budou o něco spolehlivější mezi různými platformami. CSSCSS proměnnéS koncem podpory pro Internet Explorer přicházejí i nové možnosti. Jednou z nich jsou i CSS proměnné. Ty jsme spatřili již v předchozí verzi (root variables), avšak ne v takovém rozsahu jako ve verzi 5 – kde se css proměnné dostaly už i do jednotlivých komponent. Například do tabulek: .table { --bs-table-bg: #{$table-bg}; --bs-table-accent-bg: transparent; --bs-table-striped-color: #{$table-striped-color}; --bs-table-striped-bg: #{$table-striped-bg}; --bs-table-active-color: #{$table-active-color}; --bs-table-active-bg: #{$table-active-bg}; --bs-table-hover-color: #{$table-hover-color}; --bs-table-hover-bg: #{$table-hover-bg}; // Styles here... } Výhodou CSS proměnných je jejich používání bez nutnosti zkompilování SASS kódu do CSS. Takto bude možné hodnoty některých proměnných měnit v přímo Inspectoru prohlížeče, což urychlí práci například při prototypování. V Bootstrap 5 stále zůstane možnost definice proměnných v SASS (_variables.scss) souborech, tak, jak jsme to dělali dosud. Osobně bych neočekával kompletní přechod ze SASS proměnných do CSS proměnných. SASS má stále svou nenahraditelnou roli při vytváření proměnných pomocí mapování, proto očekávám, že budeme mít k dispozici kombinaci SASS proměnných s CSS proměnnými iv budoucnosti. Vylepšený gridZískáme nový grid-tier pro obrazovky o šířce větší než 1400px - .col-xxl-. Rovněž mezery mezi jednotlivými sloupci gridu budou nově "ohebnější". Získáme novou css utilitu g pro naše .row. S gutter hodnotami takto bude možné pracovat podobně jako s margin a padding hodnotami, na co jsme si již zvykli: .g-2 .gx-2 .gy-2 .g-lg-2 .g-0 FormulářeOd verze 4 jsme mohli ve svých aplikacích používat checkbox, radio a file elementy dvěma způsoby: 1. Buď jsme použili původní, systémový vzhled (poskytnutý browserem), 2. nebo jsme použili nový vzhled (custom-checkbox, custom-radio). Verze 5 bude obsahovat už jen nový vzhled těchto prvků. Formuláře tak budou vypadat rovněž v každém prohlížeči a operačním systému a přizpůsobení vzhledu těchto komponentů bude stejně jednodušší. Rovněž bude odstraněn i potřebný .form-group wrapper. Nové formuláře již budou obsahovat jen jednotlivé form elementy, bez tohoto DIV elementu. Hurá! Méně kódu! 🙂 <form> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> ... </form> Wrapper bude potřebný pouze pro custom elementy (.form-select, .form-check, .form-file) a také .form-group. Utilities APIUtility jsou velmi užitečné CSS třídy, kterými obvykle měníme parametry rámování, barev, způsobů zobrazení, stínování a různých velikostí (width, height, padding, margin,...). V praxi se občas stává, že se nevejdeme do předdefinovaných utilit, které jsou součástí Bootstrap-u. Proto jsme někdy vytvářeli vlastní třídy. Například pokud nastavujeme šířku nějakého elementu, máme k dispozici takové css třídy: .w-25 /* 25% */ .w-50 /* 50% */ .w-75 /* 75% */ .w-100 /* 100% */ .w-auto /* auto */ Pokud jsme potřebovali 33% width, 90% width, nebo jiné hodnoty, vytvořili jsme vlastní CSS třídy, udělali override na $sizes mapu v nějakém vlastním souboru, nebo jsme nebodaj editovali přímo $sizes mapu v souboru proměnných _variables.scss. Ve verzi Bootstrap 5 máme k dispozici čistší a užitečnější SASS nástroj, jak modifikovat stávající, nebo přidat nové utility do našeho projektu, tématu nebo pluginu pro Bootstrap - utilities API: $utilities: map-merge( ( "width": ( property: width, class: w, values: ( 33: 33%, 90: 90% ) ), "input-padding": ( property: padding, class: ip, values: ( 0: 0, 1: .3rem, 2: .5rem, 3: .7rem, 4: .9rem, 5: 1rem, ) ) ), $utilities); Výsledkem takového kódu budou nové css třídy utilit: .w-33 /* nastaví width na 33% */ .w-99 /* nastaví width na 90% */ .ip-1 /* nastaví padding na .3rem */ .ip-2 /* nastaví padding na .5rem */ .ip-3 /* nastaví padding na .7rem */ .ip-4 /* nastaví padding na .9rem */ .ip-5 /* nastaví padding na 1rem */ Ostatní vylepšeníIkonyS alpha verzí Bootstrap 5 přichází také pátá alpha verze Bootstrap Icons. Je to sada více než 1000 ikon, které jsou nadesignovány tak, aby parádně ladily s Bootstrapem. Nifty funkcionalita je také SVG sprite, která nám umožňuje vytvořit vlastní mapu SVG ikon a efektně ji používat v projektu, aniž bychom kód špinili samotným SVG zdrojovým kódem. <svg class="bi" width="32" height="32" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#heart-fill"/> </svg> Osobně jsem velkým fanouškem Fontawesome ikon, které obsahují kromě enormně většího množství ikon a jejich variant i velmi užitečné způsoby integrace do projektů. Fontawesome nejsou však dostupné zdarma, proto možná v dalším projektu i my v learn2code zvážíme integraci s Bootstrap ikonami. DokumentaceUž na první pohled je vidět, že dokumentace prošla změnami. Ty však nejsou jen vizuální, ale vylepšen je i samotný obsah. Orientace mezi sekcemi je díky novému postrannímu jménu rychlejší. Jednotlivé sekce obsahují také jakési "overview", které postupně přibývají do každé hlavní sekce dokumentace. I tyto změny urychlují navigaci v dokumentaci a hledání požadované informace je takto rychlejší. BarvyPřibyly také nové barevné odstíny a vylepšen bude také jejich kontrastní poměr. ZávěrTento text není a ani nechtěl být kompletním diffem verze 4 s novou verzí 5. Mnohem více novinek najdeš ve stále rostoucí dokumentaci k Bootstrap 5. Pokud jsem na něco důležitého zapomněl, klidně se ozvi v komentáři.

Tento týden ti na Learn2Code přinášíme 4 nové kurzy, ve kterých jsme dali prostor několika novým tématům. Jsou to online kurzy zaměřené především na soft skills, zpestřením je určitě šachový kurz se slovenskou jedničkou Jánem Markošem. Zaujalo? Přečti si krátké představení kurzů v článku. Prezentační dovednosti - základyPokud i ty míváš roztřesená kolena vždy, když máš vystoupit na pódium nebo prezentovat svůj nápad před skupinou lidí, měl bys zaměřit pozornost na tento kurz. Nikdo jako řečník z nebe nespadl, i ty se máš možnost osvojit si a zdokonalit své prezentační dovednosti tak, abys při vystupování působil/a sebevědomě. Co máš dělat při vystupování s rukama, kam se dívat a jak pracovat s publikem ti vysvětlí Andrej Mažáry - lídr Slovenských Toastmasters (globální organizace věnující se řečnictví) a středoevropský šampion v řečnických improvizacích.   Jak přemýšlet při fotografováníV nabídce máme mnoho kurzů zaměřených na technickou stránku fotografie. Vytvořit dobrou fotku však není jen věcí kompozice a techniky, fotka by měla být nositelem příběhu, emoce, kterou chce fotograf zachytit. Učit se budeš od tří úspěšných a oceňovaných fotografů, kteří se věnují především dokumentární a reportážní fotografii. Každý z nich ti poskytne vlastní pohled na postupy a techniky, které při focení používají, jak pracují s objektem, s různými zdroji světla, prozradí ti kompoziční tipy a nápady. Kurz je určen tobě, máš-li už zvládnuté základy práce s fotoaparátem, možná uvažuješ nad focením jako svým živobytím a hlavně chceš tvořit fotky, které budou výjimečné.  Kurz podnikání - jak začítKurzem tě bude provázet osm zakladatelů a CEO úspěšných slovenských firem. Tím myslíme značky jako Tuli, CURAPROX, daren & curtis, VISIBILITY, Be Cool a další. V tutoriálech se s tebou podělí o své zkušenosti, Know-how a zodpoví důležité otázky, nad kterými možná uvažuješ i ty. Jak myšlenku přeměnit na realitu, nápad na fungující byznys? Jak umíš odhadnout jeho úspěch? Jakou roli hrají brand, firemní kultura či hodnoty firmy? Vysvětlí ti i plusy a minusy partnerství v podnikání, jak a kdy přijímat nové zaměstnance a co dělat, kdyby to celé nevyšlo. Šachy (Coming soon)Dlouholetá šachová jednička na Slovensku Ján Markoš odhaluje své šachové mistrovství. Uč se od něj o šachových strategiích, taktikách či síle jednotlivých figur. Objevíš strategické a taktické postupy, o kterých jsi možná dosud nevěděl. Kurz je určen mírně a středně pokročilým šachistou. Ať už rozehráváš šachové partie online nebo tváří v tvář, tento kurz tě dostane na vyšší úroveň. Našel jsi kurz, který tě zaujal a bude pro tebe přínosným? Pokud máš případně návrh na další témata kurzů, které bys v Learn2Code uvítal, napiš do komentáře.