UpLeveled

📣 Join the 17th UpLeveled graduation event on Apr 8 and see our graduates present their full-stack projects - built with tech incl. React, Next.js, PostgreSQL, React Native (Expo), etc 🔥

www.eventbrite.at/e/17th-uplev...

Amsterdam: Learning to code as a woman, non-binary, LGBTQ+ member, or a part of another underrepresented minority group?

Join us in a safe environment at @bluehire.nl

👉 Feb 12 (18:30 - 20:30)

Hope to see you there!

A screenshot of the latest cohort of graduates on UpLeveled Fusion

The latest cohort of graduates just wrapped up their final projects, ready to take on new challenges 🚀

Check out their profiles / projects and reach out!

fusion.upleveled.io/login

React v19 – React The library for web and native user interfaces

React v19 is now stable!

react.dev/blog/2024/12...

A screenshot of a slide titled "Visualizing JSON with JSONtr.ee" on a black background. Below the title, the slide features a JSON visualization tool called "JSONtr.ee." On the left, raw JSON data is displayed in a code editor-style format, showing details about a superhero squad, including squad name, members, and their attributes like name, age, secret identity, and powers. On the right, the JSON structure is visualized as a connected graph, with boxes representing different JSON objects and arrays, connected by lines indicating relationships. The interface includes a "Copy JSON" button and icons for language, filters, and a GitHub link.

Just added a new slide to our JSON slide deck for students, to show data visualization with JSONtr.ee by @loualcala.com (thanks for this tool Lou!) 🎉

Node v22 just unflagged require(esm) support 🎉

It was previously only available with "--experimental-require-module" option

Seems like this will now be supported by default in next release v22.12 ?

https://github.com/nodejs/node/pull/55217

Aria snapshots New assertion `expect(locator).toMatchAriaSnapshot()` verifies page structure by comparing to an expected accessibility tree, represented as YAML. ```ts await page.goto('https://playwright.dev'); await expect(page.locator('body')).toMatchAriaSnapshot(` - banner: - heading /Playwright enables reliable/ [level=1] - link "Get started" - link "Star microsoft/playwright on GitHub" - main: - img "Browsers (Chromium, Firefox, WebKit)" - heading "Any browser • Any platform • One API" `); ``` You can generate this assertion with Test Generator and update the expected snapshot with `--update-snapshots` command line flag. Learn more in the aria snapshots guide.

Playwright 1.49's new `.toMatchAriaSnapshot()` 😍

Nice and compact YAML syntax to test multiple elements in an accessibility tree 🎉

Thanks Pavel Feldman, @max.sh , @skn0tt.bsky.social , Dmitry Gozman and everyone else involved!

playwright.dev/docs/release...

@eslint/css CSS linting plugin for ESLint. Latest version: 0.1.0, last published: 5 minutes ago. Start using @eslint/css in your project by running `npm i @eslint/css`. There are no other projects in the npm regi...

📣 Start linting CSS with ESLint using the brand new eslint/css package!

This is a very early edition so feedback is welcome. 🐣

www.npmjs.com/package/@esl...

Great PR adding Expo Router API Routes with Postgres.js by @prochalu.bsky.social 🔥

Single project for iOS, Android, web with API connecting to PostgreSQL database

Check out the implementation in this PR

cc @porsager.com

github.com/upleveled/ex...

Should masonry be part of CSS grid? An exploration of examples showing masonry as both a part of CSS Grid and as its own display type.

This article about Masonry in CSS by Ahmad Shadeed is fantastic. He created several examples, going through the code needed to create layout variations at breakpoints while still supporting older browsers. What would it be like to use each in the real world? ishadeed.com/article/css-...

I feel like half of programming is remembering how weird stuff works and the other half is setting things up so that you do not have to remember the weird stuff

We've added a Starter Pack for our community just to help all the new 🦋 accounts find the influential React Native handles. We're definitely missing a lot of important people but it's a start: go.bsky.app/LYxHHxu

Full Stack Web Development Program - UpLeveled Learn to code with our full stack web development education program. Transition to a new job in tech or boost your career with our immersive or flexible course formats. Join us remotely or in-person i...

Applications are open for our Jan 2025 Full Stack Web Development program 🚀 (HTML, CSS, JS/TS, React, Node.js, Next.js, PostgreSQL, more...)

In person in Vienna / Amsterdam or remote

Immersive group environment ⬩ Build portfolio projects ⬩ Career support

upleveled.io/full-stack-w...

I was talking about “use dom”. It’s really good. docs.expo.dev/guides/dom-c...

Another Thursday, another Learn Deno video 🤯
🐢 Using Node.js built-ins
🐢 Importing npm
🐢 Running Node.js with Deno

Watch the entire 2min tutorial:
www.youtube.com/watch?v=QPLc...

a code block: React.useEffect(() => { if (!isActive) { return } textInputWebEmitter.addListener('emoji-inserted', onEmojiInserted) return () => { textInputWebEmitter.removeListener('emoji-inserted', onEmojiInserted) } }, [onEmojiInserted, isActive]) the if (!isActive) condition is highlighted as newly added code

did you know that you can conditionally exit an effect?

this is useful if you want a subscription to only stay active while some condition is true, and to stay removed while that condition is false.

a bit mindbending, but so it is with react!

there’s no such thing as “global state”

Expo SDK 52 beta is now available - Expo Changelog Learn about the changes, how to try it out, and how to give feedback.

SDK 52 beta is now available!

Try upgrading your app and let us know if you run into any issues!

⏳The beta period will last about two weeks.

expo.dev/changelog/20...

🦋