@juliet7+First order of business: I bombed the SAT today. That was a mess.
Other than that, I came up for this idea of a little text editor in your browser about half an hour ago. Kinda like a lightweight google docs. I call it Kleaflet. I just started working on this very recently, so it's a very rough draft. I don't know, it will probably end up being one of the projects I abandon. Who knows? Just something I started whipping up with react and figma in a few minutes. It looks very ugly right now. Don't pay too much attention to the details. Or how the menu bar at the top hides when you scroll the document.
@juliet7+I did a bit today, and I originally wrote this all up, but I accidently posted it in confessions, then proceeded to delete my long write-up. Whoops. That was bad.
Starting with my science fair project, I've begun work on generation 2.5 hardware. Why 2.5, you may ask? Well, I designed generation 2 hardware, and it was never produced, and ended up being too big. So, I've began shrinking it, and creating a new PCB.
This one uses a faster esp32 module, which should simplify things for me, and more crucially, also contains a USB interface. This should simplify the design some, and although the module is larger, it removes the need for an pesky usb-to-serial converter to solder. I've moved to an vertical mount USB-C connector, which should simply mounting of the board in the case and allow me to increase the board size by several millimeters, all while simplifying the charging process.
Speaking of soldering, I've been forced to use smaller components for this revision of the board. I'm moving to 603 resistors (scary, those things are so easy to bump), though to be fair, I solder much smaller chips, and will be soldering much smaller chips anyways for this project. There's a lot of sacrifices that I am making to try to fit this as small as possible, but engineering is a game of calculated sacrifices, not everyone has the unlimited resources or budget for your project (most of the time).
I haven't worked on my power app for managing my servers, but I should tomorrow. It's moved along nicely, and I look forward to adding authentication soon. Auth is a bit complicated, and I wish there was an easy way... I did however work on a different personal project, whipped up some figma designs, and hit an API rate limit. It should have reset at this point (1,000/24hr, resets at 7EST), so I think I will work on that and integrating it with StatsD to get me analytics and errors from part of the backend app for collecting data for the project. I like mongo and FastAPI with python, so I'm honestly just looking for a way to tie integration to that. The whole authentication and keeping it secure part is where it gets difficult. And JavaScript web tokens and all that stuff.
I'm debating building the front end in react, I like the convivence, but it's probably unnecessary. Maybe I can shrink it down or something, it's a project designed to be integrated into other pages though. I'll figure it out, it's not too big. Not like my react is that good, I've just started learning it a few weeks ago, and I don't know too much yet.
I've begun to narrow down my search for a laptop, I'm looking at Lenovo Thinkpad T15's or P15's (or a variant), or a member of the Dell Precision 7xxx family. They are all awfully expensive though, which is unfortunate. There's not many computers that fit my needs (nvme, 15in, not a gaming laptop, not look too ugly, numpad, backlit white keyboard, ethernet port, lots of other ports, decent back or side-output thermals, user repairable, well preforming i7/Ryzen 7 or higher.
Tomorrow is a half day, and I plan to work on my power app and my science fair then. Friday I am fortunate enough to get off, so I might build a sprig game then... I have a few ideas, but none are set in stone yet. I'll see how it goes. I should check how many consoles are left, to be honest.
I'm a bit angry it appears autodesk stripped eagle from the education pack. I liked eagle, but I should probably learn kicad. Eagle, Fusion, and Autodesk are honestly the only reason I still dual-boot into windows on my laptop... speaking of that, I need to customize my grub screen.
I restrung my guitar today as well, I should have done that a while ago (It's been a bit!). For bonus points, I did a partial water change in my fish tank and watered my plants as well. My phone decided to die again, so that's a lot of fun. It just randomly turns off sometimes, and doesn't turn back on for days. I sent it to google; they said there wasn't an issue, but there clearly is. Oh well.
I'm facing a productivity and time crisis right now; I have so much projects and things I should be doing, and my grades suck and I really need to study for the SAT. There's so much to do, but I can't seem to do much. I don't know. I'm always lost.
Congratulations, you made it all the way through this message! I probably forgot something, but that's probably enough for now. Let's see how many emoji's that scrappy throws up. Probably enough to fill a cargo container. I'm sorry it's this long, this message just doesn't end (It's still not over..)
Ohh, I have a secret ship coming hopefully along in the next few weeks! It's top secret! You will need to have to wait to see what it is!
@khalby78622 weeks to go till Epoch, and here's the story of this sticker.
It all started a few months ago when genius minds from all over the world decided to brainstorm ideas for stickers they'd like at Epoch. We decided we wanted stickers with local Delhi references for advanced humour. And one such idea was to make a sticker that says Horn Ok Please, with Epoch-ish Hack Club elements in there. For context, Horn Ok Please is written on the back of trucks and lorries prominently seen in North India (in South India, we just have Sound Horn) to alert drivers of vehicles approaching from behind to sound their horns if they wish to overtake, in a country like India where honking is the primary source of communication between you and the other vehicles on the road. Part of the idea was also to make it look like Horn Ok Please was written on the back of a truck. I said, "OK OK LMAOOO WE'RE MAKING A STICKER OUT OF THIS".
Now I'm not exactly the most productive and efficient person out there, I thrive on deadlines. I would occasionally just visit the Figma file, do random stuff and close my tabs while I did not have exams, homework or both. Normally I'd be able to complete stuff while "occasionally" visiting but this one was a bit hard. There weren't many reference images I could find, other than a photo directly from the Wikipedia page. I somehow also found the same image from a frontal angle which helped me trace out the letters and create "Horn Ok Please" as an SVG (my Figma Pen Tool skills are unrivalled, they talk about my curves). I also needed some random art related to India, like peacocks and the Taj Mahal, so what I did was take photos from unsplash.com, remove their background and run them through svgco.de (WHICH IS A GOD SENT BTW, credit to @OjasSomethin' for pointing this wonderful tool out) to give them a painted and vector-y look. I quickly combined them together but I realized it didn't have the same back-of-the-truck feeling and other people 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 better reference picture of a Horn Ok Please in #design.
In the thread where the image was posted, there was a lot of talk about getting the text bevels and shadows right along with identifying a similar font, which @sarthak narrowed down to a font called Syne, which fortunately was available on Google Fonts and I had it downloaded in no time. I decided to start with the background, and I wanted it to look realistic as possible. The question is, how do you make wooden planks in Figma? Sure, I could draw lines, and make it look realistic in a vector art sense but I wanted the right colour and texture. Well, what if I just placed a picture of wooden planks? That is exactly what I did, and it's called textures. A visit to textures.com gave me some quality seamless textures of wooden planks, and to make it pink I added a separate colour layer and decreased the opacity of the colour layer (I slightly colour-corrected the plank textures for it to be visible while still having the desired shade of pink). I also wanted the grooves (or gaps, whatever you call them) between the planks to affect the surrounding elements as if all the designed elements were actually painted on wooden planks. I did this by manually drawing out groove lines using the good ol' Pen Tool and giving it a slight drop shadow.
The text. "Hack Ok Please!!". It needed bevels. Neither does Figma have an option for bevels nor could I find a plugin that gives bevels to text. Having lost all hope, I wandered around on YouTube hoping some Indian tech guy could help me out when an unexpected ally rose to the occasion: pixlr.com/e. They could make bevels out of text input and export it into PNG - that was more than enough for me. I dragged the export across the browser and into Figma and used a freemium plugin called Image Tracer which I thought had already been exhausted of its 5 free trials but apparently not. I got an SVG, got box shadows using a wonderful plugin called oblique and added that stuff on top of the wood.
Only the decorations remained. I'm not gonna lie, I didn't have much creativity in this area. The corners of my reference image had floral-like colourful designs and I wasn't really sure about manually tracing it using the Pen Tool. The floral-like design reminded me of something I used to do with my mom when I was a kid, where basically I'd take an A4-sized paper, fold the paper in half, put drops of acrylic paint of different colours on the crease of the paper and fold it again to create something that looked like a butterfly. I thought that if I could do something like that with the right colours, I could take a good picture with my phone, remove its background, change its colours a bit and use it in my design. After begging my sister to help me (spoiler alert: she did not), I decided to steal my sister's paint (she's not on Hack Club, so she won't find out) and perform the sacred method of "squish painting". Long story short, it did not come out like I expected it to, it was too narrow and too green for my liking. (I wanted to take a picture of the result I got for the sake of this scrapbook post, but the paint stuck to each other and now I can't unfold the paper and tearing it doesn't seem like a good idea.) At this point, I decided to give up on everything else and trust the mighty Pen. By listening to the Doom OST theme song and Cocomelon songs on a loop, I traced out the basic lines of the floral designs and just randomly coloured them with every main colour I could find.
By now, I was too lazy and uncreative to create my own assets, so I just screenshotted the flower thingy at the bottom of the reference image and then modified the colours a bit so that it matches the background colour of the sticker. Combine this with some smooth curves and spheres, and we have our decorations. To make it even more realistic, I got some grime and brush stroke textures from textures.com, removed their backgrounds, reduced the highlights a bit, increased the shadows a lot, halved the opacities and added the corners of the sticker.
Oh and I almost forgot, there's a slight amount of noise at the very top to give it a slightly dirty/realistic feeling, using the Noise plugin. Adding noise textures to my designs is a reflex action at this point.
@khalby7862Well there goes my attempt to build svgco.de in Figma using it's underlying technologies but without WebAssembly and no Node, Figma plugins are a bit limiting. Anyways, time to go back and continue working on :epoch: stickers!
@toby0hey everyone!! here's my update for day 10 of #10-days-in-public! today, i implemented the mockup i made in figma yesterday! later on, i'm going to try and make the emoji reactions interactive (maybe some confetti!) :D
@toby0here's my update for day 9 of #10-days-in-public!! today, i decided that grooovy's landing page needing a bit of a redo, so i decided to make a quick mockup in figma!
@adelly130day 1/10 of #10-days-in-public!
working on building my personal website using next.js and tailwind css! today, i set up the repo and put in a rough sketch of the homepage that i had designed on figma a few weeks prior! first time using next.js and tailwind css in combination, so still getting used to everything 😄
@reesericci2I re-made the style guide for my group's magazine in Figma
@adelly130started actually coding my website with next.js and tailwind css after designing it in figma!
@adelly130working on a rough design of my personal website in figma!
@KanishqKancharla-U041MC28L3B0taught myself figma animations hehe@reesericci2Day 9/10 for #zachtoberfest! I worked on the mobile-version of the digital ticket today!! (that's just the figma)
@Lucas7+Day 7 of #10-days-in-public
For #10 days in public, I'm rebuilding my study group website. Today I didn't do much, it's a holiday in Brazil, I just researched a little more about Figma and added icons in the Brand Guide
@Andrew1day 7 of #10-days-in-public i didnt get much done today sadly, i had a headache and had school work to catch up on. I did make more progress on the figma mockup for the dashboard. Lastly, I setup storybook.js.org for the dashboard app and thats pretty much it! Tomorrow I plan to tackle way more 🙂.
@Lucas7+Day 6 of #10-days-in-public
For #10-days-in-public, I'm rebuilding my study group website. Today I explored Figma (first time messing with Figma) and I'm trying to understand how to add Figma to websites
@AyushPaul-U02GHNT70TB06/#10-days-in-public: uhh busy with school work again… didnt manage to get much done but i did practice some figma skills and designed a cool shirt for my american studies class (it was a homework assignment for some reason). psat coming up so ill be able to return to coding on wed.
@Andrew1Day 5 of #10-days-in-public I modified our current landing page to fit our color scheme which is pretty basic for now, I’m going to turn the figma mock-up into a real site so i can be deploy it tonight. I’m going to use nextjs and cf pages :)
Also I’d love to get feedback on the landing page or what can be improved, I’m not good at figma so id appreciate it 🤞.
other than this I didn’t do that much work on my project, although tomorrow I plan to get a lot done.
@toby0hey, everyone! here’s my update for day 3 of #10-days-in-public! today, and for the rest of the weekend, i’m in wales, so i won’t get much coding done- however, here’s a very quick mock-up i made for what tilde’s website may look like using figma! (also, here’s a bonus picture of the original concept i made using my ipad on a bumpy road!)
@maggie4Day 2 of #10-days-in-public! Implemented my Figma design from yesterday, but there’s more space so it looks a bit weird. I’ll probably add more content to fill up the empty space and also make it responsive…
@maggie4Day 1 of #10-days-in-public! I’m working on rebuilding my club’s website in :astro: Astro. Today, I made a quick :figma: Figma design (suggestions welcome!)
@sheryl0finally learning how to go from figma to a website. BUTT new fav vscode theme?? 👀 "Winter is coming dark blue no italics" theme is hot af
@Aadit0using figma to design a website is hard but prolly worth it
@reesericci2i just found out a little figma trick - you can copy and paste svg from inspect into figma!@sampoder5Assembling Assemble (:scrappy:-edition) #5: the whole team has made to figma! I'm lost for words, I'm so excited for tomorrow, this'll be amazing! ❤️
we spent the day doing a ton of venue setup and last minute fixes :D
@khalby7862I wanted to give a mysterious dystopian vibe to The Corgi Mafia, and one common way to symbolize mystery and fear is distortion. Duplicated pictures of a corgi (generated by DALL-E) with low opacity close to each other does the job quite well. I intentionally abandoned any color schemes to give off a chaotic vibe. The color grading that makes it look orangish was done using the plugin Spectrum, WHICH IS A PAID PLUGIN (free trials ftw) that does something similar to what I could do for free by adjusting the saturation slider. As for the glitchy text, I used Morph which is thankfully free. Morph can do other effects, like neon text and glassy windows. Finally, to blend it all together, I used Noise!
@khalby78620001 - 11/04/2022
vectors and donuts ft. figma
@belle1hey fwens :wave-pikachu:
hope your day is going amazing! today i did math past papers and had a really exciting meeting for a project that i'm working on :)) also, i figured out some adulting stuff like rent and making meals and stuff :flushded:.
(attached is the design i created for the ama w/ feross – i'm so excited for the event!!)
@abby0For my CS class at school I led a group in using Processing to build an animated GIF. We were inspired by the popular game Wordle to make a GIF of people attempting to solve a wordle. Our animated GIF shows different ways to get to a word. We designed the boards in Figma. Here is the repo: github.com/abbyfischler/swordle and I’m attaching a demo!
@karolina0thank you to everyone who provided suggestions on the figma plan!!
it had been a few months since i had sat down with a new web dev project and i forgot how much i love love love building websites. nothing like having a design vision come to life as an interactive media.
still very rough draft - not mobile-compatible yet and layout and alignment isn't perfect, but i love where this is headed.
@la0made a poster for my club using figma :) ( i did most of this at midnight last night lmao )
@taylorleehackclub0Our family loves playing games as a way to bond and have fun, so I created Cards Against Humanity our family pack for Christmas : ) Released the unofficial CAH template on Figma
@j_cordz1Today I continued working on the Hack Club workshops translation and learned more about design while using Figma again for a club's friend Birthday! In other things, sadly my freeCodeCamp streak got reset, but the important thing is that I'm learning a lot of new things! Tomorrow I'll have more updates on my projects I'm working on!
@taylorleehackclub0Schema 2021: Building custom Figma plugins 🔨 And sneak peek into a FigJam widget I am currently working on WIP
@jonah0woo hoo! learning that you can set frames as custom covers for Figma files, I went about designing one for every single project I had. It took a while but was a good excuse to listen to frank sinatra’s entire discography.
@jonah0Attended the third session of UC Berkley’s Figma Decal today. No active designing but learning new things about components and grid guidelines!
@taylorleehackclub0Hi there! :parachute: Long time no see Hack Club. A few life updates… I voted for the first time a few weeks ago, been teaching kids how to code, playing around w/ how to create Figma widgets/plugins and did something kinda wild today… I jumped out of an airplane with my mom! It was a surreal, exciting experience and reminds me how small we are in this vast universe and to continue to do something outside of my comfort zone. I am super grateful and would love to do something like this again!
@jonah0very rough figma mockup I made while giving someone feedback on product. was v happy with myself as I did this in less than 10 minutes.
@jonah0figma practice day 2: replicating a window and website from macOS. Top is original, bottom is my copy.
@jonah0Pen tool practice day 1. Bottom is mine, took me like 20 minutes :’)
@bhumikag2340this is my first post here, but anyways i designed these two screens for a group project thing. design is so mf thrilling i love this with my entire life. figma is so cool too tbh
@nvd0Tried making the basic shape from vecatry then transferring it to figma
@nvd0Made this design in figma but stuck to a bit of basics though #designing #Day6
