Top Related Projects
A Collection of application ideas which can be used to improve your coding skills.
50+ mini web projects using HTML, CSS & JS
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings
:bathtub: Clean Code concepts adapted for JavaScript
💯 Curated coding interview preparation materials for busy software engineers
A long list of (advanced) JavaScript questions, and their explanations :sparkles:
Quick Overview
30 Seconds of Code is a curated collection of short code snippets for all your development needs. It provides a wide range of JavaScript snippets that you can understand in 30 seconds or less, covering various programming concepts and common tasks.
Pros
- Extensive collection of concise, easy-to-understand code snippets
- Covers a wide range of JavaScript topics and use cases
- Regularly updated with new snippets and improvements
- Well-organized and searchable repository
Cons
- Some snippets may be too simplified for complex real-world scenarios
- Primarily focused on JavaScript, with limited coverage of other languages
- May not provide in-depth explanations for more advanced concepts
- Some snippets might become outdated as JavaScript evolves
Code Examples
- Array manipulation:
const compact = arr => arr.filter(Boolean);
// Usage
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]);
// [1, 2, 3, 'a', 's', 34]
This snippet removes falsy values from an array.
- String manipulation:
const capitalize = ([first, ...rest]) =>
first.toUpperCase() + rest.join('');
// Usage
capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'Foobar'
This snippet capitalizes the first letter of a string.
- Function utilities:
const debounce = (fn, ms = 0) => {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), ms);
};
};
// Usage
window.addEventListener(
'resize',
debounce(() => {
console.log('Resized');
}, 250)
);
This snippet creates a debounced function that delays invoking the provided function until after a specified amount of time has elapsed since the last time it was invoked.
Getting Started
To use these snippets in your project:
- Visit the 30 Seconds of Code website or the GitHub repository.
- Browse or search for the desired snippet.
- Copy the snippet code and paste it into your JavaScript file.
- Use the snippet as demonstrated in the examples provided.
For example, to use the capitalize function:
const capitalize = ([first, ...rest]) =>
first.toUpperCase() + rest.join('');
console.log(capitalize('hello world')); // 'Hello world'
Competitor Comparisons
A Collection of application ideas which can be used to improve your coding skills.
Pros of app-ideas
- Focuses on complete project ideas, encouraging practical application of skills
- Provides a wide range of difficulty levels, suitable for beginners to advanced developers
- Includes detailed project requirements and user stories for each idea
Cons of app-ideas
- Lacks ready-to-use code snippets, requiring more time and effort to implement
- May not cover specific coding techniques or algorithms in-depth
- Less frequent updates compared to 30-seconds-of-code
Code comparison
While a direct code comparison is not relevant due to the different nature of these repositories, here's an example of how they differ in content:
30-seconds-of-code:
const deepClone = obj => {
if (obj === null) return null;
let clone = Object.assign({}, obj);
Object.keys(clone).forEach(
key => (clone[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
);
return Array.isArray(obj) ? (clone.length = obj.length) && Array.from(clone) : clone;
};
app-ideas:
# Bin2Dec
**Tier:** 1-Beginner
Binary is the number system all digital computers are based on...
## User Stories
- [ ] User can enter up to 8 binary digits in one input field
- [ ] User must be notified if anything other than a 0 or 1 was entered
- [ ] User views the results in a single output field containing the decimal equivalent of the binary number that was entered
50+ mini web projects using HTML, CSS & JS
Pros of 50projects50days
- Focuses on practical, project-based learning with complete web applications
- Covers a wide range of modern web development techniques and technologies
- Provides a structured, day-by-day approach to learning and building projects
Cons of 50projects50days
- Less focused on reusable code snippets and utility functions
- May be overwhelming for absolute beginners due to the complexity of full projects
- Requires more time investment to complete each project compared to short code snippets
Code Comparison
50projects50days (HTML structure for a project):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Project Title</title>
</head>
30-seconds-of-code (JavaScript utility function):
const deepClone = obj => {
if (obj === null) return null;
let clone = Object.assign({}, obj);
Object.keys(clone).forEach(
key => (clone[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
);
return Array.isArray(obj) ? (clone.length = obj.length) && Array.from(clone) : clone;
};
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings
Pros of javascript-algorithms
- More comprehensive coverage of algorithms and data structures
- Includes detailed explanations and complexity analysis for each implementation
- Offers implementations in multiple programming languages (not just JavaScript)
Cons of javascript-algorithms
- Less focused on practical, everyday coding snippets
- May be overwhelming for beginners due to its depth and complexity
- Updates less frequently compared to 30-seconds-of-code
Code Comparison
30-seconds-of-code snippet (Array average):
const average = arr => arr.reduce((a, b) => a + b) / arr.length;
javascript-algorithms implementation (Array average):
function average(arr) {
if (arr.length === 0) return 0;
return arr.reduce((sum, current) => sum + current, 0) / arr.length;
}
The javascript-algorithms implementation includes error handling for empty arrays and uses an initial value in the reduce function, making it more robust. However, the 30-seconds-of-code snippet is more concise and easier to understand at a glance.
Both repositories offer valuable resources for JavaScript developers, with 30-seconds-of-code focusing on quick, practical snippets and javascript-algorithms providing in-depth coverage of algorithms and data structures. The choice between them depends on the developer's needs and experience level.
:bathtub: Clean Code concepts adapted for JavaScript
Pros of clean-code-javascript
- Focuses on best practices and principles for writing clean, maintainable JavaScript code
- Provides in-depth explanations and examples for each concept
- Covers a wide range of topics, from variable naming to SOLID principles
Cons of clean-code-javascript
- Less frequent updates compared to 30-seconds-of-code
- Fewer code snippets and practical examples
- May be overwhelming for beginners due to its comprehensive nature
Code Comparison
clean-code-javascript:
function createMicrobrewery(name) {
if (name) {
return new Microbrewery(name);
} else {
return new Microbrewery("Hipster Brew Co.");
}
}
30-seconds-of-code:
const createMicrobrewery = (name = 'Hipster Brew Co.') =>
new Microbrewery(name);
The 30-seconds-of-code example is more concise, using default parameters and an arrow function. The clean-code-javascript example is more explicit but less modern.
Both repositories offer valuable resources for JavaScript developers. 30-seconds-of-code provides a vast collection of short, practical code snippets, while clean-code-javascript focuses on teaching clean coding principles. The choice between them depends on whether you're looking for quick solutions or in-depth best practices.
💯 Curated coding interview preparation materials for busy software engineers
Pros of tech-interview-handbook
- Comprehensive coverage of technical interview topics, including algorithms, system design, and behavioral questions
- Includes detailed study plans and preparation strategies for different types of interviews
- Offers a curated list of recommended resources for further learning
Cons of tech-interview-handbook
- Less focused on providing quick, reusable code snippets
- May be overwhelming for beginners due to the breadth of content
- Requires more time investment to fully utilize the resources
Code Comparison
While 30-seconds-of-code focuses on concise code snippets, tech-interview-handbook provides more in-depth explanations and problem-solving approaches. Here's a brief comparison:
30-seconds-of-code:
const factorial = n => n <= 1 ? 1 : n * factorial(n - 1);
tech-interview-handbook:
function factorial(n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}
The tech-interview-handbook example would likely include additional explanations about the recursive approach, time complexity, and potential optimizations.
Both repositories serve different purposes: 30-seconds-of-code provides quick reference and reusable snippets, while tech-interview-handbook offers comprehensive interview preparation materials. Choose based on your specific needs and learning style.
A long list of (advanced) JavaScript questions, and their explanations :sparkles:
Pros of javascript-questions
- Focuses on in-depth JavaScript concepts and tricky questions
- Provides detailed explanations for each answer
- Excellent resource for interview preparation and advanced learning
Cons of javascript-questions
- Limited in scope compared to the broader range of topics in 30-seconds-of-code
- Less frequent updates and additions to the repository
- Lacks practical code snippets for immediate use in projects
Code Comparison
javascript-questions example:
function sayHi() {
console.log(name);
console.log(age);
var name = 'Lydia';
let age = 21;
}
sayHi();
30-seconds-of-code example:
const deepClone = obj => {
if (obj === null) return null;
let clone = Object.assign({}, obj);
Object.keys(clone).forEach(
key => (clone[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
);
return Array.isArray(obj) ? (clone.length = obj.length) && Array.from(clone) : clone;
};
The javascript-questions example focuses on understanding variable hoisting and scoping, while the 30-seconds-of-code snippet provides a practical utility function for deep cloning objects. This illustrates the different approaches of the two repositories: conceptual understanding versus practical code snippets.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
30 seconds of code
Short code snippets for all your development needs
- Visit the website to view the snippet collection.
- Search for snippets and collections that suit your needs, using the name, tags, language or description.
- Browse all snippets or individual snippet collections for each topic.
- Click on each snippet card to view the whole snippet, including code, explanation and examples.
- You can copy code blocks on any snippet card, using the copy button at the top right.
- If you like the project, give it a star. It means a lot.
Want to contribute?
- Community contributions are not accepted at this time. Check back later for updates.
Credits
- This repository is maintained by Angelos Chalaris.
- All code snippets are licensed under the CC-BY-4.0 License, unless explicitly stated otherwise.
- Any other material (including text content, images, the website source code, logos, names and trademarks) are not to be used without the explicit consent of the owner.
- The website is powered by Netlify, Astro & GitHub.
- All of the photography is provided by Unsplash.
Top Related Projects
A Collection of application ideas which can be used to improve your coding skills.
50+ mini web projects using HTML, CSS & JS
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings
:bathtub: Clean Code concepts adapted for JavaScript
💯 Curated coding interview preparation materials for busy software engineers
A long list of (advanced) JavaScript questions, and their explanations :sparkles:
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot