Polski frontend

Wszystkie artykuły

Zgłoś serwis
  • Kody, triki, sztuczki

    • Jak najprościej do WooCommerce dodać InPost

      Kody, triki, sztuczki 

      Jest to najprostszy sposób na dodanie InPost do sklepu - Woocommerce. Nie użyjemy tutaj żadnego dedykowanego pluginu. Przykład ten dodaje jedynie pole gdzie możemy wybrać, czy wyszukać nasz paczkomat. Dodamy te dane do zamówienia ale ich nie przeliczymy. Informacje o paczkomacie pojawiają się również w zamówieniu oraz mailu który jest

    • Ciekawy styl listy z użyciem wyłącznie css

      Kody, triki, sztuczki 

      Dlaczego ciekawy zapytacie, a no dla tego że z zachowaniem hierarchii zaznaczania elementów. Zaczynamy od html, prosta budowa więc nie ma co tłumaczyć. Zwykłe UL a w nim następne UL 😉 Oczywiście mozliwość zagnieżdżenia wielu ul. <ul> <li><a href="#">onion, chopped</a> <ul> <li><a href="#">tomato, chopped</a></li> <li><a href="#">cloves garlic, chopped, or more

    • Stylowanie przycisków radio/checkbox

      Kody, triki, sztuczki 

      Dzisiaj będzie o stylowaniu radio oraz checkbox butonów. Przykład jest w połączeniu z przekreślaniem treści, przydało się ostatnio w budowaniu składników przepisów. Zacznę od html, są to dwa formularze z butonami po kliknięciu których wstawimy w h3 te opcje (value) które zaznaczyliśmy. Poniżej skrócona wersja html, zaś na samym końcu

    • Ciekawy efekt z cieniem na każdej literze

      Kody, triki, sztuczki 

      Mała odskocznia i trochę styli na wieczór. Dzisiaj prosty przykład użycia text-shadow. Zaczynamy oczywiście od prostego html. Na podstawie klasy 'add-shadow' pobieramy tekst i każdą literę owijamy w span <div class="content"> <h1 class="add-shadow">Frontend development</h1> </div> Teraz przejdźmy do styli. Najlepszym wyborem będzie wąska czcionka i oczywiście musi być pogrubiona. Importujemy

    • Zbiór przykładów użycia leaflet

      Kody, triki, sztuczki 

      Jakiś czas temu przygotowałem zbór przykładów użycia leaflet z mapami OSM. Jeżeli ktoś ma jakieś propozycje co można by jeszcze tam umieścić to poproszę podać w komentarzach. Całe repo znajduje się pod tym adresem - leaflet-examples

  • Wojciech Szućko

    • React – Higher Order Component

      Wojciech Szućko 

      Komponenty powielają logikę? Twoje komponenty często używają tych samych komponentów? Higher Order Component w skrócie HOC to prosty sposób na współdzielenie kodu pomiędzy komponentami. Podstawy Co to jest Higher Order Component? To funkcja, która przyjmuję komponent, a następnie może przekazać do niego nowe propsy lub otoczyć go innym komponentem.

    • Angular – DomSanitizer

      Wojciech Szućko 

      Serwis, który dba o to aby nasza aplikacja była odporna na ataki XSS usuwając niebezpieczny kod (ang. sanitizing). Pisząc aplikację w Angularze często korzystamy z dynamicznego podstawiania wartości w takich miejscach jak link lub wykorzystując atrybut innerHtml. Miejsca te mogą być potencjalnymi miejsca ataku. DomSanitizer pomaga nam w utrzymaniu bezpiecznej

    • Formaty grafik – WebP i AVIF

      Wojciech Szućko 

      Na przestrzeni lat powstało wiele formatów grafiki takich jak: JPEG, GIF czy PNG, które wykorzystujemy tworząc nasze strony i aplikacje internetowe. W tym artykule przybliżę dwa z nich: WebP i AVIF – powstały one relatywnie niedawno. WebP Google w 2010 roku opublikowało format WebP, który jest 25% lżejszy od najpopularniejszych

    • Angular – Enkapsulacja styli

      Wojciech Szućko 

      Nadpisywanie styli podczas pisania aplikacji webowych to problem, z którym spotkał się nie jeden początkujący jak i doświadczony programista. Jak to się dzieje, że style w Angularze nie kolidują ze sobą? Jest to możliwe dzięki ich odpowiedniej enkapsulacji. Czym jest enkapsulacja? Enkapsulacja (inaczej hermetyzacja) polega na ukrywaniu danych

    • Porównanie RxJS Subjects

      Wojciech Szućko 

      W bibliotece RxJS występuje 5 rodzajów Subject. Warto wiedzieć, że wszystkie z nich są typem Observable i różnią się tym od zwykłego Observable, że wszystkie subskrypcje otrzymują wyemitowaną wartość w strumieniu w tym samym momencie tzw. multicast. Rodzaje Wśród nich możemy wyróżnić: Subject, BehaviorSubject, ReplaySubject, AsyncSubject oraz WebSocketSubject. Każdy

  • NetteCode

    • Junior Front-end Developer – analiza ofert pracy [2020!]

      NetteCode 

      Co warto znać aplikując na stanowisko Front-end developera? Jak różnią się poszczególne oferty pracy? Co jest MUST HAVE, a co możesz zostawić na później? Wnioski z analizy kilku losowych ofert pracy dla Junior Front-end developera na 2020 rok. Artykuł Junior Front-end Developer – analiza ofert pracy [2020!] pochodzi z serwisu

    • Kierunek: Front-end na start?

      NetteCode 

      Co znajdziesz w dzisiejszym artykule? informacja nt. mojego ebooka „Kierunek: Front-end. Twoja ścieżka nauki, 2020+”, który w ostatnich dniach wylądował w sprzedaży! odpowiedź na dwa pytania: Czy HTML/CSS to dobry pomysł na start nauki programowania? Front-end jako trampolina do kariery programisty? Temat Front-endu wraca na tego bloga jak bumerang

    • Kierunek: Front-end. Twoja ścieżka nauki + Mały Status Update

      NetteCode 

      W końcu dobiega końca praca nad moim pierwszym płatnym ebookiem. Miałam mieszane uczucia co do tematyki, ale przyznam, że efekt mega mi się podoba <3 Mam wrażenie, że może przypaść do gustu i Tobie (oczywiście, o ile interesuje Cię nauka Front-endu ;) ). Po więcej szczegółów zajrzyj do artykułu

    • Po raz ostatni?

      NetteCode 

      Dziś mam nadzieję ostatni artykuł z cyklu: “o wszystkim i o niczym” 😀 Postanowiłam, że na blogu NetteCode nie będę już więcej pisać w tematach “różnych”, tj. “Co u mnie słychać?”, “Gdzie byłam jak mnie nie było?”, “Co w planach?”, itp. Blog NetteCode zostanie miejscem, poświęconym już tylko i wyłącznie

    • Bo co najgorszego może się stać? (Czytaj do końca :) Warto!)

      NetteCode 

      Muszę Wam się do czegoś przyznać. Od dłuższego czasu nosiłam się z zamiarem rezygnacji z etatu i przejścia na swoje. Z wielu powodów, których nie będę ani wymieniać ani priorytetować. Z perspektywy czasu (krótkiej, bo krótkiej ale…) widzę, że cholernie się tego bałam. Etat wydawał się tak bezpieczną opcją

  • Solution Chaser

    • Docker Compose dla początkujących

      Solution Chaser 

      Dzień dobry!Mam nadzieje, że jesteście zdrowi i chętni do nauki, bowiem ruszamy z kolejną częścią serii o konteneryzacji. Pierwszą możecie przeczytać tutaj gdzie wyjaśniam podstawy dockera :)Oczywiście polecam mojego instagrama oraz staram się wrócić na Twittera ze śmieszną poezją developerską. Serio.Segment reklamowy zakończony, więc kodujmy:Zastanawiałam się jak

    • Vue Router i TypeScript - jak zrobić frontowy routing?

      Solution Chaser 

      Dzień dobry! Mam nadzieje, że macie się dobrze, wakacje minęły pogodnie i jesteście głodni wiedzy. Dzisiaj powrócimy do Vue zaliczając kolejny, niezbędny element z stacku Vue: Vue Router. Zaczniemy prosto dlatego zapraszam wszystkich początkujących do nauki!Krótki blok reklamowy: Facebook, Instagram. Implementacja - jak zawsze - w TypeScriptcie.Konfiguracja Typescripta

    • Podstawy Continuous Integration&Delivery na przykładzie Github Actions

      Solution Chaser 

      Continuous Integration i Continous Delivery to terminy, które powinny być znane każdemu programiście. Continuous Integration to praktyka regularnego mergowania kodu dzięki której powstało mnóstwo świetnych praktyk i narzędzi. Jest związana z pojęciem Continous Delivery, które odnosi się do regularnego wydawania na produkcję małych funkcjonalności. Dzisiaj spróbuję początkującym wyjaśnić z czym

    • Pierwsza przygoda z Dockerem

      Solution Chaser 

      Docker. Kontenery. Wirtualizacja. Środowisko programistyczne. Jeśli zastanawialiście się jak rozpocząć zabawę z konteneryzacją to jest wpis dla Was :) Krok po kroczku postawicie swojego pierwszego dockera.Dzisiejszy przykład będzie bardzo prosty, postawimy serwer node.js w kontenerze, który będzie zwracał miłą wiadomość. Proszę nie robić tak na produkcji :)Stop.