/khaleel­gi­bran/the­do­nut­blog/tags/scrap­book/

Tagged “scrapbook”

  1. Alright, hello! First en­try on my crap­book (yes, crap­book). Let’s start with me re­design­ing my per­sonal web­site af­ter months of lazi­ness. I might have screwed up a bit be­cause I was stu­pid enough to add a ser­vice worker in the old one which cached things quite well, and now peo­ple who had vis­ited it in the past can’t view the new it­er­a­tion _unless_ you hard re­load it and I can’t seem to find a pro­gram­matic so­lu­tion.
  2. Hackclub x Valorant stick­ers >>>>>>> *
  3. Making a guest­book be­cause I have noth­ing else to do (surprise, sur­prise). I’m just hop­ing I don’t ov­erengi­neer this into com­plex­ity. I’m sup­press­ing (like KAY/O, can’t re­sist a good Valorant ref­er­ence) all my in­ner in­ter­ests in us­ing a frame­work, but in sim­ple HTML, CSS and JS we trust. And thanks @J_cordz about the info on Artemis, I guess I’ll see you on the moon? Flash­back to my visit to Mars (in 2020), they had no donuts.
  4. My dad’s re­sponse, af­ter I sent him my Artemis I board­ing pass, is sim­ply gold. :eggsdee:
  5. I am weirdly start­ing to like Typescript. Wrote all my guest­book server­less func­tion code in it, I feel a sense of su­pe­ri­or­ity. And I _love_ Supabase - great UI, great every­thing. Now for the up­load­ing com­ments part. My plan is to first val­i­date and san­i­tize user in­put, gen­er­ate a ran­dom ID for the com­ment which is stored in a sec­ond table, bcrypt the ran­dom ID and store the out­put hash, send an ap­proval link via a Discord web­hook which has the bcrypt out­put hash in the URL, click­ing the link runs a dif­fer­ent server­less func­tion which checks the hash in the URL and com­pares it with the out­put of hash­ing the same ID from the sec­ond table. Pretty ov­erengi­neered for a sim­ple guest­book. The things I do to pre­vent spam.
  6. Total sucky start to my day, with the ar­rival of a dam­aged Hacktoberfest swag post with a torn t-shirt. At least there’s some stick­ers in­tact ;)
  7. Throwback to my dino, I still don’t know what this mon­stros­ity is.
  8. 0001 - 11/04/2022 vectors and donuts ft. figma
  9. Reinstalled neovim and con­fig­ured it from scratch, fixed Alacritty’s bro­ken con­figs and I think I did a pretty good job! Yes, this is on Windows. 👀
  10. Trying out Rust for the first time! After a few days of strug­gling with move-be­fore-use sit­u­a­tions and just Rust in gen­eral, I man­aged to have a tri­an­gle move around my screen when ar­row keys are pressed. I have pos­si­bly writ­ten re­ally bad code, but I’m just happy I man­aged to give a tri­an­gle wings. Would love it if y’all could give me feed­back on my messy code: <https://gist.github.com/khalby786/c4211667fd399a96ba39c0d3a1eb377b>.
  11. smooooooth panes in vue
  12. Made a fun movie poster in Figma! <https://hackclub.slack.com/archives/C0351FX9QKS/p1656181803469579>
  13. Overusing noise in Figma! <https://hackclub.slack.com/archives/C0266FRGV/p1656865022638159?thread_ts=1656826703.189079&cid=C0266FRGV>
  14. Today’s Figma MVP was this neat plu­gin called <https://www.figma.com/community/plugin/735707089415755407/Image-tracer|Image tracer>. I used it to cre­ate a vec­tor of ZEDD’s logo and mod­i­fied the Z to make it look like a C. I also used it to cre­ate the Assemble text in the back­ground, which is from a screen­shot of <http://assemble.hackclub.com|assemble.hackclub.com>’s header be­cause I was too lazy to search for any brand­ing im­ages or SVGs. <https://hackclub.slack.com/archives/C01FJ5BBVJS/p1657042447223809?thread_ts=1657040372.456449&cid=C01FJ5BBVJS>
  15. So I was work­ing on Hack Club’s <https://github.com/hackclub/link-tree|link tree> and was brows­ing through other Hack Club web­sites to make sure I got the Hack Club them­ing right. And I was do­ing this while lis­ten­ing to mu­sic, specif­i­cally Enemies - Imagine Dragons, when I no­ticed you could click on the header of <https://workshops.hackclub.com/|Hack Club Workshops> page to cre­ate cool an­i­mated blobs. Being a be­gin­ner osu! player, I de­cided to record it while click­ing to the beats!
  16. Is ex­plic­itly im­port­ing types like shown in the im­age con­sid­ered “normal” while us­ing Typescript?
  17. I wanted to give a mys­te­ri­ous dystopian vibe to The Corgi Mafia, and one com­mon way to sym­bol­ize mys­tery and fear is dis­tor­tion. Duplicated pic­tures of a corgi (generated by DALL-E) with low opac­ity close to each other does the job quite well. I in­ten­tion­ally aban­doned any color schemes to give off a chaotic vibe. The color grad­ing that makes it look orangish was done us­ing the plu­gin <https://colorspectrum.design/|Spectrum>, WHICH IS A PAID PLUGIN (free tri­als ftw) that does some­thing sim­i­lar to what I could do for free by ad­just­ing the sat­u­ra­tion slider. As for the glitchy text, I used <https://www.figma.com/community/plugin/906950256777348534|Morph> which is thank­fully free. Morph can do other ef­fects, like neon text and glassy win­dows. Finally, to blend it all to­gether, I used <https://www.figma.com/community/plugin/752558325552095625/Noise|Noise>!
  18. Almost done with the ba­sic draft of what I’m go­ing to be talk­ing about at The Lightning Talk! My talk is go­ing to about a fairly se­ri­ous topic; how­ever I don’t want it to be bor­ing so next up is to cre­ate re­ally fun slides! Also, Obsidian is re­ally cool, I’m lov­ing the translu­cent glassy back­ground.
  19. Guten Morgan!
  20. BART sta­tions re­mind of the back­rooms.
  21. Made bagels! I would con­sider this achieve­ment sig­nif­i­cant enough to add it to my non-ex­is­tent re­sume!
  22. Alan Walker, KSHMR and Syence at Dubai!
  23. WHO’S EXCITED ABOUT EPOOOOOOOOOOCCCHHHHHHHHHHH???!!!!!
  24. this epoch sticker is get­ting scrapped be­cause @tejasag came up with a way bet­ter idea 👀
  25. Well there goes my at­tempt to build <http://svgco.de|svgco.de> in Figma us­ing it’s un­der­ly­ing tech­nolo­gies but with­out WebAssembly and no Node, Figma plu­g­ins are a bit lim­it­ing. Anyways, time to go back and con­tinue work­ing on :epoch: stick­ers!
  26. 2 weeks to go till Epoch, and here’s the story of this sticker. It all started a few months ago when ge­nius minds from all over the world de­cided to brain­storm ideas for stick­ers they’d like at Epoch. We de­cided we wanted stick­ers with lo­cal Delhi ref­er­ences for ad­vanced hu­mour. And one such idea was to make a sticker that says Horn Ok Please, with Epoch-ish Hack Club el­e­ments in there. For con­text, Horn Ok Please is writ­ten on the back of trucks and lor­ries promi­nently seen in North India (in South India, we just have Sound Horn) to alert dri­vers of ve­hi­cles ap­proach­ing from be­hind to sound their horns if they wish to over­take, in a coun­try like India where honk­ing is the pri­mary source of com­mu­ni­ca­tion be­tween you and the other ve­hi­cles on the road. Part of the idea was also to make it look like Horn Ok Please was writ­ten on the back of a truck. I said, “OK OK LMAOOO WE’RE MAKING A STICKER OUT OF THIS”. Now I’m not ex­actly the most pro­duc­tive and ef­fi­cient per­son out there, I thrive on dead­lines. I would oc­ca­sion­ally just visit the Figma file, do ran­dom stuff and close my tabs while I did not have ex­ams, home­work or both. Normally I’d be able to com­plete stuff while “occasionally” vis­it­ing but this one was a bit hard. There weren’t many ref­er­ence im­ages I could find, other than a photo di­rectly from the Wikipedia page. I some­how also found the same im­age from a frontal an­gle which helped me trace out the let­ters and cre­ate “Horn Ok Please” as an SVG (my Figma Pen Tool skills are un­ri­valled, they talk about my curves). I also needed some ran­dom art re­lated to India, like pea­cocks and the Taj Mahal, so what I did was take pho­tos from <http://unsplash.com|unsplash.com>, re­move their back­ground and run them through <http://svgco.de|svgco.de> (WHICH IS A GOD SENT BTW, credit to @OjasSomethin’ for point­ing this won­der­ful tool out) to give them a painted and vec­tor-y look. I quickly com­bined them to­gether but I re­al­ized it did­n’t have the same back-of-the-truck feel­ing and other peo­ple were quick to point that out. @deven then points out that I should do “Hack Ok Please” (“cos the H matches”) and a few days later, there’s a bet­ter ref­er­ence pic­ture of a Horn Ok Please in #design. In the thread where the im­age was posted, there was a lot of talk about get­ting the text bevels and shad­ows right along with iden­ti­fy­ing a sim­i­lar font, which @sarthak nar­rowed down to a font called Syne, which for­tu­nately was avail­able on Google Fonts and I had it down­loaded in no time. I de­cided to start with the back­ground, and I wanted it to look re­al­is­tic as pos­si­ble. The ques­tion is, how do you make wooden planks in Figma? Sure, I could draw lines, and make it look re­al­is­tic in a vec­tor art sense but I wanted the right colour and tex­ture. Well, what if I just placed a pic­ture of wooden planks? That is ex­actly what I did, and it’s called tex­tures. A visit to <http://textures.com|textures.com> gave me some qual­ity seam­less tex­tures of wooden planks, and to make it pink I added a sep­a­rate colour layer and de­creased the opac­ity of the colour layer (I slightly colour-cor­rected the plank tex­tures for it to be vis­i­ble while still hav­ing the de­sired shade of pink). I also wanted the grooves (or gaps, what­ever you call them) be­tween the planks to af­fect the sur­round­ing el­e­ments as if all the de­signed el­e­ments were ac­tu­ally painted on wooden planks. I did this by man­u­ally draw­ing out groove lines us­ing the good ol’ Pen Tool and giv­ing it a slight drop shadow. The text. “Hack Ok Please!!”. It needed bevels. Neither does Figma have an op­tion for bevels nor could I find a plu­gin that gives bevels to text. Having lost all hope, I wan­dered around on YouTube hop­ing some Indian tech guy could help me out when an un­ex­pected ally rose to the oc­ca­sion: <http://pixlr.com/e|pixlr.com/e>. They could make bevels out of text in­put and ex­port it into PNG - that was more than enough for me. I dragged the ex­port across the browser and into Figma and used a freemium plu­gin called Image Tracer which I thought had al­ready been ex­hausted of its 5 free tri­als but ap­par­ently not. I got an SVG, got box shad­ows us­ing a won­der­ful plu­gin called oblique and added that stuff on top of the wood. Only the dec­o­ra­tions re­mained. I’m not gonna lie, I did­n’t have much cre­ativ­ity in this area. The cor­ners of my ref­er­ence im­age had flo­ral-like colour­ful de­signs and I was­n’t re­ally sure about man­u­ally trac­ing it us­ing the Pen Tool. The flo­ral-like de­sign re­minded me of some­thing I used to do with my mom when I was a kid, where ba­si­cally I’d take an A4-sized pa­per, fold the pa­per in half, put drops of acrylic paint of dif­fer­ent colours on the crease of the pa­per and fold it again to cre­ate some­thing that looked like a but­ter­fly. I thought that if I could do some­thing like that with the right colours, I could take a good pic­ture with my phone, re­move its back­ground, change its colours a bit and use it in my de­sign. After beg­ging my sis­ter to help me (spoiler alert: she did not), I de­cided to steal my sis­ter’s paint (she’s not on Hack Club, so she won’t find out) and per­form the sa­cred method of “squish paint­ing”. Long story short, it did not come out like I ex­pected it to, it was too nar­row and too green for my lik­ing. (I wanted to take a pic­ture of the re­sult I got for the sake of this scrap­book post, but the paint stuck to each other and now I can’t un­fold the pa­per and tear­ing it does­n’t seem like a good idea.) At this point, I de­cided to give up on every­thing else and trust the mighty Pen. By lis­ten­ing to the Doom OST theme song and Cocomelon songs on a loop, I traced out the ba­sic lines of the flo­ral de­signs and just ran­domly coloured them with every main colour I could find. By now, I was too lazy and un­cre­ative to cre­ate my own as­sets, so I just screen­shot­ted the flower thingy at the bot­tom of the ref­er­ence im­age and then mod­i­fied the colours a bit so that it matches the back­ground colour of the sticker. Combine this with some smooth curves and spheres, and we have our dec­o­ra­tions. To make it even more re­al­is­tic, I got some grime and brush stroke tex­tures from <http://textures.com|textures.com>, re­moved their back­grounds, re­duced the high­lights a bit, in­creased the shad­ows a lot, halved the opac­i­ties and added the cor­ners of the sticker. Oh and I al­most for­got, there’s a slight amount of noise at the very top to give it a slightly dirty/​re­al­is­tic feel­ing, us­ing the Noise plu­gin. Adding noise tex­tures to my de­signs is a re­flex ac­tion at this point.
  27. Behind-the-scenes of Epoch’s Figma files cc @fayd
  28.  :lets-fucking-gooo:  :eyes_shaking:
  29. Epoch and dif­fer­ent ver­sions of Orpheus awaits you…
  30. Epoch is live!
  31. epoch was fun, vlogs to fol­low on the scrap­book soon!
  32. 28-12-2022 Epoch, Day -2 [I highly rec­om­mend watch­ing till the very end of the video, like un­til the player stops :text-winking-face:] <https://drive.google.com/file/d/1v55KGO_Eh_Ogr3N8ijnjzJbCRG4pT_gr/view?usp=sharing> <https://www.instagram.com/p/CmuZs9aM7nC/>
  33. 29-12-2022 Epoch, Day -1 <https://drive.google.com/file/d/1AhlDpmdV4vlCr6WdNx_A-wBOtv1mkK0C/view?usp=share_link> <https://www.instagram.com/p/Cmx59SsNkDt/>
  34. 30-12-2022 Epoch, Day 0 <https://drive.google.com/file/d/1BNlccay3ivxv_TZZ-DVwIWGUwChS4JEL/view?usp=sharing> <https://www.instagram.com/p/Cm1ionrPlab/> [this was the most com­pli­cated video i’ve ever had to ex­port (DaVinci Resolve is­sues) and also the least ex­cit­ing vlog in the se­ries - but best be­lieve the next two vlogs are gonna be awe­some!]
  35. 31-12-2022 Epoch, Day 1 <https://drive.google.com/file/d/16PfPLlDhymBiVx9nBGoZQVd3zPl4rSRR/view?usp=sharing> <https://www.instagram.com/p/Cm3nglUsQke/>
  36. 01-01-2023 Epoch, Day 2. The end. Hon­estly this was a fan­tas­tic ex­pe­ri­ence, from vlog­ging the whole thing to meet­ing new peo­ple. Here’s to more awe­some hackathons in the fu­ture! Also, there was a lot of clips and mo­ments I wanted to in­clude in this video but could­n’t be­cause of Instagram’s video lim­its, so keep an eye out on the <https://www.instagram.com/explore/tags/epoch/|#epoch> chan­nel for the ex­tended ver­sion in the com­ing few days. <https://​drive.google.com/​file/​d/​1drken8vR­p­cEn­fO­fU­jR­Jx­TjoB9qpqfsVz/​view?usp=shar­ing> <https://​www.in­sta­gram.com/​p/​Cm9XD­j8JuKN/?​theme=dark>
  37. gath­er­ing in­spi­ra­tion for de­sign­ing cool new stuff :eyes_shaking:, re­mak­ing my web­site yet again, run­ning a new vanilla minecraft server (it’s that time of the year again!) and _[not in pic­ture]_ study­ing for a small cs test to­mor­row in­volv­ing logic gates and al­ge­bra (? idk how that got into cs, we were do­ing just fine deal­ing with it lit­er­ally every­where else). can’t wait for the week­end!
  38. This took a solid few days, first time deal­ing with p5.js and frac­tals and all that. Basically, the frac­tals (specifically the Koch snowflakes) vibe with the mu­sic. And it’s su­per trippy.
  39. We won the first prize with this for the Math in CS cat­e­gory! We had a few other frac­tal-based pro­grams as well but this one’s my fa­vorite! (There’s a slight au­dio de­lay in the record­ing)
  40. Over the week­end, I rewrote my xkcd API in Go! <https://github.com/khalby786/getxkcd|https://github.com/khalby786/getxkcd> <https://blog.khaleelgibran.com/posts/go-serverless-vercel/|https://blog.khaleelgibran.com/posts/go-serverless-vercel/>

See all tags.