Sign in

chrome-88-news

V další verzi Chromu je opět několik novinek. Sepsal jsem krátky článek o těch, které mě nejvíce zaujaly.

Datum vydání verze Chrome 88: 19.ledna 2021

CSS vlastnost: aspect-ratio

Podpora v prohlížečích: tuto vlastnost zatím podporuje bohužel jen Chrome právě od verze 88

Vlastnost aspect-ratio za Vás vyřeší poměr stran, stačí jen nastavit výšku nebo šířku. Následně nastavíte v jakém poměru má být div/obrázek/iframe. V mém případě mám nastavený poměr stran 1:1.

Příklad nastavení poměru stran 1:1

.content {
width: 25%;
text-align: center;
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
color: white;
padding: 2em;
aspect-ratio: 1 / 1;
}

Javascript modules

Předností modulů je udržitelnost a čitelnost kódu.
Hlavní myšlenkou je import a export určitých částí kódu, tzn. že můžete kód rozsekat na několik částí, čímž se zvyšuje, již zmíněná přehlednost a udržitelnost.

2 typy exportu

  • default (export default)
  • standardní export (export)

Příklad

HTML struktura

<button id=”btnShowMess”>Show message</button>

<script type="module" src="app.js"></script> <!-- attribut type nastavíme na modul, aby prohlížeč věděl, že pracujeme s moduly -->

mess.js

export function Message(mess) {

console.log(mess);

}

app.js

import {Message} from ‘./mess.js’; // import funkce z mess.js

const btn = document.getElementById(“btnShowMess”);

btn.onclick = () => {

Message(“Hello world”);

}

Výsledek v konzoli po kliknutí na tlačítko Show message:


NPM-node package manager
NPM

Pro instalaci NPM je nutné nejprve nainstalovat Node.js (JS runtime postavený na Chrome V8 JavaScriptovém enginu).

Instalace NPM

npm install npm@latest -g - na macu a linuxu bude potřebova instalaci provést s administrátorským oprávněním (sudo) tedy:
sudo npm install npm@latest -g

Struktura souborů

node_modules

  • v této složce naleznete veškeré balíčky, které byly nainstalovány

package.json

  • JSON, který uchovává všechny informace o projektu a taktéž seznam všech nainstalovaných balíčků

{ “name”: “start-project”, “version”: “1.0.0”, “description”: “”, “main”: “”, “author”: “”, “license”: “ISC”, “devDependencies”: { “browser-sync”: “².26.13”, “gulp”: “⁴.0.2”, “gulp-autoprefixer”: “⁷.0.1”, “gulp-clean-css”: “⁴.3.0”, “gulp-concat”: “².6.1”, “gulp-sass”: “⁴.1.0”, “gulp-sourcemaps”: “³.0.0”, “gulp-stylelint”: “¹³.0.0”, “gulp-terser”: “².0.0”, “node-sass”: “⁴.14.1” }}

Základní příkazy

npm init


Pokud se chcete zbavit repetetivní, nudné práce a ušetřit si, tak spoustu času při vývoji Gulp je správnou volbou.

Pomocí Gulpu můžete optimalizovat obrázky, minifikovat soubory (css, js), spojovat soubory a mnoho dalšího.

Alternativy Gulpu jsou Webpack, Grunt a npm scripty.


profile-images

Jmenuji se Matěj Kunc a momentálně se živím jako HTML/CSS kodér, v malém start-upu Rondo. Je to moje první full-time práce, za kterou jsem nesmírně vděčný.

Svůj studentský život jsem ukončil po střední škole. Během střední školy jsem pracoval pro několik firem. Stavěl jsem webové stránky na redakčním systému Wordpress( Elementor, Divi), ale zároveň jsem občas něco nakódil od základu.

Můj cíl je se stát FE developer, každý den se snažím nějakým způsobem vzdělávat a přiblížit se, tak této pozici. …


css-tip-image

Tato vlastnost specifikuje, kde všude se uvnitř elementu bude vykreslovat obrázek nebo pozadí.

Výchozí hodnota je border-box.

Pro nastavení pozadí textu je v první řadě nutné nastavit background této vlastnosti. Přiřadíme zdroj obrázku, v mém případě url(“fire-bg.jpg”).

Dále deklarujeme background-clip s prefixem -webkit tedy -webkit-background-clip: text. Nestačí nám nastavit -webkit-background-clip na hodnotu text. Také musíme nastavit vlastnost color na transparent, jelikož barva textu přebíjí obrázek.

Výsledek bez vlastnosti color: transparent by vypadal takto:


Co je to vlastně HTML DOM?

  • zkratka DOM znamená (Document Object Model)
  • je možné s ním manipulovat pomocí JavaScriptu

Matty

HTML/CSS kodér s přesahem do Reactu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store