Top 23 JavaScript JavaScript Projects
-
While Github was designed to store code, it has become a major hub for crowdsourcing knowledge and educational resources. In fact, only 3/10 of the top Github repositories today are ‘technologies’ (Vue, React, & Tensorflow), and by far the most popular repository on Github is a free, non-profit, coding camp.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Project mention: Introducing Almost Netflix: Netflix clone built with Vue and Appwrite | dev.to | 2022-01-19To build Almost Netflix, we will use Vue.js because of its decent simplicity and forced structure. I believe reading Vue components is straightforward, and any web developer can understand what the code is trying to achieve.
-
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.
-
Or it could be a framework like Gatsby, Next, or Nuxt. Those are similar to the SPAs except they are probably server-rendered or pre-rendered out of the box, depending on how they were set up. An example of a pre-rendered Gatsby.js site is the React website. An example of a server-rendered Next.js site is Hulu.
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
I'm using bootstrap4 to get access mainly to the components that getbootstrap.com has to offer. I haven't done any custom styling or added any styling sheets. I've only been adjusting whatever I pull from the website.
-
javascript-algorithms
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings
Pattern lists: best-practice implementations of popular algorithms in various programming languages (e.g. javascript, python, unix, go)
-
There are a large number of ready-made configurations. Several of them are the main accepted standards in the industry, for example, Airbnb JavaScript Style Guide or JavaScript Standard Style. But they will be redundant for our training project. Included with ESLint standard config with minimal settings is which we will use.
-
Project mention: 0f1c7b00ef21a633ce8611854d680f7d17862567 | reddit.com/r/u_Mohdshazali96 | 2021-12-27
-
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: Build a beautiful photo gallery in Masonry layout using Unsplash API | dev.to | 2022-01-19
Macy.js Axios
-
Node 14
-
THREE.js is lots of fun, and easier to get started with than C++. May be more high-level than what you're looking for though.
-
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 -
-
Possibly helpful: ryanmcdermott/clean-code-javascript
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
I don't know how you do the build of your GUI or perhaps you haven't thought of that yet. If the latter then that is something to think about but not an absolute requirement. You could for example use Webpack.
-
Project mention: Top 10 IDEs for React.js Developers in 2021 | reddit.com/r/u_WrapPixel9 | 2022-01-20
3. Atom
-
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.
-
Project mention: Don’t you feel sad that express and koa have stagnated? | reddit.com/r/node | 2022-01-20
I was recently digging trough express repo, and there are some very recent comments on v5 release checklist: https://github.com/expressjs/express/pull/2237
-
html5-boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites.
https://html5boilerplate.com/ + CSS framework eventually (easier to create a responsive website, which I think is the trickiest part) + gulp or webpack for task automation (e.g. minifying)
-
Issues: https://github.com/HFOSSedu/kwurst-kit-review/issues/8 https://github.com/iron-fish/ironfish/issues/912 https://github.com/virtio-win/kvm-guest-drivers-windows/issues/721 https://github.com/HFOSSedu/kwurst-kit-review/issues/6 https://github.com/HFOSSedu/kwurst-kit-review/issues/5 https://github.com/abhi-kr-2100/sentence-collector/issues/2 https://github.com/HFOSSedu/kwurst-kit-review/issues/23 https://github.com/HFOSSedu/kwurst-kit-review/issues/26 https://github.com/bcgov/performance/issues/382 https://github.com/lodash/lodash/issues/5360 https://github.com/sanctuarycomputer/sanctu-dot-com/issues/138
-
-
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.
-
It would be best if you didn't argue about code formatting. Use a tool like prettier and never speak about the topic again. I don't put any effort whatsoever into formatting my code anymore. When I save, and nothing happens, this is a sign that there is a syntax error somewhere.
JavaScript JavaScript related posts
Index
What are some of the best open-source JavaScript projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | freeCodeCamp | 339,105 |
| 2 | Vue.js | 192,401 |
| 3 | React | 180,979 |
| 4 | Bootstrap | 154,923 |
| 5 | javascript-algorithms | 132,336 |
| 6 | javascript | 118,482 |
| 7 | 30-seconds-of-code | 91,257 |
| 8 | axios | 90,437 |
| 9 | node | 84,489 |
| 10 | three.js | 77,896 |
| 11 | material-ui | 74,492 |
| 12 | nodebestpractices | 73,965 |
| 13 | clean-code-javascript | 62,285 |
| 14 | webpack | 60,261 |
| 15 | Atom | 56,620 |
| 16 | Chart.js | 55,900 |
| 17 | Express | 55,638 |
| 18 | html5-boilerplate | 52,137 |
| 19 | lodash | 51,950 |
| 20 | 33-js-concepts | 46,060 |
| 21 | Meteor JS | 42,768 |
| 22 | Strapi | 42,497 |
| 23 | prettier | 41,655 |
Are you hiring? Post a new remote job listing for free.
