10secondsofcode/10secondsofcode

The team behind 10-seconds-of-code and official 10-seconds projects.

10secondsofcode

10secondsofcode is a easy way to understand the JavaScript and ReactJS snippets in 10 seconds.
This website idea is inspired from https://javascript.info

Website

https://www.10secondsofcode.com

To add any concepts like reactjs and javascript follow the below steps

1. Create / Edit the reactjs and javascripts concepts file in src/pages/.
2. Those files linked into src/components/data.js and create a PR.

To contribute to 10secondsofcode!

Follow these steps to make your first pull request-

1. Fork this repository.
2. Clone your forked repository to your local machine.
3. Take any one of the issue from issues list and make a Pull Request.
4. Write these commands on your terminal-

git add -A
git commit -m "your name"
git push origin master

5. Then create a pull request.
6. Star the official repository of 10secondsofcode.
7. Congratulations!! You have successfully made a pull request.

10secondsofcode's Issues

Pull requests here won’t count toward Hacktoberfest.

Hi there,

Thanks for your interest in Hacktoberfest and helping others learn how to make their first contributions to open source!

That said, high-quality contributions are part of the the core values of Hacktoberfest, so we kindly ask that you do not create repositories which allow users to quickly gain a PR toward completing the challenge.

We encourage you to take a look at our list of Hacktoberfest issues for inspiration and ideas about making meaningful contributions to open source projects.

Due to this, we've added this repository to our list of excluded repositories and pull requests here will not count toward Hacktoberfest 2019.

Please note, you are welcome to keep running this repository as a learning tool for new contributors to open-source, but pull requests won’t count toward Hacktoberfest.

Happy Hacking,
The Hacktoberfest Team

Hacktoberfest is presented by DigitalOcean and DEV.

Need to fix reactjs routing issue in github pages

Bug : Need to fix reactjs routing issue in github pages

Fix the eslint parse error while commit the code

While commit the code in git, eslint throwing the parse error in reactjs.
Anyone fix this issue?

Improvement of website

Improvement of website

Read content from markdown file using graphql

Read the content from markdown file in sub pages.

Example : If I am clicking the home page below link like introduction topic , it will redirect topic details page, in this page we have read the introduction markdown file and displaying the content.

1. Goto this page https://10seconds.netlify.com/javascript-objects
2. For this page we have content in https://github.com/10secondsofcode/10secondsofcode/blob/master/src/content/javascript-objects.md.
3. So we have to read the javascript-objects.md file and displaying the content in https://10seconds.netlify.com/javascript-objects.
4. It should works dynamically for all pages like if we add topic in content folder, it will read and displaying content corresponding page.

Update readme.md file

Update contributions and participate in Hacktoberfest2019

Welcome to HacktoberFest 2019 event from #10secondsofcode

Follow these steps to make your first pull request-

1. Fork this repository.
2. Clone your forked repository to your local machine.
3. Add your name in Contributors.md file.
4. Write these command on your terminal-

git add -A
git commit -m "your name"
git push origin master

5. Then create your pull request.
6. Star my repository.
7. Congratulations!! You have successfully created your pull request.
8. Check your progress here (https://hacktoberfest.digitalocean.com/profile)
   Wait for your shirt.

UI Improvement

Improve the UI for Home pages and blogs pages.

Read content from markdown file

Read the content from markdown file in sub pages.

Example : If I am clicking the home page below link like introduction topic , it will redirect topic details page, in this page we have read the introduction markdown file and displaying the content.

1. Goto this page https://10seconds.netlify.com/javascript-objects
2. For this page we have content in https://github.com/10secondsofcode/10secondsofcode/blob/master/src/content/javascript-objects.md.
3. So we have to read the javascript-objects.md file and displaying the content in https://10seconds.netlify.com/javascript-objects.
4. It should works dynamically for all pages like if we add topic in content folder, it will read and displaying content corresponding page.

Login Component

Login Component

A login component with fields of email and password.
Error handling taken care of.

Bug hunt

Bug hunt

1. Find the bugs and List the issue
2. Provide suggestions for enhancements / feature.

[Solution] Read the markdown file data into display the content using reactjs

It's simple, use npm package markdown-to-jsx.

import Markdown from 'markdown-to-jsx';
import React from 'react';
import { render } from 'react-dom';
 
render(<Markdown># Hello world!</Markdown>, document.body);

Reactjs - Fix the router issue for navigations

Fix the router navigation for the content links mentioned in below.

Goto 10secondsofcode.com and goto introduction and design pattern links and make it as another pages.

10secondsofcode PR Welcome

Hi 👋

I've created this issue to keep track of things to do for 10secondsofcode. Feel free to pick tasks and create PR if you want. Just add a message below to avoid duplication of work.

Also small PRs that complete one task are easier to review and merge 👍

And if you have any question, feel free to ask :)

• Website template updation
• Improvement reactjs fucntionality
• Add reactjs snippets
• Listout missing functionlities
• Fix bugs, typos, ... :)

Add concepts like reactjs and javascript

To add any concepts like reactjs and javascript follow the below steps

1. Create / Edit the reactjs and javascripts concepts file in src/pages/.
2. Those files linked into src/components/data.js and create a PR.

Search Component

Search Component

• Add a search bar and implement the functionality.
• On search filtered tasks should be shown.

Create LOGO for 10secondsofcode

Create LOGO for 10secondsofcode

1. Create the logo for 10secondsofcode and and it will bring the meaning of 10seconds understanding the concepts.
2. Use your creativity and design.

Add react snippets

Add react snippets

Create simple test component

Create simple test components to pass the build.

Dark mode/light mode

Dark mode/light mode

Application should enable the dark and light mode options

Improve the reactjs build chunk file

Improve the production build files into small chunk files and improve production.

Gatsby - Production build throwing error as yoga-layout-prebuilt

In our local, production build is working fine, if we deployed into netlify and prod build throwing below error.

11:55:22 AM: ❯ Config file
11:55:22 AM:   No config file was defined: using default values.
11:55:22 AM: ​
11:55:22 AM: ❯ Context
11:55:22 AM:   production
11:55:22 AM: ​
11:55:22 AM: ┌────────────────────────────────┐
11:55:22 AM: │ 1. Build command from settings │
11:55:22 AM: └────────────────────────────────┘
11:55:22 AM: ​
11:55:22 AM: $ gatsby build
11:55:23 AM: /opt/build/repo/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
11:55:23 AM:         throw ex;
11:55:23 AM:         ^
11:55:23 AM: Error: Cannot find module 'acorn'
11:55:23 AM: Require stack:
11:55:23 AM: - /opt/build/repo/node_modules/acorn-jsx/index.js
11:55:23 AM: - /opt/build/repo/node_modules/buble-jsx-only/dist/buble.cjs.js
11:55:23 AM: - /opt/build/repo/node_modules/@mdx-js/runtime/dist/cjs.js
11:55:23 AM: - /opt/build/repo/node_modules/gatsby-recipes/dist/cli.js
11:55:23 AM: - /opt/build/repo/node_modules/gatsby-recipes/dist/index.js
11:55:23 AM: - /opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli/lib/recipes.js
11:55:23 AM: - /opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli/lib/create-cli.js
11:55:23 AM: - /opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli/lib/index.js
11:55:23 AM: - /opt/build/repo/node_modules/gatsby/dist/bin/gatsby.js
11:55:23 AM: - /opt/build/repo/node_modules/gatsby/cli.js

Anyone help this?