Wyszukaj / o blogu

JS: jQuery

Opublikowano ptk 18 grudnia 2020 w javascript • Tagi: jquery, javascript, js, css • 3 min read

jQuery

Użytkowanie

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

Składania

$ - znak dostępu do biblioteki jQuery

selektory (np. ) - przeszukują dokument w celu …


Czytaj dalej

React: modułowy CSS (CSS Modules)

Opublikowano sob 05 grudnia 2020 w react • Tagi: react, css, radium, styled components, styled-components, css modules • 2 min read


css-modules

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 …


Czytaj dalej

React: Styled Components oraz Radium

Opublikowano ptk 04 grudnia 2020 w react • Tagi: react, css, radium, styled components, styled-components, css modules • 2 min read

react-styled-components

Styled components

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 …


Czytaj dalej

Pobór na front

Opublikowano sob 28 listopada 2020 w praca • Tagi: css, js, react, html • 1 min read

over the top

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.

CSS/HTML/JS...

Cracking the front-end interview

front-end-interview-handbook i wersja PL Podręcznik Frontend przygotowujący do …


Czytaj dalej

CSS konwencje nazewnictwa klas -> OOCSS, BEM i BEMIT

Opublikowano czw 18 czerwca 2020 w css • Tagi: css, html, klasy, bem, bemit, oocss • 3 min read

BEM

Podstawowe zasady nazewnictwa

Nazewnictwo klas CSS zaczyna się od... wybrania odpowiedniego taga HTML a później...

Podział na 3 sposoby nazywania klas

  • 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 …


Czytaj dalej

HTML: semantyczny HTML

Opublikowano śro 17 czerwca 2020 w html • Tagi: css, html, semantyczny html, semantic • 2 min read

semantyczny-html

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 …

Czytaj dalej

HTML: podstawy tabel

Opublikowano wto 16 czerwca 2020 w html • Tagi: css, html, semantyczny html, semantic • 1 min read

html-tabele

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">

Przykładowa tabela

Model Planet Class
1 R2D2 Naboo Droid
2 …

Czytaj dalej

Grid przy pomocy HTML i klas oraz Grid:CSS

Opublikowano pon 15 czerwca 2020 w css • Tagi: css, grid, layout, rwd • 4 min read

grid

Grid -> HTML + klasy CSS

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 …


Czytaj dalej

Sass - struktura projektu

Opublikowano wto 02 czerwca 2020 w saas • Tagi: sass, scss, css, javascript, gulp, gulpfile • 1 min read

struktura-projektu-scss

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 …


Czytaj dalej

Sass - wbudowane moduły i ich metody

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 …

Czytaj dalej

Sass - wprowadzenie

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

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:

* definiowanie zmiennych

* pisanie składni opartej na zagnieżdżaniu selektorów w …


Czytaj dalej

CSS - max(), min(), clamp()

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 …


Czytaj dalej

CSS - neumorphism

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 …


Czytaj dalej

CSS - centrowanie treści

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ą …


Czytaj dalej

CSS - wyśrodkowany układ strony

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 …


Czytaj dalej

CSS - reset i normalizer

Opublikowano ndz 05 kwietnia 2020 w css • Tagi: css, normalizer, reset, Toggle Debug CSS • 1 min read

Reset

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 …


Czytaj dalej

CSS - rysowanie poligonów (clip-path: polygon())

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.

  • 0% 0% - górny lewy róg
  • 100% 0% - górny prawy róg
  • 0% 100% - dolny lewy róg
  • 100% 100% - dolny prawy róg

zatem:

  • 50% 0 …

Czytaj dalej

CSS - calc()

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 …

Czytaj dalej

CSS:pseudo-klasy

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 …


Czytaj dalej

CSS::pseudo-elementy

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 …


Czytaj dalej