Redux ułatwia nam pracę ze stanem, a jego implementacja w ReactJS stała się najbardziej popularnym sposobem tworzenia warstw danych opisanych przez Facebook-a jako Flux. Nie będę jednak opisywał podstaw pracy ze stanem w ReactJS ani samego sensu jego stosowania . W tym artykule chcę się skupić na wytłumaczeniu jakie elementy musi zawierać aplikacja używająca Reduxa […]
Umiejętna praca z Promisami w JavaScript jest niezbędna do stworzenia niemal każdej rozwiniętej aplikacji. Wyjątkiem jest tutaj używanie zupełnie innych technologii do obsługi zapytań HTTP (np. biblioteka RxJs, o której pisałem w artykule: RxJs – programowanie reaktywne w Angular2). Nie będę tutaj pisał o zupełnych podstawach Promisów. W celu poznania tego zagadnie od początku polecam […]
Funkcja wyższego rzędu – definicja Funkcja wyższego rzędu to funkcja przyjmująca inną funkcję jako argument bądź zwracająca funkcję. Jeżeli na pierwszy rzut oka może brzmieć to nie jasno to warto zauważyć, że z tego typu funkcjami pracujemy na co dzień (bądź przynajmniej powinniśmy mieć już jakąś styczność) pracując z JavaScriptem. Najpopularniejsze z nich zostały zaimplementowane […]
Angular2 daje programiście sporo gotowych możliwości ułatwiających walidację formularzy po stronie front-endu. Może to być bardzo pomocne dla użytkownika kiedy w trakcie wypełniania formularza na bieżąco będzie informowany o błędach. Warto przy tym wspomnieć, że nie zawsze dobrym pomysłem będzie przygotowanie restrykcyjnej walidacji dla formularza. Przykładowo projektując formularz koszyka z zamówieniem w sklepie internetowym, obsłudze […]
Programowanie reaktywne Programowanie reaktywne jest to programowanie asynchroniczne oparte na obserwacji strumienia danych. W pierwszej kolejności wykorzystywane jest do obsługi zapytań HTTP, ale również może obsługiwać zdarzenia, odczytywać elementy tablic, itp. Framework Angular2 wykorzystuje bibliotekę RxJs, która z kolei wykorzystuje obiekt Observable. Observable porównać można do Promise, który również wykorzystywany jest do obsługi HTTP. Istnieje […]
Trasowanie zdjęć na wektory czyli inaczej wektoryzacja zdjęć może być przeprowadzona na wiele sposobów. Można to zrobić bardzo dokładnie i dużym nakładem sił używając narzędzia PEN TOOL, albo użyć wbudowane z Adobe Illustrator narzędzie Image Trace (Obrys obrazu). Może być to przydatne w wielu sytuacjach. Od wyciągnięcia konkretnego obiektu wektorowego ze zdjęcia po ustawienie całego […]
Deklarowanie zmiennych w JavaScript bez przypisywania im określonego typu w momencie deklaracji jest zaskakujące dla wszystkich osób, które mają doświadczenie z innymi językami programowania i rozpoczynają swoją przygodę z JS. Ten stan rzeczy zmienił się dzięki TypeScript-owi, dzięki któremu każda zmienna może mieć określony typ. Wprawdzie po kompilacji typowanie i tak znika z kodu co […]
ECMAScript 6 [ES6] ECMAScript 6 zwany jest również jako ECMAScript 2015 albo najkrócej ES6. Jest to 6 edycja standardu ECMAScript, która ostatecznie opublikowana została jako standard 17 czerwca 2015 roku. Nowy standard niesie ze sobą kilka nowości ułatwiających codzienną pracę na polu front-endu. Przejście od etapu ciekawej nowości do etapy must-know dał ES6 AngularJS w […]
Zrobienie formularza na stronie internetowej zbierającego dane wydaje się na pozór bardzo łatwe. Wystarczy klika pól typu input i… a no właśnie i potrzebny jest back-end, który obsłuży dane wpisane w formularz zapisze je oraz umożliwi późniejszą obróbkę. Do tego trzeba mieć też świadomość, że przetwarzamy czyjeś dane i zastosowana technologia nie powinna być przypadkowo […]
Dyrektywy w AngularJS Dyrektywa (directive) jest to template np. połączenie html i angular, który wielokrotnie może być użyty na stronie. Template ten zazwyczaj wczytywany jest z osobnego pliku HTML i niezwykle pomaga w utrzymaniu czytelności kodu, ułatwia testowanie fragmentów kodu i pozwala dzielić aplikację na moduły. Istnieje wiele wbudowanych dyrektyw, których nie będę tutaj omawiał. […]
Czym jest routeProvider? Użycie routeProvider w Angular 1 umożliwia przeniesienie routingu z warstwy backendowej do frontendu. Prościej: zmiany w adresie strony internetowej przechwytywane, są przez Angulara i pobierana jest określona część strony zamiast ładowanie całej strony na nowo z serwera. Do użycia routeProvider, potrzebne jest kilka rzeczy: 1) Dołączenie do projektu pliku: angular-route.min.js np. z […]
Wzorzec MVC jest wzorcem wytwarzania oprogramowania. Skrót MVC pochodzi od trzech słów: Model (Model) Widok (View) Kontroler (Controller) Model W Modelu, są przechowywane dane na jakich aplikacja pracuje. Mogą to być obiekty, na bazie których zbudowana będzie strona oferująca na przedaż wiele pogrupowanych produktów. Jako przykład weźmy komis samochodowy. W tym przypadku w modelu może […]
Kontynuujemy temat serwisów (usług) w AngularzeJS 1. W tym artykule przyjrzymy się provider, decorator i constant. Dla przypomnienia w poprzednim artykule omówione zostały: factory, service, value, które z pewnością będą najczęściej wykorzystywane. Ważne, żeby najpierw zapoznać się z wcześniejszym tekstem ponieważ w przypadku dekoratora pracował będę na opisanej poprzednio usłudze service. Provider Provider jest najbardziej […]
Tym artykułem zaczynam przegląd frameworka AngularJS w wersji 1.6. W kolejnych częściach opisane zostaną filtry, dyrektywy, providery i dekoratory. Czym w ogóle jest AngularJS? Jest to jeden z frameworków używanych we Front-endzie, którego twórcą jest firma Google. Obecnie największym konkurentem Angulara jest ReactJS, który z kolei stworzony został przez firmę Facebook. Frameworki narzucają programiście ścisłe […]
W poprzednim artykule opisałem najważniejsze kwestie związane z używaniem SASS / SCSS. Opisane zostały zmienne, mixiny oraz dziedziczenie. Dzisiaj temat rozwinę o najbardziej zaawansowane możliwości tych preprocesorów. Jednak już na tym etapie muszę zaznaczyć otwarcie, że używanie warunków czy pętli nie jest rzeczą jaką front-endowiec potrzebuje na co dzień. Modułowość SASS Dzięki modułowości można stworzyć […]
Pracę z preprocesorami CSS czyli SASS, SCSS i LESS trudno wyobrazić sobie bez użycia automatyzatorów zadań. Do przekonwertowania kodu na CSS możemy wykorzystać Grunt.js, Gulp.js i Webpack (po szczegóły zapraszam do poprzednich wpisów). Wprawdzie często używa się określenia SASS myśląc o SCSS, jednak istnieje istotna różnica między jednym, a drugim. SCSS SCSS (Sassy CSS) – […]
Gulp.js Gulp jest drugim automatyzatorem zadań, który opisuję i śmiało można powiedzieć, że jest on najprostszy w użyciu z pośród dostępnych. W automatyzatorze grunt.js trzeba zapoznać się ze specyficzną składnią. W webpacku również składnia, ale i duża liczba możliwości, które początkowo przytłaczają. Natomiast Gulp.js różni się od swoich konkurentów, bo twórcy tego automatyzatora zaproponowali składnię […]
Grunt.js W tym artykule skupiłem się na automatyzatorze zadań Grunt.js. Należy jednak mieć świadomość, że na rynku, są już dostępne również inne narzędzia. Narzędzia do automatyzacji zadań Grunt i Gulp coraz częściej, są zastępowane przez Webpack. Webpack nie tylko zastępuje je jako automatyzator zadań, ale również stanowi loader modułów dla tworzonego projektu. Z Webpackiej jest […]
RWD vs AWD Responsive Web Design kontra Adaptive Web Design Obie definicje RWD Responsive Web Design oraz AWD Adaptive Web Design określają ten sam ostateczny efekt, jaki twórca strony internetowej zamierza osiągnąć. Efektem tym jest stworzenie strony internetowej, która dopasuje się do szerokości ekranu. Jednak istnieje zasadnicza różnica między środkami jakie zostaną użyte w jednym […]
GIT i GITHUB znaczenie pojęć GIT – jest to system kontroli wersji używany przez programistów na całym świecie. GIT umożliwia pełną kontrolę nad każdym etapem projektu nawet jeżeli nad jednym projektem pracuje na raz wielu programistów. GIT m.in.: umożliwia tworzenie notatek oraz dowolne przełączenie się między poszczególnymi etapami projektu. System kontroli wersji instalowany jest lokalnie […]
Domknięcia (closures) w JavaScript Domknięcia (closures) tworzą w JS izolowany zasięg dla zmiennych. Umożliwia to wielokrotne używanie danego modułu/funkcji ponieważ jest ona niezależna od otoczenia. Domknięcia pozwalają między innymi na ograniczenie liczby zmiennych globalnych. Takie zmienne mogą przysporzyć wiele problemu w sytuacji, gdy nad aplikacją pracuje większa liczba programistów, którzy tworzą różne elementy aplikacji. Ostatecznie […]
Metody: bind, call, apply w JavaScript Obiekty w JavaScript posiadają swoje właściwości oraz metody. Można bezpośrednio w obiekcie zapisać metodę, która następnie będzie wywoływana. To by jednak oznaczało, że jeżeli na obiekcie potrzebujemy wywołać kilka metod wszystkie muszą się w nim pojawić. Jeszcze gorszym przypadkiem jest posiadanie wielu obiektów i w każdym z nich wywoływanie […]
AMD (asynchronous module definition) API jest to wyjątkowe podejście do dołączania modułów do projektu. Różnicę pomiędzy standardowym dołączaniem modułów do projektu, a podejściem AMD widać w poniższej grafice. Jako przykład AMD API w prostym projekcie użyję RequireJS, który jest Script Loaderem czyli narzędziem do dynamicznego dodawania plików do projektu. Pierwsza oś na powyższej grafice przedstawia […]
Flexbox Wyrównanie zawartości w CSS najprościej jest uzyskać poprzez dołączenie do projektu, któregoś z popularnych frameworków front-endowych. Przykładowo w Bootstrap czy Foundation wykorzystując GRID wystarczy tylko używać odpowiednich klas. Jednak nie jesteśmy skazani na korzystanie z Frameworków, bo z pomocą przychodzi nam Flexbox w CSS3. Uwaga justify-content jest wspierany powyżej Safari 5 oraz IE 10, […]
Funkcja natychmiastowa IIFE Immediately-Invoked Function Expression czyli funkcja natychmiastowa IIFE jest niezwykle przydatną na co dzień formą zapisu i uruchamiania funkcji. Jej konstrukcja polega na zamknięciu całej funkcji w nawiasy (może być to funkcja anonimowa) i natychmiastowym jej wywołaniu. (function() { //some code })(); Zapis taki tworzy domknięcie. Dzięki temu unikniemy deklaracji zmiennych globalnych, jak […]
Nie trzeba chyba nikomu tłumaczyć do czego używa się formularzy w HTML. HTML5 dodał kilka elementów do FORM jak pole data czy telefon do formularza, ale niestety część z nich kiepsko wygląda na niektórych przeglądarkach. Dlatego poniżej zamieściłem listę elementów formularza, które śmiało można użyć i nie powinno z nimi być problemu w zależności od […]
Wyrażenia regularne RegExp w JavaScript wielokrotnie ułatwią nam codzienną pracę. Od sprawdzania zapisu kodów pocztowych po wyszukiwanie adresów mailowych do znajdowania numerów telefonów lub sprawdzania poprawności wprowadzonego przez użytkownika hasła. Flagi w wyrażeniu RegExp: i – ignore case [wyszukiwane są zarówno duże jak i małe litery pasujące do wzorca] g – global [przy braku tej […]
Iterując po tablicach, czy stringach zazwyczaj odruchowo sięgamy po właściwość length. Używając instrukcji for (i=0; i < array.length; i++) {} uzyskamy dostęp do każdego z elementów. Istnieją jednak również inne metody iteracji dla tej pętli, a ich zalety i wady przedstawię w tym artykule. Użycie for in na tablicach i stringach. Użycie for in na […]
Klasyczne użycie pętli for w JavaScript jest zbliżone do innych języków programowania. Deklaracja for zawiera zmienną, która w tym samym miejscu może zostać zadeklarowana. Następnie po średniku wpisywany jest warunek, a ostatnim trzecim parametrem jest np. inkrementacja. Klasyczne użycie pętli for – wersja najbardziej popularna. for (var i = 0; i < 5; i++) { […]
JavaScript obudowany jest obecnie wieloma frameworkami, które znacznie upraszczają kod, istnieje jednak trochę instrukcji, które umożliwiają skrócenie i uproszczenie kodu również w samym natywnym języku JavaScript. W tym artykule przytoczę 9 takich skrótów, które wydają mi się najbardziej interesujące, a część z nich może zaskoczyć również doświadczonych programistów JS. Na samym dole strony efekt poniższego […]
Photoshop posiada świetną funkcjonalność 3D. Bardzo często pomaga ona w uzupełnianiu tworzonego bieżącego projektu w Photoshopie. Przykładem jej użycia może być stworzenie szkła, które następnie użyte zostanie w widoku regularnym okna. Zdarzyło mi się jednak, że ku mojemu zaskoczeniu nie byłem w stanie uruchomić tej funkcjonalności i taki przypadek właśnie tutaj opisuję. Kiedy pojawią się […]
Narzędzie Move Tool / Przesunięcie. „Move Tool” jest jednym z podstawowych narzędzi Photoshopa, jednak nie każdy jest świadomy, że posiada on kilka niezwykle przydatnych dodatkowych możliwości. Po wybraniu narzędzia „Move Tool” w górnym pasku pojawia się dodatkowe MENU dzięki, któremu możemy wyrównywać wobec siebie obiekty: – pierwsze 6 ikon podświetli się, gdy zaznaczone, są przynajmniej […]
Photoshop posiada wiele narzędzi zaznaczania obiektów, a tylko część widoczna jest od razu w bocznym pasku. Widoczne, są m.in: zaznaczenia kształtów (skrót klawiszowy M): prostokąt (Rectangular Marquee Tool), elipsa (Elliptical Marquee Tool) zaznaczenia typu lasso (skrót L): Lasso Tool, Polygonal Lasso Tool, Magnetic Lasso Tool różdżka (skrót W): Magic Wand Tool, Quick Selection Tool Drugą […]
JavaScript umożliwia programiście w niezwykle prosty sposób uzyskać wiele informacji dotyczących monitora, przeglądarki oraz położenia kursora użytkownika. Poniżej przedstawiłem w pierwszej kolejności właściwości MouseEvent, a dalej właściwości window dotyczące monitora, przeglądarki. Na samym dole znajduje się kod użyty do wyświetlenia na stronie poniższych informacji. Zwróć uwagę, że wszystkie informacje wypisane po pogrubionych nazwach dotyczą Twojej […]
Do porównania dwóch wartości w JavaScript używa się zapisu === lub == . Wynikiem porównania === będzie „true” tylko w sytuacji, gdy zarówno typ danych jak i wartość będą sobie równe. Oznacza to, że wynikiem porównania 99 === „99” będzie false ponieważ pierwsza wartość jest liczbą, a druga to String. Żeby w powyższym przykładzie uzyskać […]
JavaScript umożliwia tworzenie obiektów na kilka różnych sposobów. Sposób 1 w pierwszej linijce tworzony jest obiekt, a następnie, są dodawane do niego właściwości. Ostatnią z dodanych właściwości jest funkcja zwracająca dwie z wcześniej podanych właściwości: var card = {} card.firstName = "Jan"; card.lastName = "Kowalski"; card.age = "35"; card.name = function() { return this.firstName+" "+this.lastName; }; […]
Grid jest to siatka, na bazie której w łatwy sposób może zbudować responsywną stronę internetową. Projektowanie zawartości strony na siatce jest bardzo wygodne, a nowoczesne Frameworki takie jak Bootstrap czy Foundation sprawiają, że budowanie strony od zera wyłącznie z wykorzystaniem HTML i CSS staje się dużo bardziej czasochłonne i mało wydajne. Frameworki to nie tylko […]
Oblewanie tekstu w kształcie może być nam potrzebne w sytuacji, gdy będziemy potrzebowali w taki sposób wprowadzić tekst do grafiki w Photoshopie, że żadne z narzędzi wyrównywania: (do prawej, do lewej, wyśrodkuj, wyjustuj) nie będą nam w stanie pomóc. Przykładem może być serce wewnątrz, którego chcemy umieścić tekst, albo przykład taki jak pokazałem poniżej. W poniższym przykładzie […]
Narzędzie „Content Aware Move” jest jednym z nowszych w Photoshop. Narzędzie znajduje się w lewej belce razem z „Healing Brush Tool” czy „Red Eye Tool„. Do tego MENU można uzyskać dostęp poprzez skrót klawiszowy „J”. Przy odpowiednich ustawieniach pozwala ono uzyskać bardzo interesujące efekty: po pierwsze pozwala na przesunięcie obiektu z miejsca w miejsce z […]
Kolory globalne cechują się taką własnością, że każda zmiana tego koloru uwzględniana jest w całym projekcie. Czyli tyle razy ile została użyta w tylu miejscach nastąpi jej zmiana. Kolory globalne w MENU „Swatches” oznaczone, są białym trójkątem w prawym dolnym rogu miniaturki. Tworzenie kolorów globalnych: Po wybraniu koloru, który ma być globalnym należy kliknąć w […]
Niezwykle modne obecnie w design-ie jest używanie małej liczby kolorów. Google w „Material design” rekomenduje wręcz używanie dwóch podstawowych kolorów jednego głównego i drugiego dopełniającego. W tym artykule opiszę tworzenie palety kolorów w Adobe Illustrator z dwóch podobnych kolorów poprzez odpowiednią edycję przejścia tonalnego. Dzięki takiemu zabiegowi bez wprowadzania nowych kolorów uatrakcyjnimy projekt poprzez dodanie […]
Chmury tagów na stronach internetowych prezentują się świetnie, a szczególnie gdy poszczególne tagi różnią się wielkością uzależnioną od ilości postów. WordPress przychodzi nam z pomocą i w banalny sposób pozwala ją stworzyć. Żeby uzyskać na własnej stronie taki efekt wystarczy w odpowiednim miejscu strony umieścić kod: <?php wp_tag_cloud( $args ); ?> Jeżeli chmura tagów ma […]
Z pojęciem delegacja domeny warto się szczegółowo zapoznać ponieważ opanowanie z pozoru skomplikowanego pojęcia umożliwi osiągnięcie wymiernych korzyści finansowych webdesignerowi zajmującemu się równocześnie hostingiem swoich klientów. Jednak również jako właściciel pojedynczej domeny dzięki delegacji nie jesteś skazany na ceny domen zaproponowane przez wybranego po raz pierwszy hostingodawcę. Delegacja domeny – jest to przekazania domeny pod […]
Define pattern – zdefiniuj własny graficzny wzór i pokryj nim dowolny obiekt w programie Photoshop. Tekstura w Photoshopie kojarzy się głównie z dodawaniem do kompozycji gotowej grafiki przedstawiającej jakąś powierzchnię. Istnieje jednak inny sposób jakim jest pokrycie powierzchni gotowym wzorem lub stworzenie indywidualnego wzoru (define pattern), który następnie zostanie wielokrotnie powielony na powierzchni obiektu tworząc […]
Narzędzie „Photomerge” z MENU „Automate” oprócz funkcji tworzenia zdjęć panoramicznych pozwala również na usuwanie niechcianych obiektów. Wyobraź sobie, że zrobiłeś/aś kilka zdjęć jednego obiektu jednak na każdym pojawiały się obiekty, których nie chciałbyś/abyś tam mieć? Łatwo to sobie wyobrazić fotografując ruchliwą ulicę lub zabytek, przed którym cały czas pojawiają się nowe grupy turystów. Najłatwiejszym sposobem poradzenia […]
Tworzenie zdjęć panoramicznych za pomocą „Photomerge”. Jedna z funkcji programu Adobe Photoshop jaką jest „Photomerge” umożliwia łączenie wielu zdjęć w jedno. Należy ona do MENU „Automate”, a jedno z jej zastosowań przedstawię w tym artykule. W jaki sposób zabrać się do stworzenia zdjęcia panoramicznego z kilku zdjęć? Zacznijmy od wyboru kilku zdjęć wykonanych z ręki: […]
Niektóre style CSS wymagają użycia dodatkowych prefiksów. Boleśnie mogą się o tym przekonać osoby, które nie sprawdzają efektów swojej pracy na różnych przeglądarkach oraz urządzeniach. W użyciu, są 4 prefiksy: -webkit – dotyczy przeglądarek Google Chrome, Safari, Opera -moz- dotyczy przeglądarki Mozilla Firefox -ms- dotyczy przeglądarek Microsoft Internet Explorer -o- dotyczy przeglądarek Opera Zostało one […]
Wiedza o tym, że kolejność deklaracji ma znaczenie może zaoszczędzić dużo czasu osobom, które są na początkowym etapie poznawania CSS3. Jednak nie dotyczy to tylko osób początkujących w CSS3, podobny problem może pojawić się również używając framework Bootstrap. Osoba używająca framework oraz dodająca własne style CSS np. w osobnym pliku STYLE.CSS, może być niezwykle zdziwiona […]
W artykule pokażę w jaki sposób wykonać łączenie ścieżek wektorowych w Adobe Illustrator. A wykonanie tego okazało się potrzebne po poprzednim artykule, w którym prezentowałem użycie narzędzia „Scissors” (nożyczki). W wyniku jego działania powstał obiekt, dla którego wektorowa ścieżka jest przerwana. Widać to na poniższej grafice, a symbolizuje to czerwona obwódka wokół obiektu, która w […]
Dwa narzędzia w Adobe Illustrator Knife i Scissors, są niezwykle przydatne w codziennej pracy. W artykule pokażę czym się różnią oraz jak ich używać. „Knife” (nóż) oraz „Scissors” (nożyczki), są to dwa narzędzia o podobnym działaniu. W celu użycia narzędzi należy rozwinąć w lewej belce programu Adobe Illustrator ikonę tak jak zostało to pokazane na […]
Zdarzają się sytuacje, kiedy po załączeniu fonta (czcionki) do strony www okazuje się, że jest brak polskich czcionek. Przedstawię dwa rozwiązania tego problemu, które mogły to spowodować: W przypadku użycia czcionek google fonts najpierw należy zacząć od sprawdzenia czy wybrana czcionka w ogóle dysponuje polskimi znakami. Jeżeli mamy to już potwierdzone (w sposób podany na […]
Każdy kto rozpoczął swoją przygodę z obiektami 3D w Photoshop, wie jak czasochłonne jest renderowanie sceny. Nawet renderowanie niezbyt skomplikowanej grafiki z pojedynczym światłem może trwać wiele godzin. Istnieje jednak trik, który znacząco przyśpiesza pracę, a użyć go można nie w sytuacji zakończenia pracy nad grafiką, ale w momencie gdy chcemy upewnić się, że efekt […]
Niezastąpionym narzędziem w codziennej pracy w Adobe Illustrator jest „Shape Builder Tool”. Narzędzie to pozwala na tworzenie nowych kształtów poprzez połączenie istniejących już kształtów, które stykają się ze sobą. Na poniższym screenie pokazałem, w którym miejscu bocznego MENU szukać tego narzędzia, alternatywnie dostęp do niego daje nam również skrót klawiszowy SHIFT+M. W jaki sposób połączyć […]
Publikacja internetowa stworzona w InDesign umożliwia uzyskanie interesującego efektu przerzucania kartek. Wprawdzie przyszłość technologii Flash rysuje się w szarych kolorach, jednak w dalszym ciągu Flasha można spotkać na witrynach internetowych, a tego typu publikacji umieścić na stronie jako wersję alternatywną. W jaki sposób w InDesign stworzyć taki efekt? Mając gotowy dokument, który posiada przynajmniej dwie […]
Bardzo przydatną umiejętnością w Adobe Illustrator jest wypełnianie obiektu bitmapą i właśnie tę umiejętność nabędziesz po przeczytaniu tego artykułu. Wypełnianie obiektów gotową bitmapą pozwala osiągnąć bardzo interesujące efekty w łatwy sposób. W poniższym przykładzie pokryję napis grafiką płomieni. Zabieramy się do pracy. Na początku należy przygotować obiekt, którego wnętrze będzie wypełniane. Może to być tekst […]
Na pozór banalna sprawa jaką jest stylowanie linków w CSS3 czyli dopasowanie wyglądu linków według własnych preferencji może okazać się nie lada wyzwaniem. Najłatwiej ustalić styl dla linków używając prostego selektora (w tym wypadku link będzie niebieski), jednak rozwiązanie to niesie ze sobą potencjalny problem: a { color: blue; } Jeżeli (dla powyższego przykładu) w […]
Pętla (the loop) jest jednym z fundamentów systemów CMS. Nie inaczej sytuacja wygląda w WordPress. Pętla umożliwia szybkie przeszukanie treści serwisu i wybranie z niej potrzebnych składników. W WordPress istnieje wiele dodatkowych funkcji, które dodatkowo ułatwiają korzystanie z pętli. Za pomocą kilku prostych funkcji można łatwo wewnątrz pętli wyciągnąć takie dane jak tytuł, treść posta, […]
W artykule pokaże dwa sposoby umożliwiające zmianę języka programu Adobe Photoshop na język angielski. Dlaczego akurat angielski? Ponieważ angielski Photoshop jest branżowym standardem i jakąkolwiek pomoc, którą będziesz kiedykolwiek poszukiwał znacznie łatwiej będzie Ci znaleźć po angielskich nazwach. Szczególnie przydatny bywa YOUTUBE, gdzie znajdziesz dużo więcej szukając po anglojęzycznych nazwach. Jednak również tutoriale, czy artykuły […]
Podczas pracy z INDESIGN’em z jego standardowymi ustawieniami możemy mieć problem z jakością importowanych zdjęć. Zdjęcia lub grafika, która wstawiana jest do dokumentu wyraźnie odbiega jakością od tego czego można się było spodziewać? Jest to celowy zabieg, który zależy od ustawień i taka ograniczona jakość nabiera sensu gdy wyobrazimy sobie pracę z wielostronicowym dokumentem, w […]
Jedno z narzędzi Adobe Illustrator umożliwia stworzenie nowego obiektu na bazie już istniejącego obiektu. Nowy obiekt, będzie się charakteryzował równym powiększeniem lub pomniejszeniem jego proporcji. Mając obiekt (zwłaszcza o skomplikowanym kształcie) ręczne skopiowanie go oraz jego zwiększenie lub zmniejszenie nie da nam efektu równomiernego odjęcia lub dodania takiego samego odcinka z każdej ze stron. Taką możliwość daje […]
Operacje na ścieżkach kształtów, są bardzo ciekawą funkcją kojarzoną bardziej z aplikacjami do grafiki wektorowej niż rastrowej. Po wybraniu jednego z kształtów, domyślnie rysowany jest on na nowej warstwie. Możemy to zmienić nie dość, że rysując kilka kształtów na jednej warstwie to nawet łączyć kilka kształtów w jeden lub wycinając jednym kształtem część innego. Funkcje […]
Artykuł ten jest wskazówką pomocną przy tworzeniu własnych tematów do WordPress. Przygotowanie tematu dla WordPressa wymaga zawarcia w kodzie HTML oraz CSS3 wielu dodatkowych funkcji, które dopiero w połączeniu z projektem witryny tworzą wspólnie funkcjonującą całość. W tym artykule opiszę style CSS3, które trzeba umieścić wewnątrz naszego przygotowanego pliku ze stylami np. style.css. Oba style […]
Import długich tekstów w InDesign. Funkcja, którą wskażę jest idealna przy tworzeniu publikacji składającej się z wielu stron. Przykładowo przy tworzeniu książki, która zawiera kilkaset stron jest to funkcja bez której trudno się obyć. Kliknij w MENU “File” -> “Place” (lub CTRL+D) następnie wybierz z listy plik z tekstem. Kliknij lewym przyciskiem myszy z przyciśniętym […]
W sytuacji kiedy znudziły nam się standardowe ramki w CSS3, a równocześnie chcielibyśmy żeby były one zgodne z Responsive Web Design niezastąpioną funkcją CSS3 jest BORDER-IMAGE, który umożliwia wykorzystanie osobnego pliku jako ramki. Najważniejszą zaletą tej funkcji jest fakt, że przy rozszerzaniu rogi ramki się nie skalują czyli dany element nigdy nie straci na jakości. […]
Narzędzie Fill. Jeżeli obrazek jest trochę zbyt wąski w stosunku do potrzeb lub gdy wcześniej było prostowane zdjęcie i pojawiły się na nim puste fragmenty można je uzupełnić. Photoshop potrafi sobie z tym problemem poradzić w rewelacyjny sposób: najpierw należy zaznaczyć pusty fragment, który chcemy wypełnić, następnie do zaznaczenia dodajemy mały fragment (wystarczy kilka pikseli) […]
Narzędzie „Crop Tool / Kadrowanie” może przydać się w wielu sytuacjach. Jednym z nich jest usunięcie niepotrzebnej części zdjęcia, która niewiele wnosi albo nawet przeszkadza. Innym, są powstałe dziury wywołane przez prostowanie zdjęcia. Jeżeli prostowanie zdjęcia nie było zbyt duże to powstałe dziury również nie są wielkie i w zupełności wystarczy przyciąć rogi wybierając wspomniane […]
Prostowanie zdjęć może być potrzebne praktycznie do każdego zdjęcia, któe wykonane zostało bez statywu. W aplikacji Photoshop odbywa się to w sposób bardzo prosty za pomocą jednego z narzędzi, które jest dostępne na pasku z lewej strony. Na początku należy zaimportować zdjęcie, które chcemy wyprostować (z MENU „File/Plik” wybrać opcję „Open/Otwórz” lub przeciągnąć ten plik […]
String jest dowolnym łańcuchem tekstowy, bez którego nie sposób wyobrazić sobie żadnej strony ani aplikacji. Ten obiekt globalny w JavaScripcie ma wiele przydatnych metod i właściwości, z których możemy korzystać. Część z nich może być zastąpiona przez wyrażenia regularne, które opisałem w innym wpisie: „JavaScript – wyrażenia regularne RegExp„. Na bazie poniższego zdania przedstawiłem część […]
Obiekty globalne MATH i NUMBER dostępne w czystym JavaScrypt oferują programiście sporo możliwości. Często zamiast rzucać się na kolejne javascript-owe framework-i lepiej spędzić trochę czasu poznając wszystkie możliwości jakie drzemią w VanillaJS. VanillaJS jest to rodzaj żartu. Określa się tak natywny język JS, mrugając okiem w stronę fanów frameworków JS. obiekt globalny MATH Math.PI – […]
Use Strict w JS Strict mode został wprowadzony w EcmaScript 5. Zatem nie jest już niczym nowym, ale w dalszym ciągu jego deklaracja wywołuje zdziwienie u programistów Front Endu. Tryb ten umożliwia programiście łatwe wykrycie błędów programistycznych, które w normalnym trybie nie zostaną wskazane jako błąd. Takie przegapione błędu mogą stanowić prawdziwą zmorę wraz z […]
Redux – zarządzanie stanem w React
RxJs – programowanie reaktywne w Angular2
ILLUSTRATOR – trasowanie zdjęć na wektory
SASS / SCSS preprocesory CSS: modułowość, warunki, pętle 2/2
PHOTOSHOP – niedziałająca funkcjonalność 3D