Opublikowano ptk 18 grudnia 2020 w javascript • Tagi: jquery, javascript, js, css • 3 min read
Link do biblioteki jQuery należy umieścić w sekcji head strony internetowej, w tym celu można wykorzystać dostępny kod (jQuery Core – All Versions) i przekopiować go do opracowywanego projektu lub wykorzystać link CDN
jQuery CDN – Latest Stable Versions
$ - znak dostępu do biblioteki jQuery
selektory (np. ) - przeszukują dokument w celu …
Opublikowano sob 05 grudnia 2020 w react • Tagi: react, css, radium, styled components, styled-components, css modules • 2 min read
Kolejnym sposobem na indywidualne stylowanie komponentów lub jego elementów w React są CSS Modules, który oparty jest na rozgraniczeniu warstwy CSS do osobnego pliku, następnie zaimportowania go do pliku zawierającego komponent i wykorzystywania tego importu (obiektu) w oparciu o przypisane do niego style, traktowane jako moduły.
W takim ujęciu style …
Opublikowano ptk 04 grudnia 2020 w react • Tagi: react, css, radium, styled components, styled-components, css modules • 2 min read
Biblioteka styled components po wyrenderowaniu nadaje własne nazwy klas, a informację przechowuje w head dokumentu, nie jest to zatem styl inlinowy.
Instalacja
npm i --save styled-components
1 - Import np. w App.js
import styled from 'styled-components'
2 - Użytkowanie odwołanie się do metod obiektu styled np. div, h1 etc …
Opublikowano sob 28 listopada 2020 w praca • Tagi: css, js, react, html • 1 min read
W poniższym poście zamieszczam linki przydane w procesie rekrutacji na Frontend'owca. Zebrane materiały zarówno omawiają wybrane zagadnienia jak i przedstawiają potencjalne pytania/zadania (oraz odpowiedzi/rozwiązania) jakie można spotkać w procesie rekrutacji na front-end developera.
Cracking the front-end interview
front-end-interview-handbook i wersja PL Podręcznik Frontend przygotowujący do …
Opublikowano czw 18 czerwca 2020 w css • Tagi: css, html, klasy, bem, bemit, oocss • 3 min read
Nazewnictwo klas CSS zaczyna się od... wybrania odpowiedniego taga HTML a później...
funkcjonalność (Functional class names) -> połączenie klasy z elementem ze względu na jego znaczenie selected-button, important-text
zawartość (Content-based class names) -> klasy wskazujące na zawartość elementu submit-button, intro-text
prezencja (Presentational class …
Opublikowano śro 17 czerwca 2020 w html • Tagi: css, html, semantyczny html, semantic • 2 min read
Znaczniki semantyczne określają znaczenie treści, która jest w ramach nich zamknięta. Nie powinny być wykorzystywane do pozycjonowania (od tego div) a do określania treści.
| HTML - tag | znaczenie |
|---|---|
<alt> |
alternative/opis w przypadku braku elementu lub dla czytnika |
<article> |
artykuł - rozumiany jako przedmiot rzecz / niezależna i zamknięta część strony |
| zawartość tego … |
Opublikowano wto 16 czerwca 2020 w html • Tagi: css, html, semantyczny html, semantic • 1 min read
| Sekcje Tabeli | HTML |
|---|---|
| Tabela | <table></table> |
| Sekcja nagłówka | <thead></thead> |
| Sekcja główna | <tbody></tbody> |
| Stopka | <tfoot></tfoot> |
| ---- | ---- |
| Wiersz | <tr></tr> |
| Komórka | <td></td> |
| Nagłówek tabeli | <th></th> |
| ---- | ---- |
| Zasięg (columna/wiersz) | <th scope="col/row"> |
| Łączenie (liczba kolumn) | <th rowspan="2"> |
| Model | Planet | Class | |
|---|---|---|---|
| 1 | R2D2 | Naboo | Droid |
| 2 … |
Opublikowano pon 15 czerwca 2020 w css • Tagi: css, grid, layout, rwd • 4 min read
Grid przy pomocy klas (starsza wersja) jest czym innym niż tzw. Grid CSS (nowsza wersja rozwiązania)
W przypadku rozwiązania opartego jedynie o HTML i odpowiednio stylowane klasy css - całość oparta jest na kolumnach (pion) oraz wiersze(poziom)
Kolumna ustala szerokość a wiersz "trzyma" elementy w jednej …
Opublikowano wto 02 czerwca 2020 w saas • Tagi: sass, scss, css, javascript, gulp, gulpfile • 1 min read
Wraz z wzrostem wielkości projektu, większą rolę odgrywać będzie odpowiedni sposób strukturyzacji oraz modularyzacji plików zdefiniowanych w ramach niego stylów. Podział na odpowiednie moduły umożliwia również ponowne wykorzystanie wybranych części kodu w innych projektach.
Zwyczajowo przyjęło, się że plik, który importuje moduły (partials) a staje się łącznikiem pomiędzy nimi nazwany …
Opublikowano ndz 31 maja 2020 w saas • Tagi: sass, scss, css, javascript, gulp, gulpfile • 4 min read
Sass oferuje następujące wbudowane moduły color, list, map, math, meta, selector, string
Używanie modułu odbywa się poprzez jego zaimportowanie na początku poprzez odowłanie się do słowa kluczowego @use nazwy modułu oraz użycia gwiazdki lub bez użycia gwiazdki - wówczas każda metoda musi być poprzedzona nazwą modułu
@use 'sass:math';
$half: math …Opublikowano ptk 29 maja 2020 w saas • Tagi: sass, scss, css, javascript, gulp, gulpfile • 7 min read
CSS na sterydach - czyli Syntactically Awesome Style Sheets
Sass jest językiem skryptowym rozszerzającym możliwości CSS i wymaga kompilacji na CSS tak aby mógł być interpretowany przez przeglądarki w tym celu można wykorzystać Gulpa (odpowiedniej wtyczki) lun wtyczki VSC.
Sass pozwala na:
* pisanie składni opartej na zagnieżdżaniu selektorów w …
Opublikowano ndz 24 maja 2020 w css • Tagi: css, max, min, clamp, funkcje • 2 min read
min() - jest funkcją CSS i pozwala na oznaczenie najmniejszej wartości w przypadku szerokości obiektu i przyjmuje jedno lub więcej wyrażeń rozgraniczonych przecinkami jako parametry (istnieje możliwość mieszania jednostek np. px, vw, %) - najmniejszy z dwóch podanych parametrów w danym momencie jest obowiązujący.
.second-level {
width: min(50vw, 400px);
}
Przykładowo powyższy …
Opublikowano wto 07 kwietnia 2020 w css • Tagi: css, neumorphism, style, ux • 1 min read
Neoumorphism jest sposobem stylizacji elementów stron nawiązujący swoją estetyką znaną z środowiska różnego rodzaju smartfonów, choć w duże mierze przymina mi głównie te z nadgryzionym jabłkiem. Poprzez grę cieni ten styl stara się wywołać efekt estetycznej trójwymiarowości gdzie poszczególne elementy są wypukłe lub wklęsłe a ich kształty są obłe lub …
Opublikowano wto 07 kwietnia 2020 w css • Tagi: css, centrowanie, wyśrodkowanie • 1 min read
Istnieje parę sposobów na to w jaki sposób można wycentrować treść, na środku strony w taki sposób aby znajdowała na środku strony.
Można to zrobić łątwo przy pomocy flexboxa, ale gdy nie chcemy zmieniać deklaracji 'rodzeństwa' (rodzica) danego elementu wówczas nie będzie to możliwe.
Bez jakiejkolwiek ingerencji w deklaracje przypisaną …
Opublikowano wto 07 kwietnia 2020 w css • Tagi: css, flex, flexbox, layout, układ • 2 min read
Jednym popularniejszych obecnie stosowanych układów stron internetowych jest oparty na wyśrodkowanej treści - dzięki temu treść strony nie rozjeżdża się na boki przy większych ekranach.
Taki układ można łatwo osiągnąć przy użyciu flexboxa, odpowiednio zagnieżdżonego div'a oraz przypisanej mu klasy określającej jego szerokość
Przyjmę, że będziemy operować na 3 częściach …
Opublikowano ndz 05 kwietnia 2020 w css • Tagi: css, normalizer, reset, Toggle Debug CSS • 1 min read
Każda z przeglądarek ma swoje domyślne style, celem resetu jest ich wyzbycie się i doprowadzenie do sytuacji, w której zadeklarowane style własne spowodują, możliwie jak najbliższe sobie zachowanie w różnego typu wyszukiwarkach internetowych. Normalizer zaczyna się od gwiazdki * wyznaczając, że deklaracja odnosi się do wszystkich elementów. Tu często …
Opublikowano sob 04 kwietnia 2020 w css • Tagi: css, clip-path, poligon, rysowanie, polygon • 1 min read
Deklaracja clip-path: z przypisaną wartością polygon() pozwala na rysowanie poligonów o dowolnych kształtach.
W ramach niej wpisane są pary procentów oddzielone przecinkami określającymi miejsce znajdowanie się węzła.
zatem:
Opublikowano czw 02 kwietnia 2020 w css • Tagi: css, calc, length, angles, time, number, integer • 1 min read
Właściwość calc() jest funkcją której mogą być przypisane wartości:
length, angles, time, number, integer.
Jest szczególnie przydatna w obliczaniu wartości relatywnych - ponieważ:
pozwala na wykonywanie matematycznych wyrażeń dodawania, odejmowania, mnożenia, dzielenia (+,-,*,/)i wykorzystuje wynik jako wartość CSS, która przyjmuje wcześniej wspomniane wartości.
Przykładowe zastosowanie
50% rodzica dzielone przez 3
el …Opublikowano czw 02 kwietnia 2020 w css • Tagi: css, pseudo-klasy • 2 min read
Pseudo klasy pozwalają na wprowadzenie interaktywnego zachowania się strony przy pomocy CSS, przy pomocy tej deklaracji w zależności od zdefiniowanej sytuacji/stanu dany obiekt może przyjąć inny wygląd. Istotne jest to że deklaracja pseudoklasy poprzedzona jest dwukropkiem :
Przykładowy schemat zastosowania
selektor:pseudoklasa {
właściwość: wartość;
}
W przypadku linków istniejącą pseudoklasy
a …
Opublikowano czw 02 kwietnia 2020 w css • Tagi: css, pseudo-elementy, first-line, ::before, ::after, before, after • 2 min read
Pseudo elementy pozwalają na zadeklarowanie wyglądu odmiennego dla wybranego fragmentu tekstu lub wstawienie z pozycji CSS dodatkowego elementu. Pseudo elementy poprzedzone są podwójnym dwukropkiem :: np. ::first-line
Wzór zastosowania (za developer.mozzilla.org)
selector::pseudo-element {
property: value;
}
selektor::pseudo-element {
właściwość: wartość;
}
Innymi słowy pseudoelement jest słowem kluczowym, które w połączeniu z …