8 dôvodov, prečo by ste si mali vybrať WordPress

Každý rok sa veľké spoločnosti zo sveta kreatívy predbiehajú v predikovaní farebných trendov na aktuálny rok. Každá má na to svoj vlastný postup, vždy je však založený na dátach a skúsenosti. My sme sa pozreli na to, čo pre rok 2021 vybrali Shutterstock a Pantone. A dali sme ti to aj do prehľadnej infografiky v závere.  Farba je v grafickom dizajne jeden z najvýraznejších elementov. A je úplne jedno, o aký typ dizajnu ide. Rovnako ako fonty či obrázky dokáže upútať či odpudiť pozornosť, prípadne vyvolať  nejakú konkrétnu asociáciu. Výberu farieb pre svoje projekty by si preto mal venovať náležitú pozornosť a nepokaziť to hneď na začiatku. Ak vidíš svoju budúcnosť práve v kreatívnom biznise, nebude na škodu oboznámiť sa s teóriou farieb a stavať na rokmi overených základoch.  Vždy je ale dobré vedieť, aké farby aktuálne letia. Pekný pohľad na vec nám ponúka report farebných trendov od známej spoločnosti Shutterstock. Ich predikcie stoja na analýze zvýšenej aktivity či nárastu stiahnutí jednotlivých obrázkov. Je až neuveriteľné, že sa pozerali na HEX kódy pre každý jeden pixel týchto obrázkov. Takto teda vznikli predikcie farebných trendov pre rok 2021. Set Sail Champagne (#FAEBD7)[Image]Ide o prírodný odtieň s veľmi univerzálnym použitím. Najmä ak chceme v dizajnoch docieliť “zemitý” prírodný efekt. Ide o jemný a svetlý odtieň oranžovej, pekne dopĺňa modré farebné palety. Fortuna Gold (#DAA520)[Image]Názov Fortuna pochádza z rímskeho pomenovania bohyne šťastia. Ide o výrazný, tmavý odtieň žltej. Je veľmi vďačná pri metalických dizajnoch, prípadne ako komplementárna farba pre predchádzajúcu.  Tidewater Green (#2F4F4F)[Image]Základom tejto farby sú modrá a zelená. Je veľmi vhodná pre doplnenie dizajnov s veľkou saturáciou farebnej schémy. Prípadne ju môžeme použiť ako vylepšenú verziu pre neutrálnej časti dizajnov, napríklad namiesto sivej.  Shutterstock ale nie je jediný, kto má čo povedať k farebným trendom. Spoločnosť Pantone rovnako predstavila farby pre rok 2021. Ich predpoveď stojí na sivej farbe Ultimate Gray a žltej farbe s príťažlivým názvom Illuminating. Mali by reprezentovať pocit tepla domova a zodpovednosti, čo je pre aktuálnu situáciu na mieste. Schopnosť spoločnosti Pantone predpovedať farebné trendy je ich marketingovou silou, ktorá pomáha dizajnérom z rôznych oborov ísť s trendami od sezóny k sezóne.  Illuminating Yellow (#F5DF4D)[Image]Podľa ich vlastného vyjadrenia ide o hrejivý odtieň  "jasnej a veselej žltej s temperamentom". Tento popis je pre danú farbu vcelku výstižný.  Ultimate Gray (# 939597)[Image]Ide o “kamenistú” farbu reprezentujúcu to pevné a spoľahlivé v živote. Je dobre asociovaný so stabilitou v živote.  Tieto farby by mali teda v aktuálnom roku dominovať. Avšak pozor na to, aby ste sa nimi nenechali príliš uniesť. Stále sú to iba trendy. A tie prichádzajú a odchádzajú. Vždy sa treba zamyslieť a vybrať farby pre svoj projekt na základe viacerých faktorov. Niekedy je treba byť trendy, niekedy nadčasový a niekedy to treba skombinovať.  Pripravili sme si pre teba aj jednoduchú infografiku na stiahnutie, kde sú všetky trendy farby roka 2021 pohromade: [Image] Celkom zaujímavé sú aj preferencie farieb rozdelené podľa krajín. Slovensko tam síce uvedené nie je, no keď sa pozrieš na Francúzsko, Nemecko, Švajčiarsko či Taliansko, trend je jasný. Náš odhad pre top farbu Slovenska by bola niektorá z nich. Čo ty na to?[Image] Zdroj: Shutterstock

Pripravili sme si pre teba parádnu akciu - vyskúšaj si naše online kurzy na 30 dní zadarmo. Žiadne triky, skryté podmienky. Jednoducho sa prihlásiš do predplatného na mesiac a môžeš študovať to, na čo máš chuť. Postup aktivácie kurzov na 30 dní zadarmoJe potrebné ísť na stránku https://skillmea.sk/akcia a potom kliknúť na OBJEDNAŤ.[Akcia od Learn2Code]Pokiaľ nie si u nás zaregistrovaný, vytvoríš si registráciu so svojím emailom. Pokiaľ už zaregistrovaný si, jednoducho sa prihlásiš do svojho účtu. Následne sa dostaneš na objednávkový formulár a musíš zaškrtnúť políčko 'Mám zľavový kupón'. A do tohto políčka vložíš kód  “yablko  [V políčku zľavový kód zadaj: yablko]” Voilà, už len klikneš Vstúpiť do kurzu a predplatné máš aktivované. Potom si už len vyberieš kurzy, ktoré chceš študovať. Napríklad pôjdeš na stránku https://skillmea.sk/kurzy/online-kurz-javascript-es6 a klikneš Zapísať kurz. Platnosť tvojho predplatného sa zobrazuje v tvojom profile, môžeš si to pekne skontrolovať. Kód je platný len do 31.8.2020. Čo všetko na teba čakáAbsolvuj toľko kurzov, koľko len chceš! Či už sa zameriavaš na grafiku, weby, video či marketing, vybrať si môžeš z viac ako 140 online kurzov zahŕňajúcich stovky hodín videa. Tvorba stránok, programovanie, Excel, ale ani fotografovanie či strih videa ti už nebudú robiť najmenší problém 💪 Poď na to a aktivuj si svoje predplatné na mesiac ešte dnes, kód je platný do 31.8.2020 👇

Od polovice júna máme prístup k prvej alpha verzii Bootstrap 5. Okrem novej verzie loga v sexi zátvorkách {B} sa dočkáme aj obrovského množstva vylepšení na všetkých frontoch. Už samotná dokumentácia je ukážkou vylepšeného vzhľadu a funkcionalít. Ak sa nevieš dočkať a chceš nový Bootstrap vyskúšať ASAP, začni tu. Je to stále Alpha verzia, neodporúčam ju preto nasadiť do žiadneho projektu. Kým dostaneme prvú betaverziu, môže prejsť zmenami, ktoré Ti vyrobia viac práce ako pomoci. Toto je "zostrih" najvýraznejších zmien, ktoré sme popísali presne pre Teba. Na mieru. [Image] JavaScriptUž žiadna podpora pre jQuery, aj keď..Pre niektorých killer feature, pre iných nič podstatné. Nový Bootstrap 5 nebude už obsahovať jQuery ako jednu zo svojich závislostí (aj napriek tomu, že jQuery "asi" stále žije a v apríli tohto roka sme dostali novú verziu jQuery - 3.5). Vieme to už dávno, už sme sa na to len tešili. Ešte nemáme oficiálne konečné čísla, ale očakávame, že Bootstrap vďaka tejto zásadnej zmene stratí tak na kilobajtoch, ako aj milisekundách. Ak si rozumieme 😉 Ak však stále jQuery vo svojom projekte potrebuješ, Bootstrap o tom bude vedieť a všetky komponenty pridá k modulom jQuery. V zásade to znamená, že stále bude možné inicializovať napríklad Tooltip komponent takýmto (starým) spôsobom (v prípade, že Bootstrap detekuje prítomnosť jQuery): $('[data-toggle="tooltip"]').tooltip(); Button pluginZmenami prejde aj state-management tlačidiel. Tie využívame napríklad aj ako indikátory ZAP/VYP pri rôznych funkcionalitách našich aplikácií. V starších verziách Bootstrap stav tlačidla riešil JavaScript. Bootstrap 5 sa snaží state-management riešiť v čo najvyššej miere dostupnými funkcionalitami a elementami HTML a CSS. Výsledkom tak je manažovanie stavu tlačidla pomocou checkbox a radio elementov. Naše ZAP/VYP tlačidlá tak budú o niečo spoľahlivejšie medzi rôznymi platformami. CSSCSS premennéS koncom podpory pre Internet Explorer prichádzajú aj nové možnosti. Jednou z nich sú aj CSS premenné. Tie sme uzreli už v predchádzajúcej verzii (root variables), avšak nie v takom rozsahu ako vo verzii 5 - kde sa css premenné dostali už aj do jednotlivých komponentov. Napríklad do tabuliek: .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 premenných je ich používanie bez nutnosti skompilovania SASS kódu do CSS. Takto bude možné hodnoty niektorých premenných meniť v priamo Inspectore prehliadača, čo urýchli prácu napríklad pri prototypovaní. V Bootstrap 5 stále ostane možnosť definície premenných v SASS (_variables.scss) súboroch, tak, ako sme to robili doteraz. Osobne by som neočakával kompletný prechod zo SASS premenných do CSS premenných. SASS má stále svoju nenahraditeľnú úlohu pri vytváraní premenných pomocou mapovania, preto očakávam, že budeme mať k dispozícii kombináciu SASS premenných s CSS premennými aj v budúcnosti. Vylepšený gridZískame nový grid-tier pre obrazovky so šírkou väčšou ako 1400px - .col-xxl-. Rovnako medzery medzi jednotlivými stĺpcami gridu budú po novom "ohybnejšie". Získame novú css utilitu g pre naše .row. S gutter hodnotami takto bude možné pracovať podobne ako s margin a padding hodnotami, na čo sme si už zvykli: .g-2 .gx-2 .gy-2 .g-lg-2 .g-0 FormuláreOd verzie 4 sme mohli vo svojich aplikáciách používať checkbox, radio a file elementy dvoma spôsobmi: 1. Buď sme použili pôvodný, systémový vzhľad (poskytnutý browserom), 2. alebo sme použili nový vzhľad (custom-checkbox, custom-radio). Verzia 5 bude obsahovať už len nový vzhľad týchto elementov. Formuláre tak budú vypadať rovnako v každom prehliadači a operačnom systéme a prispôsobenie vzhľadu týchto komponentov bude rovnako jednoduchšie. Rovnako bude odstránený aj potrebný .form-group wrapper. Nové formuláre už budú obsahovať len jednotlivé form elementy, bez tohoto DIV elementu. Hurá! Menej 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 potrebný len pre custom elementy (.form-select, .form-check, .form-file) a tiež .form-group. Utilities APIUtility sú veľmi užitočné CSS triedy, ktorými zvyčajne meníme parametre rámovaní, farieb, spôsobov zobrazenia, tieňovania a rôznych veľkostí (width, height, padding, margin, ...). V praxi sa občas stáva, že sa nevmestíme do preddefinovaných utilít, ktoré sú súčasťou Bootstrap-u. Preto sme niekedy vytvárali vlastné triedy. Napríklad ak nastavujeme šírku nejakého elementu, máme k dispozícii takéto css triedy: .w-25 /* 25% */ .w-50 /* 50% */ .w-75 /* 75% */ .w-100 /* 100% */ .w-auto /* auto */ Ak sme potrebovali 33% width, 90% width, alebo iné hodnoty, vytvorili sme vlastné CSS triedy, urobili override na $sizes mapu v nejakom vlastnom súbore, alebo sme nebodaj editovali priamo $sizes mapu v súbore premenných _variables.scss. Vo verzii Bootstrap 5 máme k dispozícii čistejší a užitočnejší SASS nástroj, ako modifikovať existujúce, alebo pridať nové utility do nášho projektu, témy, alebo pluginu pre 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ýsledkom takéhoto kódu budú nové css triedy utilít: .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šeniaIkonyS alpha verziou Bootstrap 5 prichádza aj piata alpha verzia Bootstrap Icons. Je to sada viac ako 1000 ikon, ktoré sú nadizajnované tak, aby parádne ladili s Bootstrapom. Nifty funkcionalita je tiež SVG sprite, ktorá nám umožňuje vytvoriť vlastnú mapu SVG ikon a efektne ju používať v projekte bez toho, aby sme kód špinili samotným SVG zdrojovým kódom. <svg class="bi" width="32" height="32" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#heart-fill"/> </svg> Osobne som veľkým fanúšikom Fontawesome ikon, ktoré obsahujú okrem enormne väčšieho množstva ikon a ich variantov aj veľmi užitočné spôsoby integrácie do projektov. Fontawesome nie sú však dostupné zdarma, preto možno v ďalšom projekte aj my v learn2code zvážime integráciu s Bootstrap ikonami. DokumentáciaUž na prvý pohľad je vidieť, že dokumentácia prešla zmenami. Tie však nie sú len vizuálne, ale vylepšený je aj samotný obsah. Orientácia medzi sekciami je vďaka novému postrannému menu rýchlejšia. Jednotlivé sekcie obsahujú aj akési "overview", ktoré postupne pribúdajú do každej hlavnej sekcie dokumentácie. Aj tieto zmeny urýchľujú navigáciu v dokumentácii a hľadanie želanej informácie je takto rýchlejšie. FarbyPribudli tiež nové farebné odtiene a vylepšený bude aj ich kontrastný pomer. ZáverTento text nie je a ani nechcel byť kompletným diffom verzie 4 s novou verziou 5. Omnoho viac noviniek nájdeš v stále rastúcej dokumentácii k Bootstrap 5. Ak som na niečo dôležité zabudol, pokojne sa ozvi v komentári.