DEV Community: Martin Adams

How to add a Docusaurus website within Next.js Website as a route? It's worth $200

Martin Adams — Mon, 11 Mar 2024 17:09:45 +0000

I recently received a project worth $200.

The employer wants to use Docusaurus in a Next.js project.

I also found the same problem on stackoverflow. Hope this article is helpful to you.

how-to-add-a-docusaurus-website-within-next-js-website-as-a-route

Installation Next.js

pnpm dlx create-next-app@latest

What is your project named? next-docusaurus
Would you like to use TypeScript? No / Yes No
Would you like to use ESLint? No / Yes Yes
Would you like to use Tailwind CSS? No / Yes No
Would you like to use `src/` directory? No / Yes No
Would you like to use App Router? (recommended) No / Yes No
Would you like to customize the default import alias (@/*)? No / Yes Yes
What import alias would you like configured? @/*

pnpm install
pnpm build
pnpm dev

├── README.md
├── jsconfig.json
├── next.config.mjs
├── package.json
├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── api
│   │   └── hello.js
│   └── index.js
├── pnpm-lock.yaml
├── public
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
└── styles
    ├── Home.module.css
    └── globals.css

Installation Docusaurus

pnpm dlx create-docusaurus@latest doc classic
cd doc
pnpm install
pnpm start

We need to modify the build command of docusaurus.

"build": "docusaurus build && rm -rf '../public/doc' && mv 'build' '../public/doc'",

{
...
"scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build && rm -rf '../public/doc' && mv 'build' '../public/doc'",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids"
  },
...
}

Build the docusaurus project.

pnpm build // build docusaurus ()
cd ..
pnpm build // build next.js

We visit http://localhost:3000/doc. But why is 404 displayed?

Troubleshooting

README.md
├── doc
│   ├── README.md
│   ├── babel.config.js
│   ├── blog
│   │   ├── 2019-05-28-first-blog-post.md
│   │   ├── 2019-05-29-long-blog-post.md
│   │   ├── 2021-08-01-mdx-blog-post.mdx
│   │   ├── 2021-08-26-welcome
│   │   └── authors.yml
│   ├── docs
│   │   ├── intro.md
│   │   ├── tutorial-basics
│   │   └── tutorial-extras
│   ├── docusaurus.config.js
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── sidebars.js
│   ├── src
│   │   ├── components
│   │   ├── css
│   │   └── pages
│   └── static
│       └── img
├── jsconfig.json
├── next.config.mjs
├── package.json
├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── api
│   │   └── hello.js
│   └── index.js
├── pnpm-lock.yaml
├── public
│   ├── doc
│   │   ├── 404.html
│   │   ├── assets
│   │   ├── blog
│   │   ├── docs
│   │   ├── img
│   │   ├── index.html
│   │   ├── markdown-page
│   │   └── sitemap.xml
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
└── styles
    ├── Home.module.css
    └── globals.css

next.config.js Options: rewrites | Next.js

I found the override method in the Next.js documentation.

// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  rewrites: async () => [
    {
      source: "/doc",
      destination: "/doc/index.html",
    },
  ],
};

export default nextConfig;

DONE

https://next-docusaurus-martinadamsdev.vercel.app/doc

Feedback

Writing has always been my passion, and it gives me the pleasure of helping and inspiring people. If you have any questions, feel free to comment!

Welcome to Connect me on Twitter.

Prisma Data Platform Back-End Engineer

Martin Adams — Sat, 27 Aug 2022 18:06:00 +0000

At Prisma, we are building the data layer for modern applications. If you are fascinated by the leading-edge architecture and technology used in today’s data-intensive, highly scalable software systems, with distributed graph data on a massive scale, but you want the energy, challenges, and freedom that come with working in a small startup, then a job at Prisma might be for you.

With funding from top-tier investors Amplify Partners and Kleiner Perkins, we are a small distributed team working on making the advanced data infrastructure developed at large tech companies accessible to all application developers around the world. Our hard work is paying off, with adoption and implementation of Prisma by some of the most successful and interesting companies out there today, and the fun is just beginning!

We are focused on bottom-up adoption, and most of our software is open-source. We have a vibrant community on Slack and Github - with over 40,000 members on Slack - where we regularly engage with the Prisma community.

What would you do at Prisma?

You will be a member of the team responsible for the control plane of the Prisma Data Platform (https://cloud.prisma.io). This is the management layer that handles project creation and configuration, project data visualization, collaborative workflows, user accounts, and billing and payment.

Below are some of the things you could expect to do as part of the Prisma team:

Build services, APIs, and integrations to power the Prisma Data Platform ensuring high quality with your attention to reliability, performance, and maintainability.
Collaborate with other engineers on the system’s architecture and implementation.
Maintain and improve CI, infrastructure automation, background jobs, and testing.
Create well-tested, type safe code that is easy to understand and contribute to.

What technologies will you work with?

At Prisma, our primary programming languages are TypeScript and Rust. This role is focused on TypeScript where you will encounter the following:

Next.js
Prisma, PostgreSQL
GraphQL, Nexus, Relay
AWS, Terraform, Serverless, Vercel
GitHub Actions
Open Telemetry, Honeycomb

Candidate Profile

We believe the right candidate for this position will meet quite a few of the criteria below. If you don't fit the description perfectly, we'd still love to hear from you. We expect you to learn some of these on the job:

4+ Years experience as a Software Engineer with a focus on back end development, integration of 3rd party services, and API design.
Fluent in TypeScript or experience with types in another language.
Experience with microservices or service oriented architectures.
Comfortable orchestrating, integrating, and automating to achieve reliable, performant, and observable distributed systems.
Passion, curiosity, and knowledge of system design, security, and automation.
You have a product mindset or have built SaaS products in the past.
You can communicate fluently in English and can express your thoughts clearly in writing.
You enjoy working closely with your peers and proactively seek to help others.
You seek feedback early and often and are not afraid to ask for help.

What's it like to work at Prisma?

You're likely to be a great fit for the team if you ...

... have an ownership mindset. As part of a young startup, you'll have an outsize impact on decisions and the way things are executed.
... stay nimble. As a growing startup, the team and strategy evolves quickly. Be ready to re-calibrate often and stay flexible.
... be kind and collaborative. Come in ready to share your ideas and listen to feedback.

What's in it for you?

Opportunity for large global impact working on one of the fastest growing open-source tools. You will form part of the very beginnings of our journey into a commercial offering.
We provide a Competitive Base Salary in line with industry standards for similar positions.
As an early-stage startup we also provide competitive Stock-Option Grants.
24 Days paid vacation per year.
4 Days paid Mental Health Days per year.
6 Weeks fully paid Sabbatical Leave after 3 years.
20 Weeks fully paid Parental Leave.
[US] Health, Dental, Vision + 401k Matching
Generous Tech Budget to make sure you have all the hardware that you need.
Ergonomic Chair subsidy
Access to your local co-working space if you prefer to work from an external location to your home.

Remote Work

We are a remote-first organisation with an office based in Berlin, Germany. Whether you would like to work remotely, or from the office in Berlin is up to you! We are open to discussing relocation assistance if you would like to join us in Berlin.

To ensure effective collaboration we can currently only accept candidates within the timezone GMT -5 to GMT +3.

Note on COVID-19: The above opportunity to move to Berlin is temporarily suspended until we believe that travel is safe again.

What is the process like?

Our recruitment process roughly follows the structure below:

Introductory call with the Talent Acquisition Team
Interview with an Engineering Manager
*Interview *with members of the team that you will be joining
*Take Home Test *including a debrief session.
Offer

What do I do now?

If this sounds like an interesting opportunity, please apply via our website, and include your LinkedIn profile (or Resume), writing samples, or anything else that you think might give us a good sense of who you are.

We will generally be in touch within 7 business days to let you know the outcome of your application.

How to Apply?

Click to Apply

Prisma is an equal opportunity employer and does not discriminate on the basis of race, religion, color, national origin, gender, sexual orientation, gender identity, age, marital status, veteran status, or disability status.

Junior Backend Developer - Remote UK

Martin Adams — Sat, 20 Aug 2022 15:16:00 +0000

About Firstbasers

Firstbase is a community of seriously fun people.

We do care about each other and value human connections. We like people proficient in written communications and use way too many emojis in our communications :-) . We basically need people that work well in a collaborative environment. Providing general support to the rest of our team members. There is no I in TEAM, cheesy but we live by this.

We have a good balance of asynchronous quiet focus time and lively synchronous sessions. We are sensitive to the problems our customers are facing and committed to the impact we are creating.

We look for like-minded people. Humble and passionate.

Important Note

We’re committed to building a culturally diverse team and strongly encourage you to apply regardless of background, race, gender, sexual orientation or any other personally defining attribute. We encourage every person who is interested to apply. We’re imperfect communicators, so think of our job postings as the starting point for discussion rather than proof that you shouldn’t apply. Take the leap — you never know, you might just be the perfect person for our open roles, even if you don’t match 100% of the job description.

About the role

As stated in the title, we’re looking for a junior engineer, with a deep love for back-end work. Ideally, we embrace full stack for our user stories, encompassing FE and BE work. Pairing on a story works, but we’d love to optimise for engineers able to tackle some front-end work even if they are back-end focused. Same applies for our FE roles. We call them T-shape engineers. Strong in one area (here back-end) but have a breadth of knowledge outside of this focus. And if you don’t have the bar on the T just yet, you’re welcome to build these strengths with us!

So this role is a back-end heavy engineer role that is starting in their career. Today we work with Java and Kotlin and if you’re experienced in C#, Go, Python, Node, or whatever language, we’re happy to have you learn with us. We love choosing the right tool for the right task, while consistency is welcome, we grow and evolve as a group. So are our stacks.

What you’ll be expected to do

Build the product that our customer loves
Grow your skills on a platform that itself is growing and maturing. Help improve the current stacks. Moving from an MVP to a mature product takes both time and a village :-)
Collaborate with Design and Product teams (we love them) to make sure we’re working on the most impactful set of features

Typical profile we like

You believe deeply in the future of work being remote and its ability to deliver a higher quality of life
1–2 years of backend development, what’s important isn’t the time, but your experiences and growth
You can talk about your past successes and contributions
You can talk about failures that helped you grow (we embrace failures, failure is where experience grows as a company and as a team)
You’re a solid communicator, both written and verbal
You love to learn!

Nice to Have

Experiences at an enterprise SaaS company
Experience working in a start-up or a similar sometimes messy environment (we’re getting better)

How to Apply

jobs.ashbyhq.com

Remote Senior Front-End Developer

Martin Adams — Fri, 19 Aug 2022 21:35:00 +0000

Design your full-time freelance career as a top freelance developer with Toptal.

Photo by KOBU Agency on Unsplash

Freelance work is defining developer careers in exciting new ways. If you’re passionate about finding rapid career growth potential by working with leading Fortune 500 brands and innovative Silicon Valley startups, Toptal could be an excellent fit for your next career shift.

Toptal is an elite talent network made up of the world’s top 3% of developers, connecting the best and brightest freelancers with top organizations. Unlike a 9-to-5 job, you’ll choose your own schedule and work from anywhere. Jobs come to you, so you won’t bid for projects against other developers in a race to the bottom. Plus, Toptal takes care of all the overhead, empowering you to focus on successful engagements while getting paid on time, at the rate you decide, every time. Our sophisticated screening process makes sure you are provided with top clients without additional overhead, as well as assistance in maximizing the potential of your full-time freelance career. Joining the Toptal network also gives you access to technical training programs, mentors, and coaching programs, so you can connect with a global community of experts like you to share peer-to-peer knowledge and expand your network globally.

As a freelance developer, you can become a part of an ever-expanding community of experts in over 120 countries, working remotely on projects that meet your career ambitions.

That’s why the world’s top 3% of developers choose Toptal. Developers in our network share:

English language proficiency
3+ years of professional experience in software development
Solid experience with React.js is a strong advantage
Project management skills
Keen attention to detail
Experience with system architecture or leading a software team is a strong advantage
Full-time availability is a strong advantage

How to Apply

Curious to know how much you could make? Check out our developer rate calculator: https://topt.al/dwc7v2

If you’re interested in pursuing an engaging career working on full-time freelance jobs for exclusive clients, take the next step by clicking apply and filling out the short form: https://topt.al/jmc7Q3****

Remote Senior Shopify Developer (Remote + Flexible)

Martin Adams — Fri, 19 Aug 2022 21:30:00 +0000

Shopify developers love to freelance with Storetasker.

Endless, quality clients: from well-known DTC brands to top agencies.
Fully remote, flexible: work as much or as little as you want, wherever you want.
A talented and helpful community: it’s freelance (with a team).
Earn $80-$120 per hour: pick your clients, and send your own quotes or retainers.

We’ve connected our community of Shopify developers to over 32,000 e-commerce brands. From new brands pre-launch, to some of the most successful Shopify Plus sites, to top creative agencies. Clients include: Alpha Industries, Boll & Branch, Superfluid, Jack Henry, Plenaire, and Fulton among many more.

Why Storetasker?

Endless clients & project opportunities: you’ll see between 5–50 new opportunities per day and can pick any lead you want.
You’ll earn more: some experts are making $150–200k per year.
A high quality community: we carefully select about 5% of those who apply.
Remote: work from anywhere, anytime.
Flexible: take on as many clients as you want.
No external ratings: you’re already a professional. No need to prove it.
Great Software: that makes it easy to manage more clients and increase billable hours.
Support when you need it: we offer project support 7 days per week.
Community (not competition): you pick your clients, projects, and never compete against other Experts in the community.

Learn more and join! It’s confidential, and takes less than 5 minutes.

Here’s who we’re looking for

Ambitious part time and full-time freelancers and boutique agencies.
Who have 3+ years of Shopify experience, and 5+ years of web development experience.
And who have managed projects, deadlines, and communication successfully.

Especially people with some of these skills

Front-end or full-stack Shopify development
Klaviyo Email flows
Headless e-commerce development
Conversion rate optimization
E-commerce expertise and strategy
SEO
Site Speed
Builder and/or Shogun

It takes just a few minutes to join.

Here’s what a few current members have to say

“Storetasker has changed my life — I’m not only making more, but I’m getting quality leads, a diverse slate of projects, and access to an amazing group of developers. Plus, I love the HQ team!” — Adan, United States, Storetasker Expert since March 2020

“Storetasker has connected me with clients that would never have been possible without them. That combined with an incredible support network and community makes joining an amazing opportunity for any developer”” — Mark, England, Storetasker Expert since 2019

“Storetasker has allowed me to live out my dreams as an independent developer — to move to Toronto and continue doing what I love: solving interesting problems and helping apparel companies grow.” — Siah, Canada, Storetasker Expert since 2017

Our Mission

We’re a company built by ex-freelancers who know the ins and outs of being an independent entrepreneur. We’ve experienced first-hand the shortcomings of other freelance platforms and the pain-points of being fully independent. Our mission is to empower e-commerce entrepreneurs by giving them the experts, insights, and resources to succeed.

Questions? Reach out at experts@storetasker.com.

resources.storetasker.com

RemoteCamp

A publication for sharing projects, ideas, codes, and new theories.

remote.camp

10 GitHub Repositories to Become a CSS Master

Martin Adams — Fri, 19 Aug 2022 12:15:00 +0000

Many back-end and front-end partners think that CSS is hard to learn and that becoming a CSS Master is even more challenging.

We suggest that you know from Github's best open-source CSS projects.

So, I chose 10 repositories on Github to share with you so that we can all learn together and become CSS Masters.

I work full-time freelancer, and these CSS libraries have helped me make money more quickly.

To become CSS Masters, using them is not enough; we also need to study and learn the code.

I'm a full-time Freelancer. Hire me on Upwork.

Animate.css ⭐ Github stars: 75.4k +
normalize.css ⭐ Github stars: 48.4k +
Bulma ⭐ Github stars: 45.9k +
Hover.css ⭐ Github stars: 26.2k +
50 Projects in 50 Days ⭐ Github stars: 20.2k +
SpinKit ⭐ Github stars: 18.9k +
You Don't Need JavaScript ⭐ Github stars: 17.4k +
30 Seconds of CSS ⭐ Github stars: 15.6k +
Ratchet ⭐ Github stars: 14.5k +
Solved by Flexbox ⭐ Github stars: 13k +

Animate.css

⭐ Github stars: 75.4k +

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

It is easy to use its animation effects in our projects. We can learn how to use CSS animations.

Github

animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css

If you need the old docs - v3.x.x and under - you can find it here.

Just-add-water CSS animation

Installation

Install with npm:

npm install animate.css --save

Install with yarn:

yarn add animate.css

Getting Started

You can find the Animate.css documentation on the website.

Accessibility

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.

Core Team


Daniel Eden	Elton Mesquita	Waren Gonzaga
Animate.css Creator	Maintainer	Core Contributor

License

Animate.css is licensed under the Hippocratic License.

Code of Conduct

This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code…

View on GitHub

Size

animate.css v4.1.1 ❘ Bundlephobia

Find the size of javascript package animate.css v4.1.1. Bundlephobia helps you find the performance impact of npm packages.

bundlephobia.com

NPM

animate.css - npm

[![GitHub Version](https://img.shields.io/github/release/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![Github Star](https://img.shields.io/github/stars/daneden/animate.css.svg?style=for-the-badge)](https://github. Latest version: 4.1.1, last published: 4 years ago. Start using animate.css in your project by running `npm i animate.css`. There are 1877 other projects in the npm registry using animate.css.

npmjs.com

normalize.css

⭐ Github stars: 45.9k +

A modern alternative to CSS resets

When we design our own website CSS styles, we usually CSS resets in order to avoid the impact of browser default styles.

Github

necolas / normalize.css

A modern alternative to CSS resets

normalize.css

A modern alternative to CSS resets

NPM

npm install --save normalize.css

CDN

See https://yarnpkg.com/en/package/normalize.css

Download

See https://necolas.github.io/normalize.css/latest/normalize.css

What does it do?

Preserves useful defaults, unlike many CSS resets.
Normalizes styles for a wide range of elements.
Corrects bugs and common browser inconsistencies.
Improves usability with subtle modifications.
Explains what code does using detailed comments.

Browser support

Chrome
Edge
Firefox ESR+
Internet Explorer 10+
Safari 8+
Opera

Extended details and known issues

Additional detail and explanation of the esoteric parts of normalize.css.

`pre, code, kbd, samp`

The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source.

`sub, sup`

Normally, using sub or sup affects the line-box height of text in all browsers. Source.

`select`

By default, Chrome on OS X and Safari on OS X allow very limited styling of select, unless a border property…

View on GitHub

Size

normalize v0.3.1 ❘ Bundlephobia

Find the size of javascript package normalize v0.3.1. Bundlephobia helps you find the performance impact of npm packages.

bundlephobia.com

NPM

normalize - npm

Stylus porting of normalize.css. Latest version: 0.3.1, last published: 12 years ago. Start using normalize in your project by running `npm i normalize`. There are 21 other projects in the npm registry using normalize.

npmjs.com

Bulma

⭐ Github stars: 48.4k +

Modern CSS framework based on Flexbox

We can look at Bulma's code to learn about CSS FlexBox.

Github

jgthms / bulma

Modern CSS framework based on Flexbox

Bulma

Bulma is a modern CSS framework based on Flexbox.

Quick install

Bulma is constantly in development! Try it out now:

NPM

npm install bulma

Yarn

yarn add bulma

Bower

bower install bulma

Import

After installation, you can import the CSS file into your project using this snippet:

@import 'bulma/css/bulma.css'

CDN

https://www.jsdelivr.com/package/npm/bulma

Feel free to raise an issue or submit a pull request.

CSS only

Bulma is a CSS framework. As such, the sole output is a single CSS file: bulma.css

You can either use that file, "out of the box", or download the Sass source files to customize the variables.

There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

Browser Support

Bulma uses autoprefixer to make (most) Flexbox…

View on GitHub

Size

bulma v0.9.4 ❘ Bundlephobia

Find the size of javascript package bulma v0.9.4. Bundlephobia helps you find the performance impact of npm packages.

bundlephobia.com

NPM

bulma - npm

Modern CSS framework based on Flexbox. Latest version: 1.0.2, last published: a month ago. Start using bulma in your project by running `npm i bulma`. There are 1039 other projects in the npm registry using bulma.

npmjs.com

Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

⭐ Github stars: 26.2k +

Github

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Hover.css

Demo | Tutorial

Download/Install

NPM: npm install hover.css --save
Bower: bower install hover --save
Download Zip

How To Use

Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd…

View on GitHub

Size

hover.css v2.3.2 ❘ Bundlephobia

Find the size of javascript package hover.css v2.3.2. Bundlephobia helps you find the performance impact of npm packages.

bundlephobia.com

NPM

hover.css - npm

[![Join the chat at https://gitter.im/IanLunn/Hover](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/IanLunn/Hover?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge). Latest version: 2.3.2, last published: 6 years ago. Start using hover.css in your project by running `npm i hover.css`. There are 18 other projects in the npm registry using hover.css.

npmjs.com

50 Projects in 50 Days

Github

bradtraversy / 50projects50days

50+ mini web projects using HTML, CSS & JS

50 Projects in 50 Days - HTML/CSS and JavaScript

This is the main repository for all of the projects in the course.

Course Link

#	Project	Live Demo
01	Expanding Cards	Live Demo
02	Progress Steps	Live Demo
03	Rotating Navigation Animation	Live Demo
04	Hidden Search Widget	Live Demo
05	Blurry Loading	Live Demo
06	Scroll Animation	Live Demo
07	Split Landing Page	Live Demo
08	Form Wave	Live Demo
09	Sound Board	Live Demo
10	Dad Jokes	Live Demo
11	Event Keycodes	Live Demo
12	Faq Collapse	Live Demo
13	Random Choice Picker	Live Demo
14	Animated Navigation	Live Demo
15	Incrementing Counter	Live Demo
16	Drink Water	Live Demo
17	Movie App	Live Demo
18	Background Slider	Live Demo
19	Theme Clock	Live Demo
20	Button Ripple Effect	Live Demo
21	Drag N Drop	Live Demo
22	Drawing App	Live Demo
23	Kinetic Loader	Live Demo
24

…

View on GitHub

SpinKit

A collection of loading indicators animated with CSS

We’re going to add the animation to the page load ourselves, so make sure to look at its code.

⭐ Github stars: 18.9k +

Github

tobiasahlin / SpinKit

A collection of loading indicators animated with CSS

SpinKit

Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.

Usage

Add spinkit.css or spinkit.min.css to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need)
Add a spinner to your project by copy-pasting HTML from spinkit.css or examples.html
Add the sk-center utility class to the spinner to center it (it sets margin to auto)
By default, the width and height of all spinners are set to 40px. background-color is set to #333.
Configure the spinner by overwriting the CSS variables, primarily --sk-size (spinner width & height) and --sk-color (spinner color). If you need broader browser support, remove the CSS variables.

…

View on GitHub

Size

react-spinkit v3.0.0 ❘ Bundlephobia

Find the size of javascript package react-spinkit v3.0.0. Bundlephobia helps you find the performance impact of npm packages.

bundlephobia.com

NPM

react-spinkit - npm

A collection of loading indicators animated with CSS for React. Latest version: 3.0.0, last published: 7 years ago. Start using react-spinkit in your project by running `npm i react-spinkit`. There are 149 other projects in the npm registry using react-spinkit.

npmjs.com

You Don't Need JavaScript

CSS is powerful, you can do a lot of things without JS.

Here, we can find out a lot of interesting things. You don’t have to use JavaScript to do many things that can be done with CSS alone.

⭐ Github stars: 17.4k +

Github

you-dont-need / You-Dont-Need-JavaScript

CSS is powerful, you can do a lot of things without JS.

English | 简体中文

You Don't Need JavaScript

Please be aware that the demos may exhibit significant accessibility issues, such as problems with keyboard navigation, speech synthesis, and progressive enhancement or degradation.

Style Guide:

## <a id="DemoSubject"></a>Carousel

[<img src="images/image1.png" height="230" title="Demo 1">](http://url-to-page)
[<img src="images/image2.png" height="230" title="Demo 2">](http://url-to-page)
[<img src="images/image3.png" height="230" title="Demo 3">](http://url-to-page)

**[⬆ back to top](#quick-links)**

Quick links

View on GitHub

30 Seconds of CSS

Short CSS code snippets for all your development needs.

Here, we can learn a lot of cool CSS tricks.

⭐ Github stars: 15.6k +

Github

Chalarangelo / 30-seconds-of-css

Short CSS code snippets for all your development needs

IMPORTANT NOTICE:

As of May, 2023, all 30-seconds content repositories have been merged into 30-seconds-of-code.

Please watch, star and follow relevant activity there.

30 seconds of code

Short CSS code snippets for all your development needs

Visit our website to view our snippet collection.
Use the Search page to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
Browse the CSS Snippet collection to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
Click on each snippet card to view the whole snippet, including code, explanation and examples.
You can use the button at the bottom of a snippet card to view the snippet in Codepen.
If you like the project, give…

View on GitHub

Ratchet

Build mobile apps with simple HTML, CSS, and JavaScript components.

⭐ Github stars: 14.5k +

Github

twbs / ratchet

Build mobile apps with simple HTML, CSS, and JavaScript components.

Ratchet

Build mobile apps with simple HTML, CSS, and JS components.

Getting started

Clone the repo with git clone https://github.com/twbs/ratchet.git or just download the bundled CSS and JS
Read the docs to learn about the components and how to get a prototype on your phone
Check out examples

Take note that our master branch is our active, unstable development branch and that if you're looking to download a stable copy of the repo, check the tagged downloads.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

ratchet/
├── css/
│   ├── ratchet.css
│   ├── ratchet.min.css
│   ├── ratchet-theme-android.css
│   ├── ratchet-theme-android.min.css
│   ├── ratchet-theme-ios.css
│   └── ratchet-theme-ios.min.css
├── js/
│   ├── ratchet.js
│   └── ratchet.min.js
└── fonts/
    ├──

…

View on GitHub

Solved by Flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

We can learn a lot about how to use CSS FlexBox here.

⭐ Github stars: 13k +

Github

philipwalton / solved-by-flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

Solved by Flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

View Site

Viewing the Site Locally

The Solved by Flexbox site can be built with Node.js. If you have Node.js installed on your system, you can run the following commands to build and serve a local copy.

# Clone the git repository and cd into the cloned directory.
git clone https://github.com/philipwalton/solved-by-flexbox.git
cd solved-by-flexbox

# Install the dependencies
npm install

# Build and serve the site at http://localhost:4000
npm start

This starts up a local server on port 4000. To view the site in your browser, navigate to http://localhost:4000. If you want to use a different port, you can pass the port number as an argument to npm start:

npm start -- -p 8080

In addition to building the site and serving it locally, this will…

View on GitHub

Remote Jobs

Give Me Great Power

I'm a full-time Freelancer. Hire me on Upwork.

Writing has always been my passion, and it gives me the pleasure of helping and inspiring people. If you have any questions, feel free to reach out!

Welcome to Connect me on Twitter, LinkedIn, and GitHub!

How do you all create your resumes?

Martin Adams — Tue, 09 Aug 2022 04:44:00 +0000

1. Google Docs to PDF
2. Resume IO
3. Other

I use Resume.io.

Free Resume Builder: Make & Download Easily · Resume.io

Free online resume builder, allows you to create a perfect resume minutes. See how easy it is to create an amazing resume and apply for jobs today!

resume.io

It's my resume https://resume.io/r/Lk77wPAj6

Drop 👇 your tool or your resume. 👋

20 GitHub Repositories to Become a React Master

Martin Adams — Thu, 04 Aug 2022 12:24:00 +0000

If you are just starting off with React, this article is well worth your time to read and bookmark. These 20 React Github repositories will undoubtedly assist you in becoming a React Master.

I'm a full-time Freelancer. Hire me on Upwork.

Awesome React ⭐ Github Stars: 49k +
React in Patterns ⭐ Github Stars: 11k +
30 Days Of React
Real-world React Apps
React Bits
React & Redux in TypeScript of Complete Guide
Awesome React Components
Ahooks
Beautiful React Hooks
React Use
UseHooks
React TypeScript Cheatsheets
ReactJS coding challenges
React Interview Questions & Answers
30 seconds of react
React Hooks Cheatsheet
React/Redux Links
React Developer Roadmap
Awesome React Hooks
Awesome Next.js

Awesome React

⭐ Github Stars: 49k +

A collection of awesome things regarding the React ecosystem.

enaqx / awesome-react

A collection of awesome things regarding React ecosystem

Awesome React

A collection of awesome things regarding the React ecosystem.

React

React General Resources

React Tutorials

View on GitHub

React in Patterns

⭐ Github stars: 11k +

📚 A free book about design patterns/techniques used while developing with React.

krasimir / react-in-patterns

A free book that talks about design patterns/techniques used while developing with React.

React in patterns

📚 A free book that talks about design patterns/techniques used while developing with React.

Book

Translations

简体中文

Content

In brief

Foundation

Data flow

MISC

Source code

The code samples used in the book are available here.

Other resources

React Design principles
…

View on GitHub

30 Days Of React

⭐ Github stars: 4k +

30 Days of React challenge is a step-by-step guide to learning React in 30 days. It requires HTML, CSS, and JavaScript knowledge. It would be best if you were comfortable with JavaScript before starting React.

Asabeneh / 30-Days-Of-React

30 Days of React challenge is a step by step guide to learn React in 30 days. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw

30 Days Of React

Author: Asabeneh Yetayeh
October, 2020

Day 1 >>

# Day	Topics
00	Introduction How to Use Repo Requirements Setup
01	JavaScript Refresher
02	Getting Started React
03	Setting Up
04	Components
05	Props
06	List, Map and Keys
07	Class Components
08	States
09	Conditional Rendering
10	React Project Folder Structure
11	Events
12	Forms
13	Controlled and Uncontrolled Component
14	Component Life Cycles
15	Third Party Packages
16	Higher Order Components
17	React Router
18	Fetch versus Axios
19	Projects
20	Projects
21	Hooks
22	Forms Using Hook
23	Fetching Data Using Hooks
24	Project using Hooks
25	Custom Hooks
26	Context
27	Ref
28	project
29	Explore
30	Conclusions

🧡🧡🧡 HAPPY CODING 🧡🧡🧡

Support the author to create more educational materials

View on GitHub

Real-world React Apps

⭐ Github stars: 2k +

Real-world React apps and their open-source codebases for developers to learn from.

jeromedalbert / real-world-react-apps

Real world React apps and their open source codebases for developers to learn from

Real world React apps

Real world React apps and their open source codebases for developers to learn from

Learn from React apps written by experienced developers.

You'll find the source code for the apps in the apps/ subdirectory.

Thank you to every developer who has worked on a project this repo links to, your work is helping developers learn React.

How to install on your computer

# Clone this git repo:
git clone git@github.com:jeromedalbert/real-world-react-apps.git

cd real-world-react-apps/

# The apps are linked to as git submodules.
# This will take some time... (see comment below for possible speedup)
git submodule update --init

# OR if you've got git 2.9+ installed try to run updates in parallel:
# git submodule update --init --jobs 4

How you can analyze the apps

Some of the examples below use ag, but could just as well use grep or equivalent.

Global searches

# Look for

…

View on GitHub

React Bits

⭐ Github stars: 12k +

✨ React patterns, techniques, tips, and tricks ✨

vasanthk / react-bits

✨ React patterns, techniques, tips and tricks ✨

React Bits

A compilation of React Patterns, techniques, tips and tricks.

Gitbook format: https://vasanthk.gitbooks.io/react-bits

Github repo: https://github.com/vasanthk/react-bits

Your contributions are heartily ♡ welcome. (✿◠‿◠)

Translations by community:

中文版 (Chinese): react-bits-cn

한국어 (Korean): react-bits-ko

View on GitHub

React & Redux in TypeScript of Complete Guide

⭐ Github stars: 12k +

A comprehensive approach to utilizing TypeScript for static input in React and Redux apps. This tutorial details the most significant patterns and secrets for using TypeScript to leverage React (and its ecosystem) in a functional approach. It will assist you in making your code completely type-safe while focusing on inferring types from implementation.

piotrwitek / react-redux-typescript-guide

The complete guide to static typing in "React & Redux" apps using TypeScript

React & Redux in TypeScript - Complete Guide

"This guide is a living compendium documenting the most important patterns and recipes on how to use React (and its Ecosystem) in a functional style using TypeScript. It will help you make your code completely type-safe while focusing on inferring the types from implementation so there is less noise coming from excessive type annotations and it's easier to write and maintain correct types in the long run."

Found it useful? Want more updates?

Show your support by giving a ⭐

What's new?

🎉 Now updated to support TypeScript v4.6 🎉 🚀 _Updated to typesafe-actions@5.x 🚀

Goals

Complete type safety (with --strict flag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking with any type)
Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like Type Inference and…

View on GitHub

Awesome React Components

⭐ Github stars: 3k +

This is an AWESOME list of components. No, this is not an exhaustive list of every React component under the sun. So, what exactly does “great” mean? Well:

It addresses a genuine issue.
It performs things in an unusual, attractive, or extraordinary manner. (And it’s not very well-known or popular… there’s no use in including those.)
It has recently committed code!
For genuinely great creations, look for a. In addition, watch for quickie maintainer remarks and reviews in (italic parens) after several note listings.

brillout / awesome-react-components

Curated List of React Components & Libraries.

🚀 Absolutely Awesome React Components & Libraries

This is a list of AWESOME components. Nope, it's NOT a comprehensive list of every React component under the sun. So, what does "awesome" mean? Well:

It solves a real problem
It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.)
It has recent code commits!

Look for a 🚀 for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of note.

Maintainers:

@petebray, author of Fluxguard — monitor PROD website changes.
@brillout, author of vite-plugin-ssr (like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin) and Telefunc (remote functions instead of APIs).

Contributing

Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list…

View on GitHub

Ahooks

⭐ Github stars: 10k +

A high-quality & reliable React Hooks library.

Easy to learn and use
Supports SSR
Special treatment for functions, avoid closure problems
It contains a large number of advanced Hooks that are refined from business scenarios
Includes a comprehensive collection of bare Hooks
Written in TypeScript with predictable, static types

alibaba / hooks

A high-quality & reliable React Hooks library.

English | 简体中文

📚 Documentation

✨ Features

Easy to learn and use
Supports SSR
Special treatment for functions, avoid closure problems
Contains a large number of advanced Hooks that are refined from business scenarios
Contains a comprehensive collection of basic Hooks
Written in TypeScript with predictable static types

📦 Install

$ npm install --save ahooks
# or
$ yarn add ahooks
# or
$ pnpm add ahooks
# or
$ bun add ahooks

🔨 Usage

import { useRequest } from 'ahooks';

💻 Online Demo

🤝 Contributing

$ git clone git@github.com:alibaba/hooks.git
$ cd hooks
$ pnpm run init
$ pnpm start

Open your browser and visit http://127.0.0.1:8000

We welcome all contributions, please read our CONTRIBUTING.MD first, let's build a better hooks library together.

Thanks to all the contributors:

👥 Discuss

View on GitHub

Beautiful React Hooks

⭐ Github stars: 5.7k +

A collection of attractive and (hopefully) useful React hooks to help you write components and hooks faster.

antonioru / beautiful-react-hooks

🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥

A collection of tailor-made React hooks to enhance your development process and make it faster

🌟 Hooks Playground 🌟

💡 Why?

Custom React hooks allow developers to abstract the business logic of components into single, reusable functions.
I have noticed that many of the hooks I have created and shared across projects involve callbacks, references, events, and dealing with the component lifecycle.
Therefore, I have created beautiful-react-hooks, a collection of useful React hooks that may help other developers speed up their development process.
Moreover, I have strived to create a concise and practical API that emphasizes code readability, while keeping the learning curve as low as possible, making it suitable for larger teams to use and share t -- Please before using…

View on GitHub

React Use

⭐ Github stars: 30k +

The essential collection of custom React Hooks, complete with documentation.

streamich / react-use

React Hooks — 👍

👍
react-use

^{Collection of essential React Hooks
Port of libreact

Translations: 🇨🇳 汉语}

npm i react-use

Sensors
- useBattery — tracks device battery state.
- useGeolocation — tracks geo location state of user's device.
- useHover and useHoverDirty — tracks mouse hover state of some element.
- useHash — tracks location hash value.
- useIdle — tracks whether user is being inactive.
- useIntersection — tracks an HTML element's intersection.
- useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys.
- useLocation and useSearchParam — tracks page navigation bar location state.
- useLongPress — tracks long press gesture of some element.
- useMedia — tracks state of a CSS media query.
- useMediaDevices — tracks state of connected hardware devices.
- useMotion — tracks state of device's motion sensor.
- useMouse and useMouseHovered — tracks state of mouse position.
- useMouseWheel — tracks deltaY of scrolled mouse wheel.
- useNetworkState — tracks the state of browser's network connection.
- useOrientation — tracks…

View on GitHub

UseHooks

⭐ Github stars: 3.6k +

Recipes for React Hook code that are simple to grasp.

uidotdev / usehooks

A collection of modern, server-safe React hooks – from the ui.dev team

useHooks

A collection of modern, server-safe React hooks – from the ui.dev team.

Compatible with React v18.0.0+.

Standard

Install

npm i @uidotdev/usehooks

Hooks

Experimental

Install

npm i @uidotdev/usehooks@experimental react@experimental react-dom@experimental

Hooks

View on GitHub

React TypeScript Cheatsheets

⭐ Github stars: 34.8k +

Cheatsheets for experienced React developers getting started with TypeScript.

typescript-cheatsheets / react

Cheatsheets for experienced React developers getting started with TypeScript

React+TypeScript Cheatsheets

Cheatsheets for experienced React developers getting started with TypeScript

Web docs | Español | Português | Contribute! | Ask!

👋 This repo is maintained by @swyx, @eps1lon and @filiptammergard. We're so happy you want to try out TypeScript with React! If you see anything wrong or missing, please file an issue! 👍

| |

All React + TypeScript Cheatsheets

The Basic Cheatsheet is focused on helping React devs just start using TS in React apps
- Focus on opinionated best practices, copy+pastable examples.
- Explains some basic TS types usage and setup along the way.
- Answers the most Frequently Asked Questions.
- Does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.
- The goal is to get effective with TS without learning too much TS.
The Advanced Cheatsheet helps show and explain advanced usage of generic types for people writing…

View on GitHub

React Coding Challenges

⭐ Github stars: 1.9k +

A series of ReactJS coding challenges with a variety of difficulties.

alexgurr / react-coding-challenges

A series of ReactJS coding challenges with a variety of difficulties.

⭐️ Looking for collaborators ⭐️

We're looking for people to come and help work on the latest challenge Coinbee. If you're interested, get in touch via our slack community or via my website alexgurr.com!

A series of ReactJS coding challenges with a variety of difficulties. Deep dive into the why here.

Interested in some React fundamentals / philosophies? Check out the react-philosophies GitHub repo.

Time To Estimate. A fun, simple way for agile teams to remotely estimate tasks together. Free, with no sign-up required.

mixmello. Create remixed versions of your favourite Spotify playlists.

The Challenges

Easy 🙂

🚀 Rocket Ship

Unnecessary re-renders, fine grained control.

Medium 😐

🌙 Dark Mode

State / shared state, DOM manipulation.

🐝 Coinbee

Data visualisation and graphing. API usage.

Hard 😬

🎧 Spootify

Loading state, API usage.

🤖 Chatter

Web sockets, events, callbacks & React hooks. Talks to Botty…

View on GitHub

React Interview Questions & Answers

⭐ Github stars: 1.9k +

List of top 500 ReactJS Interview Questions & Answers….Coding exercise questions are coming soon!!

sudheerj / reactjs-interview-questions

List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!

React Interview Questions & Answers

Click ⭐if you like the project. Pull Request are highly appreciated. Follow me @SudheerJonna for technical updates.

I recommend this React course if you’re serious about learning React and want to go beyond the basics
Want to ace your coding interview and get hired at your dream company? Take this coding interview bootcamp

Note: This repository is specific to ReactJS. Please check Javascript Interview questions for core javascript questions.

No.	Questions
Core React
1	What is React?
2	What is the history behind React evolution?
3	What are the major features of React?
4	What is JSX?
5	What is the difference between Element and Component?
6	How to create components in React?
7	When to use a Class Component over a Function Component?
8	What are Pure Components?
9	What is state in React?
10	What are props in React?
11

…

View on GitHub

30 Seconds of React

⭐ Github stars: 4.3k +

Short React code snippets for all your development needs

Visit our website to view our snippet collection.
Use the Search page to find snippets that suit your needs. You can search by name, tag, language, or a snippet’s description. Just start typing a term and see what comes up.
Browse the React Snippet collection to see all the snippets in this project, or click individual tags at the top of the same page to narrow your search to a specific title.
Click on each snippet card to view the whole snippet, including code, explanation, and examples.
You can use the button at the bottom of a snippet card to view the snippet in Codepen.
If you like the project, give it a star. It means a lot to the people maintaining it.

Chalarangelo / 30-seconds-of-react

Short React code snippets for all your development needs

IMPORTANT NOTICE:

As of May, 2023, all 30-seconds content repositories have been merged into 30-seconds-of-code.

Please watch, star and follow relevant activity there.

30 seconds of code

Short React code snippets for all your development needs

Visit our website to view our snippet collection.
Use the Search page to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
Browse the React Snippet collection to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
Click on each snippet card to view the whole snippet, including code, explanation and examples.
You can use the button at the bottom of a snippet card to view the snippet in Codepen.
If you like the project, give…

View on GitHub

React Hooks Cheatsheet

⭐ Github stars: 655+

A Cheatsheet with live editable examples 💪

A one-stop reference for the React hooks APIs
Doesn’t replace the official docs.
However, it contains actual code examples, each mimicking all APIs of hooks.
It includes some real-world examples of cases/issues you’ll likely run into
Most importantly, the cheatsheet contains live editable codes.

[

GitHub - ohansemmanuel/react-hooks-cheatsheet: 🦖 React hooks cheatsheet with live editable…

ohansemmanuel / react-hooks-cheatsheet

🦖 React hooks cheatsheet with live editable examples

A Cheatsheet with live editable examples 💪

A one-stop reference for the React hooks APIs
Doesn't replace the official docs.
However, it contains actual code examples each mimicking all APIs of hooks.
Contains some real world examples of cases / issues you'll likely run into
Most importantly, the cheatsheet contains live editable codes.

Examples

includes live examples 🙋‍

👉🏿👉🏿👉🏿 Get Started

Todos

Add example call signatures to all hooks
Add more examples that explain interesting use cases from the official Hooks FAQ

Contributing

Contributions of any kind are welcome. If you wanna knock off any of the todos above, please feel free to issue a PR. Got an interesting idea for the cheatsheet? Issue a PR :)

View on GitHub

React/Redux Links

⭐ Github stars: 21.6K+

Curated tutorial and resource links I’ve collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem as a source for quality information on advanced topics and techniques. Not quite “awesome,” but hopefully useful as a starting point, I can give others. Suggestions welcome.

markerikson / react-redux-links

Curated tutorial and resource links I've collected on React, Redux, ES6, and more

React/Redux Links

Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem, as well as a source for quality information on advanced topics and techniques. Not quite "awesome", but hopefully useful as a starting point I can give to others. Suggestions welcome.

Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies. There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn. The invite link is at https://www.reactiflux.com.

You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at Redux Ecosystem Links. Also see Community Resources for links to other links lists, podcasts, and…

View on GitHub

React Developer Roadmap

⭐ Github stars: 17K+

Below you can find a chart demonstrating the paths you can take and the libraries you would want to learn to become a React developer. I made this chart as a tip for everyone who asks me, “What should I learn next as a React developer?”

adam-golab / react-developer-roadmap

Roadmap to becoming a React developer

React Developer Roadmap

README in Chinese

README in Japanese

README in Korean

README in Portuguese (Brazil)

README in Russian

README in Spanish

Roadmap to becoming a React developer in 2019:

Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a React developer. I made this chart as a tip for everyone who asks me, "What should I learn next as a React developer?"

Disclaimer

The purpose of this roadmap is to give you an idea about the landscape. The road map will guide you if you are confused about what to learn next, rather than encouraging you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy does not always mean best suited for…

View on GitHub

Awesome React Hooks

⭐ Github stars: 8.2K+

The essential collection of custom React Hooks, complete with documentation.

rehooks / awesome-react-hooks

Awesome React Hooks

awesome-react-hooks

Awesome React Hooks Resources

Documentation

React Hooks Docs

Discussions

React Hooks RFC

Tutorials

Videos

🎬 ReactConf 2018: React Today and Tomorrow by Sophie Alpert and Dan Abramov Official announcement and first demo.
🎬 ReactConf 2018: 90% Cleaner React by…

View on GitHub

Awesome Next.js

⭐ Github stars: 7.5K+

A selected assortment of books, videos, and articles about Next.js, the React server's rendering framework.

unicodeveloper / awesome-nextjs

📔 📚 A curated list of awesome resources : books, videos, articles about using Next.js (A minimalistic framework for universal server-rendered React applications)

Awesome Next.js

Curated list of resources: books, videos, articles about using Next.js.

Next.js: The React Framework.

List inspired by the awesome list thing. You might also like awesome-tdd.

Awesome Next.js
- Contents
- Community
- Essentials
- Articles
- Boilerplates
- Extensions
- Apps
- Books
- Videos
- Projects(Beginner level)
- Newsletters
- Contributing
- License

Community

Essentials

Articles

View on GitHub

Remote Jobs

Give Me Great Power

I'm a full-time Freelancer. Hire me on Upwork.

Writing has always been my passion, and it gives me the pleasure of helping and inspiring people. If you have any questions, feel free to reach out!

Welcome to Connect me on Twitter, LinkedIn, and GitHub!

Do you really understand Webpack?

Martin Adams — Sat, 29 Aug 2020 01:07:00 +0000

Do you really understand Webpack? If we know the answers to the following questions, it means that we have mastered Webpack. Welcome to give your answers.

Webpack in action

What other tools are similar to Webpack
Talk about why you chose to use or give up webpack
The difference between Loader and Plugin
What are the common Loaders? What problems can they solve?
What are the common Plugins? What problems can they solve?
How to use Webpack to optimize front-end performance
How to improve the speed of Webpack's build?
How to monitor and analyze the bundle volume?
How to configure a single page application? How to configure a multi-page application?
How to implement on-demand loading in Vue and React projects?
What are the benefits of monorepo projects, and how are they packaged?
What is Source Map? How to use the production environment?
What is long cache?
How to optimize long cache in Webpack?
What is the difference between hash chunkhash contenthash in Webpack?

Webpack principle

What is the construction process of Webpack?
Have you ever written Loader? Describe the idea of writing Loader?
Have you ever written Plugin? Describe the idea of writing Plugin?
What is the order of inline pre post normal loader execution?
What is the principle of Webpack packaging? Talk about babel and abstract syntax tree
What is the principle of dev-server? Describe its specific process
Please talk about the working principle of DIlPlugin and DllReferencePlugin
How is the hot update of Webpack done? Explain its principle?
Have you learned about Tree shaking? Talk about its realization principle

Webpack 5

What are the new features in Webpack 5
The significance of Module Federation in Webpack 5 to the micro front end

DEV Community: Martin Adams

How to add a Docusaurus website within Next.js Website as a route? It's worth $200

Installation Next.js

Installation Docusaurus

Troubleshooting

Feedback

Prisma Data Platform Back-End Engineer

What would you do at Prisma?

What technologies will you work with?

Candidate Profile

What's it like to work at Prisma?

What's in it for you?

Remote Work

What is the process like?

What do I do now?

How to Apply?

Junior Backend Developer - Remote UK

About Firstbasers

Important Note

About the role

What you’ll be expected to do

Typical profile we like

Nice to Have

How to Apply

Remote Senior Front-End Developer

How to Apply

Remote Senior Shopify Developer (Remote + Flexible)

Why Storetasker?

Here’s who we’re looking for

Especially people with some of these skills

Here’s what a few current members have to say

Our Mission

10 GitHub Repositories to Become a CSS Master

Table of Contents

Animate.css

Github

animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css

Just-add-water CSS animation

Installation

Getting Started

Accessibility

Core Team

License

Code of Conduct

Size

NPM

normalize.css

Github

necolas / normalize.css

A modern alternative to CSS resets

normalize.css

What does it do?

Browser support

Extended details and known issues

pre, code, kbd, samp

sub, sup

select

Size

NPM

Bulma

Github

jgthms / bulma

Modern CSS framework based on Flexbox

Quick install

NPM

Yarn

Bower

Import

CDN

CSS only

Browser Support

Size

NPM

Hover.css

Github

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Hover.css

`pre, code, kbd, samp`

`sub, sup`

`select`