[{"data":1,"prerenderedAt":188},["ShallowReactive",2],{"blog-\u002Fpl\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka":3,"blog-project-\u002Fpl\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka":111},{"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,"__hash__":110},"blog_pl\u002Fpl\u002Fblog\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\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka","\u002Fprojects\u002F2024\u002Fcoffee-recipes",{"title":5,"description":94},"pl\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka",[107,108,109],"vue","typescript","projekt","ZaVHA3dTEtz1HHiHeVxmJWeFYgzQKx0lriNntZpW1RE",{"id":112,"title":113,"agency":97,"body":114,"compare":97,"cover":146,"date":151,"description":152,"draft":95,"extension":96,"facts":153,"featured":95,"gallery":165,"galleryLead":97,"highlights":97,"image":173,"links":174,"meta":176,"navigation":100,"note":97,"ogImage":177,"path":178,"seo":179,"stack":180,"stem":185,"tags":186,"__hash__":187},"projects_pl\u002Fpl\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Findex.md","Coffee Recipes",{"type":8,"value":115,"toc":143},[116,119,123],[11,117,118],{},"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,120,122],{"id":121},"najważniejsze-cechy","Najważniejsze cechy",[41,124,125,128,131,134,137,140],{},[44,126,127],{},"Wyszukiwanie po składnikach z listy – przepisy z wybranymi składnikami na górze, pozostałe niżej",[44,129,130],{},"Dwa tryby filtra: przepis ze wszystkimi wybranymi składnikami albo z co najmniej jednym",[44,132,133],{},"Filtry zapisane w adresie strony – przefiltrowaną listę można komuś wysłać",[44,135,136],{},"Przepis w oknie: zdjęcie, składniki i sposób przygotowania",[44,138,139],{},"Polski i angielski, jasny i ciemny motyw oraz rozmiar czcionki – zapamiętane w przeglądarce",[44,141,142],{},"Przepisy, składniki i tłumaczenia w plikach JSON, publikacja na GitHub Pages przez GitHub Actions",{"title":86,"searchDepth":87,"depth":87,"links":144},[145],{"id":121,"depth":87,"text":122},{"desktop":147,"width":148,"height":149,"alt":150},"\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.",[154,157,160,163],{"value":155,"text":156},"22","przepisy z kilku ebooków w jednym miejscu",{"value":158,"text":159},"33","składniki do wyszukiwania – z listy, bez wpisywania",{"value":161,"text":162},"2","tryby filtra – wszystkie wybrane składniki albo co najmniej jeden",{"value":161,"text":164},"języki – polski i angielski, zapamiętane w przeglądarce",[166,169],{"src":147,"width":148,"height":149,"alt":167,"caption":168},"Lista przepisów","Lista – przepisy z wybranym składnikiem na górze, pozostałe niżej",{"src":170,"width":148,"height":149,"alt":171,"caption":172},"\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":175},"https:\u002F\u002Fgithub.com\u002Flukaszdzielo\u002Fcoffee-recipes",{},"\u002Fog\u002Fprojects\u002Fcoffee-recipes-pl.jpg","\u002Fpl\u002Fprojects\u002F2024\u002Fcoffee-recipes",{"title":113,"description":152},[181,182,183,184],"Vue 3","TypeScript","Vite","CSS","pl\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Findex",[107],"1rlt5105bymZokJ1NLoyCo5ttxGN058--RE3v5Bt78o",1791981943726]