OpenGateWeb

Kategoria: Ogólne

Kategoria ogólna zawiera sprawy administracyjne i oczywiście ogólne. Zapraszamy do pozostałych kategori.

  • Post #47 Projekty wykonane

    Post #47 Projekty wykonane

    Projekty wykonane – Telomers & React portfolio

    Ostatnio zrealizowałem dwa projekty, które rozbudowały zarówno moje portfolio, jak i stronę Telomers.pl.

    1. Trzy strony dla Telomers.pl

    Dla serwisu Telomers.pl dodałem trzy nowe strony:

    • Poranne rozbudzanie: Strona skupiająca się na zdrowych porannych rytuałach. Poranne rytuały
    • Witaminy i Minerały na wiosnę: Informacje na temat optymalnego doboru witamin i minerałów w sezonie wiosennym.Witaminy Minerały Suplementy
    • 3 domowe sposoby na przeziębienie: Naturalne sposoby na walkę z przeziębieniem. 3 domowe spososby na przeziębienie Całość została wdrożona w krótkim czasie, a nowe treści są już dostępne dla użytkowników serwisu.

    2. Aplikacja React Hooks

    Stworzyłem również aplikację w React, która demonstruje wykorzystanie hooków takich jak useState, useEffect oraz useContext. Projekt polega na dynamicznej zmianie koloru tła oraz liczniku, który można zwiększać przyciskiem. W aplikacji zaimplementowane są funkcje:

    • Obsługa zmiany wartości inputu z wykorzystaniem useState.
    • Dynamiczna zmiana tła na podstawie wprowadzonego koloru w formacie HEX.
    • Wykorzystanie kontekstu (useContext) do aktualizacji tła.

    Zobacz applikację React i jej proste funkcje.

    Poniżej fragment kodu aplikacji:

    import React, { useState, useEffect, createContext, useContext } from 'react';

const BackgroundColorContext = createContext();

function App() {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState('#0e0e0e');
  const [bgColor, setBgColor] = useState('#0e0e0e');

  useEffect(() => {
    if (/^#[0-9A-F]{6}$/i.test(inputValue) || /^#[0-9A-F]{3}$/i.test(inputValue)) {
      setBgColor(inputValue);
    }
  }, [inputValue]);

  return (
    <BackgroundColorContext.Provider value={{ bgColor, setBgColor }}>
      <div style={{ backgroundColor: bgColor }}>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <BackgroundColorInput />
      </div>
    </BackgroundColorContext.Provider>
  );
}

function BackgroundColorInput() {
  const { setBgColor } = useContext(BackgroundColorContext);

  return (
    <input
      type="text"
      placeholder="Input color..."
      onChange={(e) => setBgColor(e.target.value)}
    />
  );
}

export default App;

    Całość zajęła 6 godzin i można zobaczyć efekty na telomers.pl i porfolio

  • Post #44 co nowego, podsumowanie oraz Portfolio

    Post #44 co nowego, podsumowanie oraz Portfolio

    Nowe Series – chcę zrobić więcej o JavaScript fundamentals, CSS Tips and Tricks, chciałbym więcej omawiać przypadków Case Study, dla poszerzania wiedzy. Blog chcę po uporządkowaniu i nadaniu efektywności nauce tłumaczyć i prowadzić także w języku angielskim.

    Portfolio to będzie dopieszczane oraz często uzupełniane.

    Spersonalizowana ścieżka nauki wspierana przez AI

    Aby stworzyć spersonalizowaną ścieżkę nauki programowania, która obejmie również naukę Mobile Dev z użyciem Flutter oraz sztuczną inteligencję (AI) z automatyzacją zadań, wdrażam następujący plan rozłożony na 1200 godzin:

    Sposoby efektywniejszej nauki dzięki wsparciu AI

    Aby przyspieszyć naukę programowania w obszarze mid z wykorzystaniem AI, takich jak GitHub Copilot czy ChatGPT, warto zastosować następujące metody

    Interaktywne Kodowanie AI, takie jak GitHub Copilot, oferuje sugestie kodu w czasie rzeczywistym. Umożliwia to szybkie pisanie i testowanie kodu, co przyspiesza naukę poprzez praktykę.

    Generowanie Kodu Narzędzia AI potrafią generować boilerplate code oraz automatyzować rutynowe zadania, co pozwala skupić się na bardziej złożonych problemach i koncepcjach programistycznych.

    Debugging i Analiza Błędów AI może pomóc w identyfikacji błędów i sugerować poprawki, co ułatwia zrozumienie, jak poprawnie pisać kod i unikać powszechnych pułapek.

    Personalizowane Ścieżki Nauki AI dostosowuje wsparcie do poziomu zaawansowania użytkownika, co pozwala na bardziej efektywne przyswajanie wiedzy.

    Eksperymentowanie i Uczenie się na Błędach Używanie AI jako wsparcia do eksperymentowania z różnymi podejściami do problemów umożliwia naukę poprzez próbę i błąd, co jest kluczowe w programowaniu.

    Integracja tych narzędzi w codzienną praktykę programistyczną może znacznie przyspieszyć rozwój umiejętności i zrozumienie złożonych koncepcji programistycznych.

    Dodatkowe możliwości przyspieszenie kodowania z AI

    Codzienne wsparcie przy kodowaniu

    • Automatyzacja rutynowych zadań: Zamiast ręcznie pisać powtarzalny kod, pozwól Copilotowi generować szablony komponentów, hooki lub inne często powtarzające się fragmenty kodu. Na przykład: Generowanie typowych funkcji (np. parsowanie danych, walidacja formularzy).
    • Tworzenie podstawowych komponentów UI na bazie krótkich opisów, zamiast ręcznego pisania ich od zera.
    • Szybkie tworzenie testów jednostkowych (np. w Jest) dla komponentów czy funkcji.
    • Uzupełnianie dokumentacji: Wykorzystaj Copilota do pisania automatycznych komentarzy czy dokumentacji API dla funkcji, które tworzysz.
    • Refaktoryzacja kodu
      • Analiza i optymalizacja: GPT lub Copilot mogą podpowiedzieć lepsze wzorce projektowe (np. stosowanie wzorców jak HOC, hooki, Context API zamiast nadmiaru props drilling). Wystarczy opisać problem, a narzędzie może zasugerować efektywniejsze rozwiązanie.
      • Skracanie i upraszczanie kodu: Poproś GPT o analizę Twojego kodu pod kątem refaktoryzacji i upraszczania.
      • W przypadku złożonych funkcji GPT może zasugerować bardziej zwięzłe podejście.

    Przyspieszona nauka nowych technologii

    Zastosowanie w realnych projektach: Gdy chcesz nauczyć się nowej technologii (np. React Query, Zustand, czy Next.js), zamiast czytać dokumentację od deski do deski, możesz poprosić GPT o wyjaśnienie podstaw w kontekście Twojego projektu. W ten sposób AI dostosuje swoje wyjaśnienia do Twojego aktualnego kontekstu. Rozwiązywanie problemów w locie: Zamiast przeszukiwać Stack Overflow, możesz zadać pytanie AI dotyczące błędów lub wyzwań, jakie napotykasz w trakcie implementacji nowych technologii. GPT wyjaśni, jak rozwiązać problem krok po kroku.

    Tworzenie zadań złożonych

    Automatyczne generowanie kodu na podstawie opisu: Możesz opisać złożony komponent, a Copilot wygeneruje jego kod na podstawie Twojego opisu, co przyspieszy tworzenie nowych funkcjonalności. Iteracyjny rozwój: GPT może być pomocny przy szybkim tworzeniu prototypów aplikacji. Możesz opisać, co chcesz osiągnąć, a AI wygeneruje podstawowe komponenty, które możesz iteracyjnie rozwijać.

    Code Review z AI

    Analiza kodu pod kątem optymalizacji i błędów: Copilot lub GPT mogą pełnić rolę „recenzenta” kodu. Możesz poprosić AI o przeanalizowanie Twojego kodu pod kątem potencjalnych problemów (np. wydajność, bezpieczeństwo, dobre praktyki).

    Sugestie ulepszeń: AI może podsunąć rozwiązania optymalizujące wydajność (np. zmniejszenie liczby renderów komponentów, lepsze zarządzanie stanem).

    • Tworzenie testów jednostkowych
      • Generowanie testów: Copilot jest świetny do generowania podstawowych testów jednostkowych. Możesz opisać, co dana funkcja powinna robić, a narzędzie automatycznie wygeneruje podstawowe testy.
      • Testy E2E: W przypadku projektów front-endowych możesz użyć Copilota do szybkiego tworzenia testów e2e z użyciem narzędzi takich jak Cypress lub Playwright.

    Learning by Doing – Przyspieszenie nauki frameworków

    • Projekty naukowe: Zamiast korzystać z nudnych przykładów z dokumentacji, twórz projekty w oparciu o realne wyzwania, a Copilot pomoże Ci na bieżąco implementować kolejne funkcjonalności. Przykładowo, próbując wdrożyć Next.js, możesz opisać architekturę swojej aplikacji i poprosić Copilota o sugestie dotyczące struktury folderów, nawigacji, a nawet optymalizacji renderowania.

    Personalizowane ścieżki nauki

    Tworzenie spersonalizowanych materiałów edukacyjnych: Możesz poprosić GPT o stworzenie planu nauki w oparciu o Twoje aktualne umiejętności i cele. Na przykład, jeśli chcesz przejść z Reacta do Next.js, GPT może stworzyć krok po kroku ścieżkę, która uwzględnia Twoje mocne i słabe strony.

    • Wyszukiwanie błędów i debugowanie Debugowanie na poziomie wysokim: AI może analizować Twój kod, sugerować przyczyny problemów oraz proponować potencjalne rozwiązania, co znacznie przyspiesza proces debugowania. Podpowiedzi kontekstowe: Kiedy napotkasz błąd w kodzie, zamiast czytać długie opisy w dokumentacji, możesz szybko otrzymać skrótowy i trafny opis przyczyny problemu oraz potencjalne poprawki.
    • Tworzenie template’ów i boilerplate’ów Gotowe szablony projektów: Możesz poprosić AI o wygenerowanie template’u projektu na bazie Twoich preferencji, np. konfiguracja Webpacka, setup TypeScripta, konfiguracja TailwindCSS czy Redux.

    Przykłady użycia Copilota i GPT:

    • Refaktoryzacja istniejącego kodu: „Przepisz ten komponent Reacta na hooki”.
    • Optymalizacja kodu: „Zoptymalizuj tę funkcję pod kątem wydajności”.
    • Debugowanie: „Dlaczego ten kod powoduje memory leak w przeglądarce?”.
    • Szybka nauka nowych technologii: „Wytłumacz, jak działa React Suspense i jak mogę go użyć w swoim projekcie”.

    Kluczowe porady:

    • Dostosowanie promptów: Im lepiej opiszesz problem lub zadanie, tym trafniejsze będą odpowiedzi AI.
    • Używaj AI iteracyjnie: Zacznij od prostych zapytań i z czasem rozwijaj je, dodając więcej kontekstu.
    • Narzędzia AI, które warto zintegrować:
    • GitHub Copilot: Do automatycznego generowania kodu.
      • ChatGPT z API (wersja z GPT-4): Do bardziej zaawansowanych zapytań, rozwiązywania problemów oraz nauki nowych technologii.
      • Tabnine: AI-driven autocompletion z zaawansowanymi predykcjami.

    Jakie są najbardziej skuteczne narzędzia AI do programowania

    Najbardziej skuteczne narzędzia AI do programowania, które mogą znacznie zwiększyć efektywność pracy programistów, to:

    GitHub Copilot Oparty na modelu OpenAI Codex, Copilot wspiera programistów poprzez autouzupełnianie kodu oraz sugerowanie fragmentów i funkcji w czasie rzeczywistym. Jest szczególnie przydatny w przyspieszaniu pisania kodu i poprawianiu jego jakości.

    ChatGPT Używany do generowania kodu, odpowiadania na pytania dotyczące technologii oraz tłumaczenia pomiędzy różnymi językami programowania. Może być również wykorzystywany do przeglądania kodu i udzielania wskazówek.

    OpenAI Codex: To model AI, który potrafi interpretować polecenia w języku naturalnym i generować odpowiedni kod. Jest używany w różnych narzędziach, w tym GitHub Copilot.

    CodeClimate Narzędzie do analizy jakości kodu, które wykorzystuje AI do identyfikacji błędów oraz zduplikowanego kodu. Udziela rekomendacji dotyczących optymalizacji.

    Snyk Narzędzie skupiające się na bezpieczeństwie, które skanuje bazy kodu w poszukiwaniu luk w zabezpieczeniach i błędów w zależnościach oprogramowania open-source, oferując rekomendacje naprawy.

    DeepCode Narzędzie analizujące kod pod kątem błędów i luk w zabezpieczeniach, pomagające programistom poprawić jakość aplikacji.

    Tabnine Asystent kodowania oparty na AI, który uczy się z kodu zespołu i dostosowuje swoje sugestie do stylu programowania danego zespołu.

    Te narzędzia nie tylko automatyzują rutynowe zadania, ale również poprawiają jakość kodu i przyspieszają proces nauki nowych technologii.

    Najlepsze narzędzia AI do analizy kodu, które wspierają programistów w identyfikacji błędów, optymalizacji i poprawie jakości kodu, to:

    CodeQL Narzędzie od GitHub, które umożliwia semantyczną analizę kodu. Pomaga programistom zrozumieć zachowanie ich kodu oraz identyfikować potencjalne zagrożenia i błędy.

    SonarQube Platforma do analizy jakości kodu, która automatycznie skanuje kod źródłowy w poszukiwaniu błędów, luk bezpieczeństwa oraz problemów z jakością. Oferuje szczegółowe raporty i rekomendacje dotyczące poprawy.

    DeepCode Narzędzie do analizy statycznej, które wykorzystuje AI do wykrywania błędów i luk w zabezpieczeniach. Przeprowadza dogłębną analizę kodu, co pozwala na zwiększenie bezpieczeństwa aplikacji.

    Codacy Umożliwia automatyczną analizę kodu i dostarcza wskazówki dotyczące poprawy jakości oraz zgodności z najlepszymi praktykami programistycznymi.

    Snyk Narzędzie skoncentrowane na bezpieczeństwie, które skanuje bazy kodu w poszukiwaniu słabości i udziela rekomendacji dotyczących ich naprawy. Integruje AI z uczeniem maszynowym w celu detekcji błędów.

    LGTM Narzędzie do analizy kodu, które identyfikuje problemy w kodzie i sugeruje poprawki. Umożliwia również integrację z systemami CI/CD. Semgrep Narzędzie do analizy statycznej, które pozwala na definiowanie reguł w celu wykrywania wzorców w kodzie źródłowym, co ułatwia identyfikację potencjalnych problemów.

    Te narzędzia wspierają programistów w utrzymaniu wysokiej jakości kodu oraz przyspieszają proces wykrywania i naprawy błędów.

  • Post #42 Nowe tematy i trendy programistyczne

    Post #42 Nowe tematy i trendy programistyczne

    Co nowego na będzie na blogu Opengateweb.com

    Wraz z kwietniem 2025 na blogu znajdziecie wiele przydatnych materiałów związanych z szerokim zakresem tematów dotyczących programowania, technologii oraz najnowszych trendów w branży IT.

    Strona będzie dostarczała wiele wartościowych treści zarówno dla początkujących programistów, jak i zaawansowanych deweloperów, starając się odpowiadać na najczęściej pojawiające się pytania i wyzwania technologiczne.

    Co nowego znajdziecie na stronie bloga opengateweb.com?

    Języki programowania

    Szczegółowe poradniki oraz artykuły dotyczące najpopularniejszych języków, takich jak Python, Java, JavaScript, C#, C++, TypeScript i Go. Tutoriale dotyczące praktycznych zastosowań, porównania wydajności oraz najlepsze praktyki w programowaniu w tych językach.

    Frameworki i biblioteki

    Omówienie i przykłady pracy z frameworkami frontendowymi💥, jak React i Angular, oraz backendowymi, jak Django, Flask i Node.js. Przewodniki dotyczące bibliotek do analizy danych, takich jak Pandas i NumPy, które pomagają w pracy z dużymi zbiorami danych.

    Zagadnienia techniczne

    Wnikliwe omówienie zaawansowanych tematów technicznych, takich jak algorytmy i struktury danych, z praktycznymi przykładami ich zastosowania w różnych językach. Artykuły na temat paradygmatów programowania, w tym programowanie obiektowe i funkcyjne.

    Poradniki o testowaniu jednostkowym oraz najlepszych praktykach w zakresie testowania i zapewniania jakości kodu.

    Narzędzia i technologie

    Wskazówki dotyczące efektywnego korzystania z narzędzi programistycznych, takich jak Git, Docker, Kubernetes, czy systemów do automatyzacji procesu wdrażania (np. CI/CD).

    Artykuły na temat zarządzania wersjami, konteneryzacji aplikacji oraz skalowania rozwiązań w środowiskach chmurowych.

    Problemy i błędy

    Rozwiązania często pojawiających się błędów, np. „jak naprawić [konkretny błąd]” w popularnych językach i narzędziach. Szczegółowe przewodniki dotyczące debuggingu oraz wskazówki, jak unikać typowych pułapek podczas kodowania.

    Optymalizacja wydajności aplikacji, zarówno pod kątem czasu wykonania, jak i wykorzystania zasobów.

    Zastosujemy dość ogólne podejście do wdrożenia aby było zrozumiałe i mniej więcej dopasowane do wielu applikacji.

    Rozwój aplikacji

    Tutaj się znajdą : tutoriale krok po kroku dotyczące tworzenia aplikacji webowych i mobilnych, z uwzględnieniem nowoczesnych podejść, takich jak architektura mikroserwisowa i serverless. Artykuły o UX/UI design, z naciskiem na praktyczne wskazówki dotyczące poprawy interakcji użytkownika oraz estetyki interfejsów.

    SEO i marketing

    Wzrost znaczenia SEO w kontekście programowania, z naciskiem na optymalizację kodu i treści pod kątem wyszukiwarek. Obecne zmiany zwiazane z dynamiką AI w SEO. Narzędzia do analizy słów kluczowych, takie jak Google Trends, A hrefs czy SEMrush, które pomagają w dostosowaniu treści aplikacji do wymogów SEO.

    Jakie tematy w dziedzinie programowania będą wkrótce popularne i poruszane na Blogu Opengateweb?

    Nowoczesne technologie sztucznej inteligencji – Zwiększone zainteresowanie machine learning oraz AI, szczególnie w kontekście zastosowań biznesowych, analizy danych oraz automatyzacji procesów.

    Zrównoważony rozwój w IT – Coraz częściej wyszukiwane będą tematy związane z energooszczędnym programowaniem, optymalizacją zużycia zasobów przez aplikacje oraz technologiami wspierającymi zielone IT.

    Programowanie kwantowe – Wzrost zainteresowania komputerami kwantowymi i ich potencjalnym wpływem na przyszłość rozwoju oprogramowania, z naciskiem na algorytmy kwantowe.

    Bezpieczeństwo aplikacji – W związku z rosnącą liczbą cyberataków, coraz więcej programistów będzie szukać informacji na temat bezpiecznego kodowania, ochrony danych oraz testowania podatności na ataki.

    Low-code/no-code – Popularność platform low-code i no-code będzie rosła, gdyż firmy szukają sposobów na szybkie tworzenie aplikacji bez konieczności intensywnego programowania.

    Blockchain i Web3 – Wzrost zapytań dotyczących blockchain, inteligentnych kontraktów oraz technologii związanych z Web3, zwłaszcza w kontekście finansów i aplikacji zdecentralizowanych (DApps).

    Te tematy doskonale odzwierciedlają rozwijające się trendy w branży programistycznej i technologicznej, odpowiadając na potrzeby profesjonalistów oraz entuzjastów IT. Blog opengateweb.com z pewnością będzie regularnie aktualizowany, aby dostarczać Wam najnowszych informacji i inspiracji.

    Zapraszamy

  • Post #41 Duże prace z witryną Telomers.pl

    Post #41 Duże prace z witryną Telomers.pl

    Następne prace nad Telomers.pl

    Dodałem dwie strony oraz Panel Admin. Dodałem stronę 20 Superfoods dla zdrowia oraz Uniwersalne Prawa wszechświata. Jestem dumny z artykułu o Prawach szczególnie że ten temat mnie interesuje i chciałem się nim podzielić.

    Odwiedź Telomers 20 Superfoods dla zdrowia przeczytaj więcej o superfoods.

    Uniwersalne Prawa Wszechświata

    Dodałem na Telomers Uniwersalne prawa wszechświata są znane jako prawa naturalne lub jednolite. Generalnie są hermetyczne i mają swoje korzenie w hermetyzmie. Hermetyzm jest dziedziną oraz semantyką pojęcia tych praw. W artykule porównuje prawa hermetyzmu z Prawami Naturalnymi.

    Dodanie Admin Telomers dla linków, url i postów

    Strona robi się duża i dlatego robię Admin Panel aby można było łatwo zarządzać stronami. Panel Admin dla telomers będzie rozwijany według potrzeb projektu. Jest to ambitny projekt, który ma na celu umożliwienie łatwego zarządzania stronami na Telomers.pl. Funkcjonalności będzie sukcesywnie dodawana a ulepszenia nanoszone w miarę postępu prac. Dzięki temu admin będzie stale rozwijany i dostosowywany do wymagań użytkowników. Obecnie wyświetla mi listę postów i stron.

  • Post #37 podsumowanie do Lipca

    Post #37 podsumowanie do Lipca

    Podsumowanie Lipca

    W lipcu jak zazwyczaj w gorące lato – nie chce się za dużo siedzieć przy kompie. 14 + 20 hrs

    Wykonałem sporo pracy bardziej związanej z researchem i przebudową Telomers.pl można zaliczyć to na 20 hrs minimum.

    • #31 Achemia SEO
    • #32 SEO Audyt
    • #33 Telomers update ok 20 hrs
    • #34 SEO Linki
    • #35 EAT Update Google
    • #36 Angular Gym

    Podsumowanie całościowe

    W czerwcu zacząłem zmiany i przebudowę z WordPress na zwyczajną aplikację PHP HTML CSS JS strony Telomers.pl zalety WP całkiem mnie pchnęły w napisanie samodzielnie kodu. Trochę jednak czasu będzie zmarnowane na przeklepanie treści stron wraz z linkowaniem ale za to będzie to zrobione jak należy.

    W czerwcu wykonałem sporo podbudowy i przypomnienia SEO a także rozpoznałem możliwość zarabiania na Audytach. Prowadziłem negocjację z Frudisajn.pl oraz testowałem narzędzie SemRush, Ahrefs, SimilarWeb, Keysearch i oczywiście narzędzia Googla. Research zaprowadził mnie do Adobe Analytics

    Łatwość kodowania

    • #29 Telomers.pl 20 hrs
    • #30 Frudisajn.pl 5 hrs

    Czerwiec i Lipiec 2024 Dodałem do 166 godzin pracy jeszcze:

    • Czerwiec 25 hrs
    • Lipiec 36 hrs

    Total przepracowanych godzin

    Od początku Challange jest już 227. Moje założenia przewidywały że będę już zarabiał małe kwoty na programowaniu ( po trzech miesiącach Kwiecień-Czerwiec) i jest to już blisko. Może opóźnienie wynika z rozdrobnienia ( przebudowa Telemors, audyty i SEO, ) i potrzebuje się skupić bardziej na programowaniu.

  • Post #33 SEO Przebudowa Telomers

    Post #33 SEO Przebudowa Telomers

    SEO Przebudowa Telomers – Nowe Podejście do Optymalizacji

    Dlaczego Zdecydowałem się na Zmianę?

    Pluginy w WordPress mogą być świetnym rozwiązaniem dla wielu stron, ale z czasem zacząłem odczuwać ich ograniczenia. Postanowiłem podjąć wyzwanie i przejść na czysty kod, co daje mi pełną kontrolę nad każdym aspektem strony.

    Nowy Klient, Nowe Możliwości

    Zdobycie nowego klienta w zakresie usług SEO otworzyło przede mną nowe perspektywy. Ta współpraca pozwoli mi nie tylko rozwinąć moje umiejętności, ale także zastosować innowacyjne podejście do optymalizacji.

    Wybór Technologii dla Nowego Telomers

    Przy wyborze nowych rozwiązań dla Telomers skupiłem się na trzech głównych aspektach:

    1. Estetyka
    2. Elastyczność
    3. Brak ograniczeń

    Dzięki temu mogę tworzyć unikalne i wydajne rozwiązania, idealnie dopasowane do potrzeb projektu.

    Implementacja Nowych Funkcji

    Po przetestowaniu różnych opcji, zdecydowałem się na implementację Fuse.js jako silnika wyszukiwania. To rozwiązanie nie tylko poprawia funkcjonalność strony, ale także wspiera cele SEO poprzez lepszą indeksację treści. Zobacz na https://telomers.pl/search

    Nowe Zlecenia: SEO i Wymiana Linków

    Oprócz przebudowy Telomers, otrzymaliśmy dwa ekscytujące zlecenia:

    1. Usługi SEO dla Frudizajn.pl (specjalna fonetyczna pisownia): To zlecenie pozwoli nam zastosować nasze najnowsze strategie SEO w praktyce, pracując nad unikatową marką. Frudizajn.pl
    2. Projekt wymiany linków: Otrzymaliśmy również zlecenie na wymianę linków, co jest kluczowym elementem strategii off-page SEO. To doskonała okazja do budowania wartościowych relacji w branży i wzmacniania profilu linkowego naszych klientów.

    Te nowe projekty nie tylko poszerzą nasze portfolio, ale także dadzą nam możliwość przetestowania różnych technik SEO w różnorodnych kontekstach.

    Co Dalej?

    W kolejnych postach będę dzielił się szczegółami technicznymi tej transformacji oraz jej wpływem na wyniki SEO. Śledźcie bloga, aby być na bieżąco z postępami projektu!

    Postępy w Pozycjonowaniu Telomers

    Pojawiają się nowe frazy i organiczne słowa kluczowe, których nie było na WordPress. Zaczynam publikować informal i sales typy wpisów. Więcej w następnym poście.

  • Post #8 Mój Gist

    Post #8 Mój Gist

    Przegląd Gist oraz przypomnienie Git i Bash

    Gist Scripterix to repozytorium na portalu GitHub, które zawiera różnorodne skrypty i rozwiązania programistyczne przygotowane przez użytkownika o pseudonimie Scripterix. Repozytorium to jest pełne przydatnych narzędzi i kodów źródłowych, które mogą być wykorzystane do rozwiązywania różnorodnych problemów programistycznych. Osoby korzystające z Gist Scripterix mogą znaleźć tu wiele cennych wskazówek i inspiracji do własnych projektów.

    Jeśli chodzi o konkretną zawartość Gist – Scripterix, można w niej znaleźć skrypty w różnych językach programowania, w tym Python, Java, JavaScript i wiele innych. Skrypty te dotyczą różnorodnych zagadnień związanych z programowaniem, takich jak obsługa plików, manipulacja danymi, tworzenie interfejsów użytkownika czy też rozwiązywanie problemów matematycznych. Dzięki różnorodności tematów i języków programowania, Gist Scripterix jest bogatym źródłem wiedzy dla programistów o różnym stopniu zaawansowania.

    Warto również podkreślić, że Gist – Scripterix jest aktywnie rozwijane i uzupełniane o nowe skrypty oraz rozwiązania. Użytkownicy mogą śledzić repozytorium i być na bieżąco z najnowszymi dodatkami i aktualizacjami. Dzięki temu mogą być pewni, że znajdą tutaj nie tylko starannie opracowane, ale także aktualne i zgodne ze standardami branżowymi rozwiązania. Całość sprawia, że Gist Scripterix jest cennym źródłem wsparcia i inspiracji dla programistów poszukujących nowych pomysłów i skutecznych rozwiązań w swojej pracy zawodowej.

    Gist GitHub Functions – kliknij tutaj

    Gist index poniżej znajdziesz listę kodu znajdującego się na Gist Scripterix

    ES6 Ecma262 201

    Bulma Carousel with Text Content

     Flex CSS

    Flex and Grid : grid nested in flex

    Bootstrap Modal v4.5.3

     JWT

    Ideał

    Git Bash

    W Gist zawarłem trochę polceceń CLI do obsługi wersjonowania, przesyłania repozytorium na GitHub, robienia komentarzy oraz większość typowych komend.

    Do rozszerzenia i dodania jest git-stash — zachowanie zmian w brudnym katalogu roboczym. Przykłady użycia

    Zasoby Git https://git-scm.com/

    # https://git-scm.com/doc

// Initialize local repo

# git init      

// Add File to Index &&

# git add    

# git add *.js

// Add all

# git add .    

// Rm File from Index

# git rm --cashed index.html  

// Check working tree

# git status      

// Commit Changes to Index

# git commit  

// Instert

# i

// Commit status

# :wq

// Commit Changes with Comments inline  

# git commit -m 'Changes app.js'

// Push to remote repo

# git push      

// Create file to ignore register

// in gitignore file name the name ex; log.txt all folder /dir2

# gitignore            

// Branches = Master B - all project, working on module ex: login Login Branch  

# git branch login

    Polecane kursy Git

    Jedna z ciekawszych pozycji kursów Git i sposobów wersjonowanie jest kursgita.pl  by Maciej Aniserowicz. Nie trzeba nic dodawać. Kurs jest po polsku Link do kursu Git

    Na głównej stronie Git możemy pobrać książkę napisaną przez Scott Chacon i Ben Straub. Książka ta nosi tytuł [„Pro Git”](https://git-scm.com/book/en/v2) i jest dostępna za darmo w formie elektronicznej. Znajują się tam także refencje [Docs](https://git-scm.com/doc) przygotowane przez twórców Git.

  • Post #6 Hugo generator

    Post #6 Hugo generator

    Hugo Theme PaperMod Strona OpenGateWeb była oparta o generator Hugo i język GO. Jednak po aktualizacji w grudniu 2024 Blog się rozjechał – niezgodności szablonów wersji Hugo i kilka innych fatal errors zmusiło mnie do powrotu do WP.

    Dodawanie metryki z godzinami

    Dodałem tabelę na stronie Wyzwanie 10k i będzie na początku wystarczająca aby dodawać LogBook z przepracowanymi godzinami w Challange.

    Tabela będzie zawierała link do Post z numerem np #6. Nie zawsze będę tworzył post gdyż całe 2h przeznaczę na zadanie. Może być kilka zadań opisanych w jednym pośćie.

    Wysyłanie cv w odpowiedzi na JobOffers

    Dodatkowo pomyślałem że mogę wysyłać odpowiedz na Juniorskie oferty pracy Front-End oraz inne pokrewne ale związane z IT vacanty. Przy okazji robię rozeznanie co się dzieje na rynku IT. Znów jest dużo ofert Junior.

    Dodawanie obrazów do Theme i kwestie renderowania.

    Jest więcej wiedzy na temat dodawania do Hugo obrazów. Można statycznie przez szablony oraz można użyć techniki bundle. Temat do rozwinięcia poniżej kilka przydatnych zasobów.

    Paper Mod – Cover IMG How To

    https://github.com/adityatelange/hugo-PaperMod/wiki/Features#post-cover-image

    Post Cover Image

In post's page-variables add :

cover:

  image: "<image path/url>"

  # can also paste direct link from external site

  # ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png

  alt: "<alt text>"

  caption: "<text>"

  relative: false # To use relative path for cover image, used in hugo Page-bundles

When you include images in the Page Bundle, multiple sizes of the image will automatically be provided using the HTML5 srcset field.

To reduce generation time and size of the site, you can disable this feature using

params:

  cover:

    responsiveImages: false

To enable hyperlinks to the full image size on post pages, use

params:

  cover:

    linkFullImages: true

    Hugo Image proccessing(https://gohugo.io/content-management/image-processing/)

    Hugo Render hooks https://gohugo.io/render-hooks/

    Zasoby PaperMod

    PaperMod to wszechstronny szablon dla Hugo, który oferuje wiele zasobów i opcji konfiguracyjnych, umożliwiając dostosowanie wyglądu i funkcjonalności strony do własnych potrzeb. Oto niektóre z zasobów i opcji konfiguracyjnych dostępnych w PaperMod:

    – Motywy kolorystyczne: Możliwość wyboru różnych motywów kolorystycznych, aby dopasować wygląd strony do preferencji użytkownika.

    – Układ strony Konfigurowalne układy strony, takie jak układ z jedną kolumną, dwoma kolumnami, itp.

    – Nagłówki i stopki Opcje dostosowywania nagłówków i stopek, w tym dodawanie własnych logo, linków do mediów społecznościowych i innych elementów.

    – Menu nawigacyjne Możliwość tworzenia i dostosowywania menu nawigacyjnych, aby ułatwić użytkownikom poruszanie się po stronie.

    – Widżety Dodawanie różnych widżetów, takich jak listy najnowszych postów, kategorie, tagi, itp.

    – Obsługa obrazów Zaawansowane opcje przetwarzania obrazów, w tym responsywne obrazy, linki do pełnych rozmiarów obrazów, itp.

    – Render hooks Możliwość dostosowywania sposobu renderowania różnych elementów strony za pomocą render hooks.

    – SEO i analityka Wbudowane wsparcie dla SEO i integracji z narzędziami analitycznymi, takimi jak Google Analytics.

    Dzięki tym zasobom i opcjom konfiguracyjnym, PaperMod pozwala na praktycznie dowolne dostosowanie szablonu do indywidualnych potrzeb i preferencji użytkownika. Oto link do strony GitHub AdityLang Git Hugo PaperMode https://github.com/adityatelange/hugo-PaperMod/wiki/Features#profile-mode twórcy szablonu.

    Dodawanie obrazów zostało zaimplementowane.

    Robi się to przez:

    – dodaj obraz do static/img a następnie code.

    – w moim przypadku static/img

    – trzeba pamiętać o finalnej ścieźce do obrazka

    ![Kodowanie](/img/code.jpg)

    Więcej o tej modyfikacji a także jak dodałem title do a href jest w post #40 40 Jak dodać title w a href Hugo.

    40 Jak dodać title w a href Hugo(/posts/40-title-a-href/”)

    Dodatkowe flagi do CLI Hugo

    Hugo version

    hugo version

    Moja v Hugo go v0.123.0-DEV-1891d5e6b5575e3abb7e0f80c3fbce1670f9bd5e windows/amd64 BuildDate=2024-02-01T07:18:11Z

    Usuwanie public

    Przed budowaniem witryny w trybie produkcyjnym, upewnij się, że katalog public jest czysty. Możesz to zrobić, usuwając zawartość katalogu public przed każdym budowaniem:

    rm -rf public/*

    Dodatkowe błędy w konsoli

    Uruchom polecenie budowania z dodatkowymi opcjami debugowania, aby uzyskać więcej informacji na temat błędów:

    hugo --logLevel info --logLevel debug

  • Post #5 wielowątkowy zaczynam wyzwanie

    Post #5 wielowątkowy zaczynam wyzwanie

    Zaczynam wyzwanie z nauką oraz przypominaniem sobie całej wiedzy, która jakby trochę się „zakurzyła”. Ubieram działanie w bardziej ustrukturyzowany system pracy.

    Zaczynając od ogółu do szczegółu … Word Press i projekt [Telomers.pl](https://telomers.pl) – zmęczony z zawiłościami CMS WP, zdecydowałem się że, będzie przeróbka na to co potrzebuje i potrafię szybko dopisać np opcje, funkcjonalność lub sposób rozwijania projektu. WordPress zjada tak wiele niepotrzebnego czasu na odgawywanie jak się robi coś na okrętkę. Szablony CSS w bazie i w notacji JSON. Dodatkowo używanie **hooks** aby dodać swoje. Można dodać stylesheet jedną linijką w kodzie.  Jest trochę pracy z przepisaniem ale potem będzie znacznie łatwiej rozbudować treść.

    Przypominam sobie PHP i będę testował **modrewrite** do celów zbudowania linków bez tyldy nazwa-pliku.html. Do projektu oraz na bazie **fuse.js** testowałem kilka możliwośći wyszukiwraki. Ciekawe jest w fuse wiele możliwość i podejść do wyszukiwania.

    Kawał dobrego kodu Fuse.js

    Fuse.js Jest to potężna ale lekka biblioteka do przeszukiwania z rozmyciem, która nie wymaga żadnych zależności. Jest często wykorzystywana do implementowania funkcji wyszukiwania z możliwością pomyłek w aplikacjach internetowych.

    Biblioteka ta umożliwia przeprowadzanie przeszukiwań z rozmyciem, co oznacza, że można znaleźć ciągi znaków, które są zbliżone do danego wzorca, a nie dokładnie takie same. Jest to przydatne, gdy użytkownik może popełnić literówki lub gdy chcemy zapewnić bardziej elastyczne wyszukiwanie.

    Przykład użycia, pokazuje, jak łatwo można skonfigurować i użyć Fuse.js do przeszukiwania listy elementów (na przykład książek) w zadanym zakresie kluczy (tutaj tytuł i imię autora). W ten sposób można szybko uzyskać listę wyników pasujących do podanego wzorca. Fuse jest proste i szybkie jak 1 2 3 poniżej.

    // 1. List of items to search in
const books = [
  {
    title: "Old Man's War",
    author: {
      firstName: 'John',
      lastName: 'Scalzi'
    }
  },
  {
    title: 'The Lock Artist',
    author: {
      firstName: 'Steve',
      lastName: 'Hamilton'
    }
  }
]

// 2. Set up the Fuse instance
const fuse = new Fuse(books, {
  keys: ['title', 'author.firstName']
})

// 3. Now search!
fuse.search('jon')

// Output:
 [
   {
   item: {
     title: "Old Man's War",
       author: {
         firstName: 'John',
         lastName: 'Scalzi'
       }
     },
     refIndex: 0
   }
 ]

    Przykłady użycia fizzy search

    Na GitHub znalazłem repo wyszukujące z przygotowanych odpowiedzi – bardzo łatwe do implementacji FAQ oraz dodałem swoje repo. W moim przykładzie zastosowałem ścisłe dopasowanie zatem wyszukując Jagody i jagody robi różnicę. Dodatkowo jest tworzony link ale będę to dopracowywał gdyż chciałbym aby przechodził ( skrolował ) do odpowiedniego fragmentu. Dodatkowo wyszukiwanie jest w Modalu Ui jest Bootstrapowy.

    My Repo GH search – Scripterix – fuse search

    Repo GH FAQ type MehediHasan06 – fuse search

  • Post #1 Powitanie OpenGateWeb

    Post #1 Powitanie OpenGateWeb

    Witajcie na OpenGateWeb – naszym portfolio i blogu poświęconym nowoczesnym technologiom!

    Nasza platforma oferuje treści z trzech głównych kategorii: Tech News, Coding Corner oraz Design Hub.

    # Tech News

    W dziale Tech News znajdziesz świeże wiadomości ze świata IT, ze szczególnym naciskiem na sztuczną inteligencję.

    # Coding Corner

    Coding Corner to nasz obszar poświęcony programowaniu, gdzie dzielimy się poradami, tutorialami i wyzwaniami – śledź ze mną challange 10.000 godzin programowania do perfekcji!

    # Design Hub

    Natomiast Design Hub to miejsce, gdzie eksplorujemy świat projektowania stron internetowych i aplikacji. Dołącz do nas, aby pogłębiać wiedzę, rozwijać umiejętności i być na bieżąco z najnowszymi trendami w cyfrowym świecie!

    # Portfolio

    Nasze projekty w portfolio prezentują różnorodne podejścia do web designu, łącząc estetykę z funkcjonalnością. Dzięki naszym artykułom o JavaScript i TypeScript zdobędziesz cenną wiedzę, która pozwoli Ci rozwijać umiejętności programistyczne. Zapraszamy do odkrywania inspirujących projektów oraz praktycznych poradników, które pomogą Ci w realizacji własnych przedsięwzięć. Dołącz do naszej społeczności pasjonatów technologii i rozwijaj się razem z nami!

    #AI

    Sztuczna inteligencja, a w szczególności narzędzia takie jak OpenAI, ChatBot GPT, Gemini, Perplexity czy Claude Groq, zrewolucjonizowały sposób, w jaki projektujemy strony internetowe. Na blogu OpenGateWeb dzielimy się naszą wiedzą na temat AI i jej zastosowania w web designie.

    Współczesne podejście do projektowania stron wymaga nie tylko kreatywności, ale także umiejętności korzystania z nowoczesnych technologii. Dzięki AI możemy zoptymalizować proces twórczy, zwiększając efektywność i jakość naszych projektów. Narzędzia oparte na sztucznej inteligencji pomagają nam analizować dane użytkowników oraz dostosowywać treści do ich potrzeb.

    Zachęcamy do śledzenia naszego Bloga – razem odkryjemy fascynujący świat AI i jego wpływ na przyszłość web designu!

    Zapraszamy