@BetsyZhang3finally started to use node.js and vsc to code my hackathon website with next.js framework 😄
@sampoder0just finished building <https://personal-project.co|personal-project.co> with Next.js, Theme UI & MDX for school! really liking how snappy it feels on mobile :)
source @ github.com/sampoder/personal-project-showcase
@lachlanjc0Playing with 3D animated text with React/Three.js & making generative clouds with SVG + CSS this weekend
@Jeffrey0For the last couple of weeks, I have been working on p5commander when I had a bit of free time. Now it is finally fully useable! p5commander is a command-line tool to manage and display your p5.js sketches easily. I used Deno :deno: so I could use typescript and more up-to-date javascript features that Node still doesn't include by default. All you need to do is clone the repo and install it using the command in the README to get started!
If you find any bugs or have any suggestions, please let me know. p5commander is my first actual public/open source project that I got to a working state, so I probably made some mistakes.
<https://github.com/SquarePear/p5commander>
@christina6950This morning I tried to build a to-do list in JavaScript …. Top of my list of things to do was to go skiing. I DID go skiing (w @matthew!) but I didn’t totally figure out how to code a to do list
@sampoder0today i presented.. the *CLIMATATOR*! it’s a 4D interactive media experience / climate change simulator that showcases the effects of climate change to a younger audience. you enter the cabinet, put an AR headset on, watch a fictional weather report from 2050, then you begin to feel the heat of a heatwave 🔥 (there’s a strong heater inside), then you going on a bumpy ride (haptic motors) in a fire truck fighting wildfires :firefighter: (it’s still boiling from the heater and it intentionally smells of burning) and to end of your experience a cyclone with winds (a big fan) and shaking (haptic motors) 🌀 + it’s got sound effects and a nice video (this is my myp personal project, goal was to create an engaging way of learning about climate change)
the wooden structure was put together with a lot of drilling and with the use of recycled materials to the extent possible. i learnt a lot about woodworking as this was my first ever real woodworking project.
*this is biggest project ever, it’s taken me since August to build this all out…..* and i’m really proud of the final product. uses a mix of Raspberry Pi Python, Arduino, Next.js & Node.js to all work. the AR headset is powered by Holocron (www.npmjs.com/package/@sampoder/holocron)
more is at: climatator.co/de:partyparrot:
@matthew0After lots of struggling, Scrappy is finally off of Next.js and is now its own Express app. The code looks mostly the same, but now hopefully it'll stop crashing.
I tested this as much as I could before merging into the real scrappy, but admittedly I didn't test every feature (only a few basic ones, like posting and some commands). So if you run into any issues with scrappy, please let me know so that I can look into it 🙌 :scrappy::scrappyparrot:
@christina6950building a javascript project of my own (not from a tutorial…)
@BenjaminSmith0Added my website to the webring! I wrote a react component with Next.js server side data fetching instead of using the premade JS so there is no JS needed to run the component on the browser
@christina6950trying to figure out .addEventListener by building this to-do list in javascript, and also creating branches in github each time. . . . just cause I can!
@riley33chou0today i tried to understand recursion and stuff
@matthewgleich1Thank you so much Hugo for the stickers! (NASA and Next.js)
@petecao0Made my website, still need to get a favicon tho :D (petecao.github.io) (tbf i had some help with a template)
@aaryan0Built an image classifier using ml5.js! Now I can either improve this website or learn how to build the same thing from scratch using tf.js, hopefully both?
@christina6950building another website with the confetti generator library/ easter egg because it's just fun to make my first JavaScript project, and see it actually work
@alialiwa20050Did a grammar check on my Hack Club's website, was able to refine the text grammatically (found a few typos, too). Installed DeepSource, which is awesomely included in the :github::backpack:!
With DeepSource, I've optimized code & reformatted JavaScript with prettier using Airbnb's awesome style guide. Added some GitHub badges onto the README.md file of the repository.
Gaynor McCown Hack Club's website (version 1.1.5) is live.
@riley33chou0added some js animations and transitions to personal website
@ella3tried to vanta.js but it didn't work. i'll probably try again another day
@christina6950Playing around w workshops-- I tried to add an easter egg from @fayd's konami workshop to the spinning wheel website i built w @dwivedihari987's workshop..... it's not working... something is stuck w adding the confetti generator. ... but the fact that I'm even as far along to be adding libraries in js is cool to me!
@lachlanjc0I published Next Theme Starter, a batteries-included Next.js + Theme UI + MDX starter for new sites (a successor to hackclub/theme-starter, but for non-Hack Club sites) github.com/lachlanjc/next-theme-starter
@riley33chou0used vanta.js on my personal website revamp!
@safin.singh0I've been struggling to put together large-ish completed projects lately so I decided to just go all out and see how much I can get done in a day-ish. I just finished up ankylos (github.com/safinsingh/ankylos) a modular bootstrapper thing for node projects. Here's what it does:
1. Grab a preset to clone from. This will be copied to whatever destination you specify via a tarball from NPM
2. run ankylos bootstrap to read from the ankylos.config.js in the preset. this tells ankylos what plugins to install and configure. for example, the next preset automatically installs and configures the 'editorconfig', 'eslint', 'github', 'husky', 'markdownlint', 'pnpm', 'prettier', 'renovate', and 'vscode' plugins. it'll also send instructions for build scripts to set, dependencies, etc. ankylos will take care of the explicit dependencies in the preset first. then, it'll install your plugins (ive made like 10 of them for convenience) and install your plugin's dependencies (these are stages 1 & 2 of the bootstrap phase)
3. ankylos prompt you for project metadata and will insert your custom build scripts along with this metadata into a fully-filled out and templated package.json file. finally, ankylos will walk through each of your plugins and apply/copy the files specifies in ankylos.config.js
4. from there, pnpm install will bump you in to your new, modular, automatically-bootstrapped, linted, formatted, <insert a bunch more buzzwords> project!
i only had enough time to create a next and node preset so be sure to check those out. anyway, i'm glad i was able to follow through with this and i hope y'all like it! p.s: you can check out all 16, yes, 16 projects from the ankylos monorepo on its dedicated npm org: www.npmjs.com/org/ankylos. anyway, i'll try my best to maintain this (it's in my best interest too so thats good) if anyone else decides to use it
