[{"data":1,"prerenderedAt":189},["ShallowReactive",2],{"blog-\u002Fpl\u002Fwpisy\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka":3,"blog-project-\u002Fpl\u002Fwpisy\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka":112},{"id":4,"title":5,"art":6,"body":7,"date":93,"description":94,"draft":95,"extension":96,"image":97,"kind":98,"meta":99,"navigation":100,"ogImage":101,"path":102,"project":103,"seo":104,"slug":97,"stem":105,"tags":106,"translationKey":110,"updated":97,"__hash__":111},"blog_pl\u002Fpl\u002Fwpisy\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka.md","Trzy ebooki z przepisami i jedna zakładka w przeglądarce","\u002Fart\u002Fblog\u002Fcoffee-recipes.svg",{"type":8,"value":9,"toc":85},"minimark",[10,14,17,22,25,33,37,40,58,61,65,68,72,75],[11,12,13],"p",{},"Kupiłem ekspres do kawy. Razem z nim przyszedł mail z ebookiem z przepisami, drugi ebook dostałem za zapis do newslettera, a w ciągu miesiąca znalazłem jeszcze dwa–trzy kolejne. Brzmi jak raj dla kawosza – dopóki nie chcesz po prostu zrobić czegoś z tym, co masz w lodówce ☕",[11,15,16],{},"Bo jak szukać przepisu z miodem, skoro każdy ebook to osobny PDF, a każdy PDF trzeba przewinąć od początku do końca? Po kilku takich wieczorach uznałem, że wolę mieć wszystko w jednym miejscu, pod jednym linkiem w zakładkach.",[18,19,21],"h2",{"id":20},"najpierw-dane-potem-wygląd","Najpierw dane, potem wygląd",[11,23,24],{},"Zacząłem od przepisania przepisów do pliku JSON: nazwa, zdjęcie, składniki, sposób przygotowania i lista tagów – czyli składników, po których da się szukać. Dziś są tam 22 przepisy i 33 składniki. Tłumaczenia interfejsu też trafiły do osobnego pliku, więc strona działa po polsku i po angielsku.",[11,26,27,28,32],{},"Dopiero na tych danych zbudowałem widok w Vue 3 – listę kart, okno z przepisem i wyszukiwarkę. Przy okazji ćwiczyłem TypeScript i starałem się jak najrzadziej sięgać po ",[29,30,31],"code",{},"any",".",[18,34,36],{"id":35},"jedno-pytanie-dwie-odpowiedzi","Jedno pytanie, dwie odpowiedzi",[11,38,39],{},"Najciekawsze okazało się samo wyszukiwanie. Gdy wybierasz „miód” i „mleko”, możesz pytać o dwie różne rzeczy:",[41,42,43,52],"ul",{},[44,45,46,47,51],"li",{},"pokaż przepisy, które mają ",[48,49,50],"strong",{},"wszystkie"," te składniki,",[44,53,46,54,57],{},[48,55,56],{},"co najmniej jeden"," z nich.",[11,59,60],{},"Dlatego filtr ma oba tryby, a przepisy pasujące do wyboru są na górze listy – reszta zostaje niżej, żeby nie zgubić niczego z oczu.",[18,62,64],{"id":63},"link-który-można-wysłać","Link, który można wysłać",[11,66,67],{},"Wybrane składniki zapisuję w adresie strony. Dzięki temu przefiltrowaną listę można zapisać w zakładkach albo wysłać komuś w wiadomości – i po otwarciu linku od razu widać te same przepisy.",[18,69,71],{"id":70},"co-z-tego-zostało","Co z tego zostało",[11,73,74],{},"Projekt robiłem bez tutoriala w stylu „jak zrobić aplikację z przepisami” i do dziś uważam, że to był dobrze spędzony czas. Najwięcej nauczyłem się nie z samego Vue, tylko z myślenia o danych: co jest przepisem, co składnikiem, a co tylko tekstem do pokazania.",[11,76,77,78,32],{},"A ekspres? Działa codziennie. Strona też – ",[79,80,84],"a",{"href":81,"rel":82},"https:\u002F\u002Flukaszdzielo.github.io\u002Fcoffee-recipes\u002F",[83],"nofollow","zajrzyj do Coffee Recipes",{"title":86,"searchDepth":87,"depth":87,"links":88},"",2,[89,90,91,92],{"id":20,"depth":87,"text":21},{"id":35,"depth":87,"text":36},{"id":63,"depth":87,"text":64},{"id":70,"depth":87,"text":71},"2024-02-12","Jak kilka ebooków z przepisami na kawę zamieniłem w jedną stronę z wyszukiwaniem po składnikach – i czego nauczyłem się przy tym o Vue 3 i TypeScripcie.",false,"md",null,"post",{},true,"\u002Fog\u002Fblog\u002Fcoffee-recipes-pl.jpg","\u002Fpl\u002Fwpisy\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka","\u002Fprojects\u002F2024\u002Fcoffee-recipes",{"title":5,"description":94},"pl\u002Fwpisy\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka",[107,108,109],"vue","typescript","projekt","trzy-ebooki-z-przepisami-i-jedna-zakladka","9poB1Kq6O0zLF8FEC1hYZ2AojEeQ8nxb1XFLz1-2si0",{"id":113,"title":114,"agency":97,"body":115,"compare":97,"cover":147,"date":152,"description":153,"draft":95,"extension":96,"facts":154,"featured":95,"gallery":166,"galleryLead":97,"highlights":97,"image":174,"links":175,"meta":177,"navigation":100,"note":97,"ogImage":178,"path":179,"seo":180,"stack":181,"stem":186,"tags":187,"__hash__":188},"projects_pl\u002Fpl\u002Fprojekty\u002F2024\u002Fcoffee-recipes\u002Findex.md","Coffee Recipes",{"type":8,"value":116,"toc":144},[117,120,124],[11,118,119],{},"Po zakupie ekspresu do kawy dostałem mailem ebook z przepisami, drugi był za zapis do newslettera, a w ciągu miesiąca znalazłem jeszcze 2–3 kolejne. Zamiast szukać przepisu w kilku plikach PDF, zrobiłem jedno miejsce z całym zbiorem pod ręką – stronę na GitHub Pages, którą mam w zakładkach. Przy okazji uczyłem się Vue 3 i ćwiczyłem TypeScript – bez tutoriala w stylu „jak zrobić aplikację z przepisami”.",[18,121,123],{"id":122},"najważniejsze-cechy","Najważniejsze cechy",[41,125,126,129,132,135,138,141],{},[44,127,128],{},"Wyszukiwanie po składnikach z listy – przepisy z wybranymi składnikami na górze, pozostałe niżej",[44,130,131],{},"Dwa tryby filtra: przepis ze wszystkimi wybranymi składnikami albo z co najmniej jednym",[44,133,134],{},"Filtry zapisane w adresie strony – przefiltrowaną listę można komuś wysłać",[44,136,137],{},"Przepis w oknie: zdjęcie, składniki i sposób przygotowania",[44,139,140],{},"Polski i angielski, jasny i ciemny motyw oraz rozmiar czcionki – zapamiętane w przeglądarce",[44,142,143],{},"Przepisy, składniki i tłumaczenia w plikach JSON, publikacja na GitHub Pages przez GitHub Actions",{"title":86,"searchDepth":87,"depth":87,"links":145},[146],{"id":122,"depth":87,"text":123},{"desktop":148,"width":149,"height":150,"alt":151},"\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Frecipe-list.webp",1920,1189,"Coffee Recipes – lista przepisów przefiltrowana po składniku","2024-01-28","Przepisy na kawę z kilku ebooków w jednym miejscu – wyszukiwanie po składnikach, link z filtrami i dwa języki. Vue 3 i TypeScript.",[155,158,161,164],{"value":156,"text":157},"22","przepisy z kilku ebooków w jednym miejscu",{"value":159,"text":160},"33","składniki do wyszukiwania – z listy, bez wpisywania",{"value":162,"text":163},"2","tryby filtra – wszystkie wybrane składniki albo co najmniej jeden",{"value":162,"text":165},"języki – polski i angielski, zapamiętane w przeglądarce",[167,170],{"src":148,"width":149,"height":150,"alt":168,"caption":169},"Lista przepisów","Lista – przepisy z wybranym składnikiem na górze, pozostałe niżej",{"src":171,"width":149,"height":150,"alt":172,"caption":173},"\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Frecipe.webp","Przepis","Przepis w oknie – składniki i sposób przygotowania","\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Fthumbnail.webp",{"live":81,"github":176},"https:\u002F\u002Fgithub.com\u002Flukaszdzielo\u002Fcoffee-recipes",{},"\u002Fog\u002Fprojects\u002Fcoffee-recipes-pl.jpg","\u002Fpl\u002Fprojekty\u002F2024\u002Fcoffee-recipes",{"title":114,"description":153},[182,183,184,185],"Vue 3","TypeScript","Vite","CSS","pl\u002Fprojekty\u002F2024\u002Fcoffee-recipes\u002Findex",[107],"TXlMGsAuOh3eKMseZ2d6ACkgL9UHfsxQWfbipEzAsrw",1792530786417]