--- title: Best DEV posts — September 2022 | daily.dev description: The most upvoted DEV posts from September 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/devto/best-of/2022/09 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/devto/best-of/2022/09 og:type: website og:site_name: daily.dev og:title: Best DEV posts — September 2022 | daily.dev og:description: The most upvoted DEV posts from September 2022, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of DEV — September 2022 1. 1 [](https://daily.dev/posts/system-design-netflix-1hqhewixr "System Design: Netflix") Article DEV · 4y System Design: Netflix Netflix is a subscription-based streaming service that allows its members to watch TV shows and movies on an internet-connected device. The system should meet the following requirements: Users should be able to stream and share videos. This API will allow our users to post a comment on a video (like YouTube) The tweet service will handle video streaming-related functionality. It will be discussed in detail separately. 345 14 2. 2 [](https://daily.dev/posts/git-cheatsheet-pz-20josy "Git Cheatsheet") Article DEV · 4y Git Cheatsheet The command is particularly useful in combination with git add when you only want to commit certain files. If you have changes in your current branch, you will need to either stash them or undo. A rebase will look at each commit on your branch and update the code to make it seem like you've been working off the new base all along. It doesn't know which version of the code. 328 10 3. 3 [](https://daily.dev/posts/notesnook-is-now-open-source--ubajsk-lu "Notesnook is now open source!") Article DEV · 4y Notesnook is now open source! Notesnook is a free (as in speech) & open source note taking app focused on user privacy & ease of use. It features 100% end-to-end encrypted sync (free & unlimited for all) encrypted attachments (unlimited storage for as low as $0.99/mo) and encrypted publishing of notes. Creating free alternatives to data "stealing" 154 5 4. 4 [](https://daily.dev/posts/detect-when-users-switch-tabs-using-javascript-hvz-lgfid "Detect When Users Switch Tabs using JavaScript") Article DEV · 4y Detect When Users Switch Tabs using JavaScript This article will show you how to find out when users switch tabs in browsers using JavaScript. It's going to be fun, it's helpful to see how often the user loses his attention. You can even use it to add the data to the database. 135 11 5. 5 [](https://daily.dev/posts/database-guis-in-javascript-ho-pky1po "Database GUIs in JavaScript") Article DEV · 4y Database GUIs in JavaScript Traditional tools are often written in Java, C++ or Delphi and they use good old JDBC, ODBC or ADO.NET drivers for accessing database. Almost all tools are open-source. If you know about other tool not listed in this article, you could write about it in comments below. For SQLlite I actually use Firefox. 80 2 6. 6 [](https://daily.dev/posts/me-react-5-years-in-15-minutes-ddwtcyw9n "Me & React: 5 years in 15 minutes") Article DEV · 4y Me & React: 5 years in 15 minutes React has finally started making sense to me. It was almost the same as my old pal HTML, except JSX allowed splitting HTML pages into tiny dynamic building blocks. A stateful component had a state which was triggering a re-render on change, while the stateless had only the render part and were rendering the same thing. It made debugging quite mind bending, as sometimes console.log has been printed a microsecond before the state was actually propagated. Redux has treated me a bit better. 75 1 7. 7 [](https://daily.dev/posts/how-to-make-an-advanced-pointer-animation-ts-react-and-framer-motion--29zjh8nkc "How to make an advanced pointer animation (TS React and Framer Motion)") Article DEV · 4y How to make an advanced pointer animation (TS React and Framer Motion) The grid is a constant at the top of the file so we can easily adjust it. We use CSS grid to determine the number of columns based on a prop from the main Grid component. Let's remove some boilerplate and render the Grid component inside of App.tsx: import Grid from 'components/Grid'; function App(). We should now have a grid that responds to the user's browser width. 58 6 [See all DEV archives](/sources/devto/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/devto/best-of/2022/09#page","url":"https://daily.dev/sources/devto/best-of/2022/09","name":"Best DEV Posts — September 2022","description":"The most upvoted DEV posts from September 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/devto/best-of/2022/09#items","numberOfItems":7,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/system-design-netflix-1hqhewixr","name":"System Design: Netflix"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/git-cheatsheet-pz-20josy","name":"Git Cheatsheet"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/notesnook-is-now-open-source--ubajsk-lu","name":"Notesnook is now open source!"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/detect-when-users-switch-tabs-using-javascript-hvz-lgfid","name":"Detect When Users Switch Tabs using JavaScript"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/database-guis-in-javascript-ho-pky1po","name":"Database GUIs in JavaScript"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/me-react-5-years-in-15-minutes-ddwtcyw9n","name":"Me & React: 5 years in 15 minutes"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/how-to-make-an-advanced-pointer-animation-ts-react-and-framer-motion--29zjh8nkc","name":"How to make an advanced pointer animation (TS React and Framer Motion)"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/devto/best-of"},{"@type":"ListItem","position":5,"name":"September 2022"}]}]} ```