Top 23 JavaScript HacktoberFest Projects
-
material-ui
MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import theme from '../styles/theme'; import createEmotionCache from '../lib/createEmotionCache'; export default class MyDocument extends Document { render() { return ( {/* PWA primary color */} ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const { renderPage: originalRenderPage } = ctx; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); ctx.renderPage = () => originalRenderPage({ // eslint-disable-next-line react/display-name enhanceApp: (App: any) => (props) => , }); const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };
Enter fullscreen mode Exit fullscreen modestep 7
we also need to wrap material UI with the app component, let copy the following lines of code to _app.ts file inside the page folder.
import * as React from 'react'; import Head from 'next/head'; import { AppProps } from 'next/app'; import { ThemeProvider } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import { CacheProvider, EmotionCache } from '@emotion/react'; import theme from '../styles/theme'; import createEmotionCache from '../../src/lib/createEmotionCache'; // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache(); interface MyAppProps extends AppProps { emotionCache?: EmotionCache; } const App = (props: MyAppProps) => { const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; return ( My page {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} ); }; export default App;Enter fullscreen mode Exit fullscreen mode -
Project mention: Interactive websites with graphs that get updated when filters are triggered. | reddit.com/r/learnjavascript | 2022-01-18
Have a look at Chart.js and specifically the git repo in terms of how to use data and interact with the canvas API.
-
Scout APM
Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
-
Project mention: Memory leaks: the forgotten side of web performance | reddit.com/r/programming | 2022-01-05
Because a closure retains a reference to originalThing, the existence of the replacement thing's closure means that the originalThing reference remains alive - and so every new thing adds to the chain of references, and no previous things can be collected. This is a contrived example, but it's based off of an actual Meteor bug.
-
I found most people were happy to recommend other headless CMS services like Strapi, Sanity, GraphCMS, etc which did seem to do the job I wanted of providing a platform for me to curate & manage my content without having to redeploy. But most of them had the same issues that I didn't like.
-
three educational courses- Web Dev, ML, and IoT for beginners. Note re using educational resources as a strategy for marketing , at least the ML course links to various Azure services. Google does this a bunch as well, with Collab notebooks often being used to demo educational materials.
-
Ok, so you have many options for that. 1. Contentful 2. Sanity 3. Hugo 4. Strapi 5. Ghost etc.
-
Project mention: How many github projects should i have before applying for and entry level jobs as a Software developer? | reddit.com/r/RSA | 2022-01-09
Use this to make your profile look better at glance(for HR specifically, if they decide to look at your profile)
-
SonarLint
Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.
-
Project mention: Hackathon Starter: A boilerplate for Node.js web applications | news.ycombinator.com | 2022-01-12
-
Project mention: Ask HN: Safest place for young kids to chat to friends online? | news.ycombinator.com | 2022-01-11
At one point I seriously considered self-hosting a Rocket Chat [1] instance for very similar reasons. It seems to have a good balance of features, moderation controls, and polish while still being pretty straight-forward to host.
The main challenge I ran into was, of course, convincing folks to use it (instead of the "easier" forms of communication that they already had....).
-
react
Cheatsheets for experienced React developers getting started with TypeScript (by typescript-cheatsheets)
-
date-fns
-
-
Modernizr
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Website is unmaintained, check the Github repo for the lastest version.
-
Project mention: I need to be able to save some HTML+CSS content as a PDF. Currently opening a new tab with only that content, then using the Print to PDF option, which works fine, but I want to offer a more native "Save as PDF" option. Any recommendations that don't cost an arm and leg? | reddit.com/r/Frontend | 2021-12-12
-
Nodemon.io
Monitor for any changes in your node.js application and automatically restart the server - perfect for development
nodemon is a CLI for Node.js that makes JavaScript development much quicker by restarting an execution process when a file is updated. For example, if you have a project with an index.js file that you want to quickly test and iterate on, you can run nodemon index.js, and a new Node.js execution process will begin for index.js, restarting whenever a file in the project is updated. Simple, right?
-
Crates.io is currently written using Ember.js and, if I remember correctly, the plan was to incorporate Ember FastBoot.
-
swagger-ui
Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.
Swagger UI
-
Project mention: My docker build image deployed from Github Packages on portainer runs but fails to connect to the database | reddit.com/r/portainer | 2022-01-16
Putting all this together (especially upgrading Portainer) should help you along the way. I would also suggest looking at the GitOps functionality we added in the newer versions of Portainer, but be aware there are some caveats at present especially around relative paths in volumes.
-
I really enjoy Ava [1] or anything assert-tape-like [2]. "uvu" [3] is getting a lot of love lately, but it's very feature limited and much of it's touted advantages are at the detriment to feature set.
[1] https://github.com/avajs/ava
[2] https://github.com/substack/tape
[3] https://github.com/lukeed/uvu
Jest is great for front-end (or full stack integration) testing, but I feel it's specialized for that use-case and doesn't always play nice with backend/middle-tier testing needs.
-
JHipster
JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.
Project mention: Is it still worth it to learn how to code a backend in Java with frameworks if it's faster to use a backend generator? | reddit.com/r/learnjava | 2021-12-28How about jhipster? https://www.jhipster.tech/ This one is based on Java Spring Boot, and it claims to be a faster way to build apps.
-
Project mention: Any general purpose visualisation "just add the data" framework | reddit.com/r/Frontend | 2022-01-03
There's numerous standard backends which frontenders could use in simplistic cases to start, say https://github.com/PostgREST/postgrest or https://github.com/parse-community/parse-server
-
express-validator is a set of express.js middlewares that wraps validator.js validator and sanitizer functions.
-
I work for Automattic. I also run a remote job type site: https://remoteintech.company
JavaScript HacktoberFest related posts
- Just removed myself as a Ferdi's contributor
- Woman on my brother's FB took her son to Jeff Dunham, and then Twin Peaks
- Utroba Cave, in the Rhodope mountains, Bulgaria. Carved by hand more than 3000 years ago
- You can filter the purple ring posts using RES. Here's how you do it.
- I want to stop seeing posts in the femboy subreddit
- Thread Diario de Dudas, Consultas y Mitaps - 19/01
- Using GitHub as a CMS
Index
What are some of the best open-source HacktoberFest projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | material-ui | 74,492 |
| 2 | Chart.js | 55,900 |
| 3 | Meteor JS | 42,768 |
| 4 | Strapi | 42,497 |
| 5 | Web-Dev-For-Beginners | 40,040 |
| 6 | Ghost | 39,435 |
| 7 | github-readme-stats | 36,227 |
| 8 | hackathon-starter | 32,523 |
| 9 | Rocket.Chat | 31,379 |
| 10 | react | 30,920 |
| 11 | date-fns | 26,939 |
| 12 | webtorrent | 25,776 |
| 13 | Modernizr | 25,132 |
| 14 | jsPDF | 23,576 |
| 15 | Nodemon.io | 23,493 |
| 16 | Ember.js | 22,123 |
| 17 | swagger-ui | 21,405 |
| 18 | Portainer | 20,682 |
| 19 | ava | 19,547 |
| 20 | JHipster | 19,233 |
| 21 | parse-server | 19,204 |
| 22 | validator.js | 19,004 |
| 23 | remote-jobs | 17,944 |
Are you hiring? Post a new remote job listing for free.
