Hejto.pl

#angular

7
10
poocoo
Praktykant
w Dyskusje

Haslator – moje starcie z Angularem i Flutterem (wyszukiwarka haseł krzyżówkowychi synonimów)

Cześć!

Chciałem Wam pokazać projekt, który był dla mnie poligonem doświadczalnym i zderzeniem z dwiema nowymi technologiami. Jako fan gier słownych postanowiłem uderzyć w temat krzyżówek i synonimów, a przy okazji sprawdzić w boju Angulara oraz Fluttera.

Tak powstał Haslator – kontekstowa wyszukiwarka haseł, która ma ułatwić życie każdemu, kto utknie przy niedzielnej krzyżówce.

Co potrafi apka?

  • Wyszukiwanie kontekstowe: Wpisujesz frazę, a system przeszukuje bazę ponad miliona rekordów.

  • Filtrowanie wg wzorców: Jeśli znasz tylko niektóre litery (np. drugą i czwartą), wpisujesz wzór (np. P-P-A) i dostajesz pasujące propozycje.

  • Szybkie filtry: Możesz błyskawicznie zawęzić wyniki do konkretnej długości słowa.

Stawiałem przede wszystkim na szybkość i czysty UX. Apka jest lekka i działa błyskawicznie.


Technologia:

  • WWW: Angular

  • Mobile: Flutter

  • Engine: Całość śmiga w oparciu o Meilisearch, co zapewnia świetny performance wyszukiwania.

Link do wersji Web: https://haslator.pl

Link do Google Play: https://play.google.com/store/apps/details?id=pl.xview.x_crossword_mobile


Dajcie znać, co myślicie! Jeśli macie pomysły, co dorzucić do bazy albo jakie funkcje ułatwiłyby Wam życie przy rozwiązywaniu – dajcie znać.

#krzyzowka #tool #flutter #angular


Wyszukiwarka haseł krzyżówkowych i synonimów

Wyszukiwarka haseł krzyżówkowych i synonimów

Wpisz definicję lub układ liter i od razu zobacz możliwe odpowiedzi.

Haslator

Zaloguj się aby komentować

nieinteresujsie
Inspirator
w Oprogramowanie

W ramach odświeżenia wiedzy napisałem aplikację agregującą różne wydarzenia.

Na razie zbierane są audycje radiowe, wydarzenia sportowe, starty rakiet i wydarzenia związane z astronomią oraz święta.

Kategorie wydarzeń można ogwiazdkować i wyeksportować do kalendarza lub RSS.

Dajcie znać co o tym myślicie. Jeśli jest już coś podobnego to dajcie linka.

Czy są inne wydarzenia które chcielibyście tam znaleźć?


Backend napisany jest w PHP 8 (Symfony, API platform), frontend Angular 18, Bulma css.

https://events.w5.lt/


#oprogramowanie #aplikacja #angular #php #sport #radio #astronomia

Wydarzenia

W5
7a8fbdea-977b-432f-9384-e8347ae03f30
06eb629d-6f4b-49c4-839c-38395a856d9e
54c33c9e-70d5-47b6-9ee7-db04f05d30be
koszotorobur

@nieinteresujsie - to następnym razem zamiast odświeżać antyczną wiedzę, może naucz się zrobić to samo tylko nowocześniejszymi narzędziami

Zaloguj się aby komentować

Zaloguj się aby komentować

Anon
Kompan
w Programowanie

Potrzebuję materiały na temat testów jednostkowych do #angular

Polecacie jakieś konkretne materiały i/lub podręczniki?


#programowanie #frontend #programista15k #webdev

tatarysh

@rayros ja nie ogarniam ludzi, dokumentacja ma najczęściej wszystko czego potrzeba i jest dobrze opisana a i tak ludzie chodzą i szukają materiałów

potato_fairy

@Anon karma i jasmine - jest nawet w dokumentacji angulara https://angular.io/guide/testing tam jest chyba wszystko by móc zacząć, a jak potrzeba jakiejś głębszej wiedzy, to można zajrzeć na https://jasmine.github.io/

Może jeszcze przydać się cypress - to jest do E2E testów, ale może też się przyda.

Angular

Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

Angular

Zaloguj się aby komentować

Gitler
Inspirator
w Programowanie

#programowanie #flutter #webdev #react #angular #vue

Jaki jest wasz ulubiony framework webowy do własnych projektów

44 Głosów
marmot

@Gitler Bo React nie daje Ci pełnego stacku, a jedynie obsługę tworzenia reaktywnych komponentów. Możesz bez problemu używać takiego React jak kiedyś używało się jQuery (co zresztą w dawnych czasach robiło się podczas migrowania appek z jQuery na React). Do tego, nawet na stronie Reacta masz: "The library for web and native user interfaces", a jak wejdziesz w https://react.dev/learn/start-a-new-react-project to dopiero listę frameworków, które bazują na Reakcie. To, że ChatGPT twierdzi jedno, to nie znaczy, że tak jest . Jak odpisałbyś mu "ale React nie jest frameworkiem", to Cię przeprosi i się poprawi, jak przy wielu innych rzeczach

Start a New React Project – React

Start a New React Project – React

The library for web and native user interfaces

React

Zaloguj się aby komentować

Dapred
Kompan
w Programowanie

Jak poprawnie parsować response z http post w angularze? Case mam taki, że wysyłam requesta na endpointa(logowane) i mi zwraca albo sam token albo status code 401. I tutaj mam problem bo jak zwraca token to spoko zapisuje sobie w sesji itp ale jak zwraca 401 to w formacie


StatusCode: 401, ReasonPhrase: 'Unauthorized', Version: 1.1, Content: <null>, Headers:


{


}


I teoretycznie też zapisuje to jako token, chociaż nie jest tokenem bo sprawdzam czy po prostu jest jakaś odp xD


Mogę się jakoś dobrać do nagłówków aby status code wyciągnąć czy po prostu na sztywno dać warunek czy istnieje tekst "StatusCode" w response? Nie wiem jak inaczej to zweryfikować a moje rozwiązanie jest delikatnie ujmując brzydkie.


A to jak wysyłam:


signInUser(user: UserLogin){


    return this.http.post(AppSettings.API_URL + CONTROLLER + 'login', user, {responseType: 'text'});


  }


Tajemnicą chyba nie bedzie, że dopiero ucze się więc wyrozumiałości xD


#programowanie #angular

Zaloguj się aby komentować

Melonusk
Debiutant
w Programowanie

TailwindCSS


Jakie macie lub znacie sposoby na lepszą organizację klas zamiast bezpośrednio w DOM w className?


W jednym z projektów wyciągnąłem klasy do czegoś takiego:


const cls = {


container: "...",


text: "..."


}


I później w DOM'ie można było użyć className={cls.container} z tym że traciłem wtedy wszystkie ficzery związane z podpowiadaniem kodu i sortowaniem klas.


#tailwindcss #frontend #react #angular #vue #programowanie

Kamil.js

@Melonusk https://github.com/ben-rogerson/twin.macro pozwala na połączenie Tailwinda ze styled-components, emotion i innymi bibliotekami.


Dzięki temu używając Tailwinda możesz tworzyć ostylowane komponenty i po prostu je importować z innego pliku zamiast zaśmiecać DOM długimi className'ami. Jeśli chcesz nadal możesz używać Tailwinda w DOM, tylko zamiast w className umieszczasz go w atrybucie "tw", więc przy istniejącym projekcie trochę trzeba zrobić w ramach migracji.


Dopiero wczoraj odkryłem tę bibliotekę, bo tak jak ty chciałem uporządkować trochę DOM bez porzucania Tailwinda, więc jeszcze nie wiem czy jest coś lepszego i jakie potencjalne problemy mogą wyjść przy używaniu tego. W readme są przykładowe projekty w różnych technologiach, więc można szybko sprawdzić i się pobawić.

1e6bfae8-221d-475e-a3de-63bb2e85ea21
e2cbcdbb-3aaf-4981-9a8d-82019c24f330
Melonusk

@Kamil.js Cirkawe rozwiązanie, sprawdze na pewno chociaż mam awersję do styled components z powodu częstych problemów z typowaniem

Zaloguj się aby komentować

tomaszs
Specjalista
w Javascript

────── A tak działa operator RxJS: takeUntil


Więcej tutaj: https://summonthejson.com/blogs/tips/rxjs-takeuntil-explained


Obserwuj jak chcesz więcej!

RxJS: takeUntil Explained

RxJS: takeUntil Explained

RxJS stands for Reactive Extensions for JavaScript. It is a great library to handle flow of items received by your application. Today you will learn what is one of the most commonly used RxJS operator: takeUntil. The documentation offers a diagram showing how takeUntil works: But what does it really mean? The analogy I

Summon The JSON
919f667d-c1e5-41cb-909f-b6c0563cd9d3

Zaloguj się aby komentować

tomaszs
Specjalista
w Javascript

A tak działa operator RxJS: distinctUntilChanged


Więcej tutaj: https://summonthejson.com/blogs/tips/rxjs-distinctuntilchanged-explained


Obserwuj jak chcesz więcej!

RxJS: distinctUntilChanged Explained

RxJS: distinctUntilChanged Explained

RxJS stands for Reactive Extensions for JavaScript. It is a great library to handle flow of items received by your application. Today you will learn what is one of the most commonly used RxJS operator: filter. The documentation offers an explanation how the operator works: "Returns an Observable that emits all items em

Summon The JSON
fb23d253-7092-4dc1-b6d8-e8119925670a

Zaloguj się aby komentować

Zaloguj się aby komentować