Genericize image names
Chalarangelo
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 902 KiB After Width: | Height: | Size: 902 KiB |
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
|
Before Width: | Height: | Size: 4.1 MiB After Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 11 MiB After Width: | Height: | Size: 11 MiB |
|
Before Width: | Height: | Size: 2.9 MiB After Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 3.0 MiB After Width: | Height: | Size: 3.0 MiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 4.2 MiB After Width: | Height: | Size: 4.2 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 4.1 MiB After Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
|
Before Width: | Height: | Size: 5.3 MiB After Width: | Height: | Size: 5.3 MiB |
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
|
Before Width: | Height: | Size: 4.6 MiB After Width: | Height: | Size: 4.6 MiB |
|
Before Width: | Height: | Size: 5.3 MiB After Width: | Height: | Size: 5.3 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
|
Before Width: | Height: | Size: 4.0 MiB After Width: | Height: | Size: 4.0 MiB |
@ -3,7 +3,7 @@ title: 10 must-have VS Code extensions for JavaScript developers
|
||||
type: list
|
||||
tags: devtools,vscode
|
||||
authors: chalarangelo
|
||||
cover: blog_images/10-vs-code-extensions-for-js-developers.jpg
|
||||
cover: blog_images/computer-screens.jpg
|
||||
excerpt: VS Code is steadily gaining popularity among developers. Here are 10 essential extensions for JavaScript developers that aim to increase your productivity.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: 4 SEO tips for developers
|
||||
type: list
|
||||
tags: seo,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/4-seo-tips-for-developers.jpg
|
||||
cover: blog_images/sunrise-over-city.jpg
|
||||
excerpt: As time goes by, SEO is becoming increasingly relevant, but most web developers seem to have little experience with it. Here are 4 actionable SEO tips you can implement today.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: 5 tips for better Pull Requests
|
||||
type: list
|
||||
tags: git,github,programming,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/5-tips-for-better-pull-requests.jpg
|
||||
cover: blog_images/keyboard-tea.jpg
|
||||
excerpt: Writing good code is only part of the job. Here are 5 tips to improve your pull requests and help people review them.
|
||||
unlisted: true
|
||||
---
|
||||
|
||||
@ -3,7 +3,7 @@ title: 6 JavaScript Regular Expression features you can use today
|
||||
type: story
|
||||
tags: javascript,string,regexp
|
||||
authors: chalarangelo
|
||||
cover: blog_images/6-javascript-regexp-tricks.jpg
|
||||
cover: blog_images/taking-photos.jpg
|
||||
excerpt: Regular expressions, while very powerful, are notoriously hard to master. Start using them in your JavaScript code by understanding these 6 features.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: 7 essential Chrome extensions for web developers
|
||||
type: list
|
||||
tags: devtools,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/10-vs-code-extensions-for-js-developers.jpg
|
||||
cover: blog_images/computer-screens.jpg
|
||||
excerpt: Google Chrome's developer tools are nothing short of amazing. Here are 7 must-have extensions you can add to increase your productivity even further.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: 8 tips for accessible websites
|
||||
type: list
|
||||
tags: javascript,accessibility,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/a11y-cover.jpg
|
||||
cover: blog_images/accessibility.jpg
|
||||
excerpt: Accessibility (a11y) can improve your website and attract new users. Learn how to get started with these 8 quick tips.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: 8 tips for working from home
|
||||
type: list
|
||||
tags: career,programming,jobs,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/8-tips-for-remote-work.jpg
|
||||
cover: blog_images/kettle-laptop.jpg
|
||||
excerpt: Working from home seems like a great alternative to going to the office, but there are challenges that come with it that you need to overcome...
|
||||
unlisted: true
|
||||
---
|
||||
|
||||
@ -3,7 +3,7 @@ title: Breaking React - a common pattern to avoid
|
||||
type: story
|
||||
tags: react,debugging
|
||||
authors: chalarangelo
|
||||
cover: blog_images/breaking-react.jpg
|
||||
cover: blog_images/broken-screen.jpg
|
||||
excerpt: As powerful as React is, it is also quite fragile at places. Did you know that just a few lines are more than enough to break your entire React application?
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Code Anatomy - For loops, array reduce and method chaining
|
||||
type: story
|
||||
tags: javascript,array,object,iterator
|
||||
authors: chalarangelo
|
||||
cover: blog_images/code-anatomy-optimizing-recursion.jpg
|
||||
cover: blog_images/case-study.jpg
|
||||
excerpt: There are many ways to iterate and transform array data in JavaScript. Learn how each one works and where you should use them.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Code Anatomy - Optimizing recursive functions
|
||||
type: story
|
||||
tags: javascript,recursion,performance
|
||||
authors: chalarangelo
|
||||
cover: blog_images/code-anatomy-optimizing-recursion.jpg
|
||||
cover: blog_images/case-study.jpg
|
||||
excerpt: Recursive code has a tendency of being inefficient and can leave a lot of space for optimization. Learn a couple of tricks we use to speed up our recursive functions.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Code Anatomy - Writing high performance Python code
|
||||
type: story
|
||||
tags: python,list,performance
|
||||
authors: maciv,chalarangelo
|
||||
cover: blog_images/code-anatomy-performant-python.jpg
|
||||
cover: blog_images/walking-on-top.jpg
|
||||
excerpt: Writing short, efficient Python code is not always straightforward. Read how we optimize our list snippets to increase performance using a couple of simple tricks.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: How can I copy text to clipboard with JavaScript?
|
||||
type: question
|
||||
tags: javascript,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/copy-text-to-clipboard-with-javascript.jpg
|
||||
cover: blog_images/typing.jpg
|
||||
excerpt: Learn how to programmatically copy text to clipboard with a few lines of JavaScript and level up your web development skills.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: "Tip: Refactoring your for...in loops to avoid ESLint warnings"
|
||||
type: tip
|
||||
tags: javascript,array,iterator,eslint
|
||||
authors: chalarangelo
|
||||
cover: blog_images/copy-text-to-clipboard-with-javascript.jpg
|
||||
cover: blog_images/typing.jpg
|
||||
excerpt: ESLint is a very powerful tool that can save you a lot of headaches, but sometimes it gets in the way. Learn how to refactor code to get rid of a common warning.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Flexbox Cheat Sheet
|
||||
type: cheatsheet
|
||||
tags: css,layout,flexbox,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/flexbox.jpg
|
||||
cover: blog_images/frames.jpg
|
||||
excerpt: Flexbox allows you to create fluid layouts easily. If you find yourself constantly looking up the syntax or how it work, this handy cheatsheet is all you need.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: What are JavaScript closures?
|
||||
type: question
|
||||
tags: javascript,function,closure
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-concepts.jpg
|
||||
cover: blog_images/cherry-trees.jpg
|
||||
excerpt: Learn and understand closures, a core concept in JavaScript programming, and level up your code.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: How can I deep freeze an object in JavaScript?
|
||||
type: question
|
||||
tags: javascript,object
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-deep-freeze-object.jpg
|
||||
cover: blog_images/frozen-globe.jpg
|
||||
excerpt: Learn how mutability works in JavaScript, its applications to objects and how you can properly freeze them to make them constant.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: What is the difference between JavaScript's equality operators?
|
||||
type: question
|
||||
tags: javascript,type,comparison
|
||||
authors: chalarangelo
|
||||
cover: blog_images/js-equality.jpg
|
||||
cover: blog_images/beach-pineapple.jpg
|
||||
excerpt: Learn all you need to know about the differences between JavaScript's double equals and triple equals operators.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Understanding event bubbling, capturing and delegation in JavaScript
|
||||
type: story
|
||||
tags: javascript,browser,event
|
||||
authors: chalarangelo
|
||||
cover: blog_images/js-event-capture.jpg
|
||||
cover: blog_images/fishermen.jpg
|
||||
excerpt: Understand how events work in JavaScript and learn when to use event bubbling, event capturing and event delegation with this short guide.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: What is the difference between JavaScript's for...in, for...of and forEac
|
||||
type: question
|
||||
tags: javascript,array,object,iterator
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-for-in-for-of-foreach.jpg
|
||||
cover: blog_images/lake-loop.jpg
|
||||
excerpt: Learn the differences between the three most commonly used iteration methods offered by JavaScript, which often confuse beginners and veterans alike.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: JavaScript function methods - call(), apply() and bind()
|
||||
type: story
|
||||
tags: javascript,function
|
||||
authors: chalarangelo
|
||||
cover: blog_images/js-functions.jpg
|
||||
cover: blog_images/canoe.jpg
|
||||
excerpt: Learn everything you need to know about JavaScript's `Function.prototype.call()`, `Function.prototype.apply()` and `Function.prototype.bind()` with this short guide.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Understanding higher-order functions in JavaScript
|
||||
type: story
|
||||
tags: javascript,function
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-higher-order-functions.jpg
|
||||
cover: blog_images/rock-climbing.jpg
|
||||
excerpt: Learn everything you need to know about higher-order functions with this short guide and level up your programming skills.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: What are JavaScript Iterators and where can I use them?
|
||||
type: question
|
||||
tags: javascript,array,object,iterator
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-iterators.jpg
|
||||
cover: blog_images/balloons.jpg
|
||||
excerpt: Learn how the new JavaScript ES6 Iterators work and how you can use them to level up your programming projects by understanding these short code examples.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: How can I execute an event handler at most once?
|
||||
type: question
|
||||
tags: javascript,browser,event
|
||||
authors: maciv
|
||||
cover: blog_images/javascript-listen-once.jpg
|
||||
cover: blog_images/dog-waiting.jpg
|
||||
excerpt: Learn how to attach an event handler to events that is executed at most once in this JavaScript blog post.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Where and how can I use memoization in JavaScript?
|
||||
type: question
|
||||
tags: javascript,function,memoization
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-concepts.jpg
|
||||
cover: blog_images/cherry-trees.jpg
|
||||
excerpt: Learn different ways to memoize function calls in JavaScript as well as when to use memoization to get the best performance results.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: How do I use JavaScript to modify the URL without reloading the page?
|
||||
type: question
|
||||
tags: javascript,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-modify-url-without-reload.jpg
|
||||
cover: blog_images/compass.jpg
|
||||
excerpt: Learn all of the options JavaScript provides for modifying the URL of the current page in the browser without reloading the page.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: JavaScript modules Cheat Sheet
|
||||
type: cheatsheet
|
||||
tags: javascript,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-swap-two-variables.jpg
|
||||
cover: blog_images/mountain-lake-2.jpg
|
||||
excerpt: Learn everything you need to know about JavaScript modules with this handy cheatsheet.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: JavaScript naming conventions
|
||||
type: story
|
||||
tags: javascript,variable,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/js-naming-conventions.jpg
|
||||
cover: blog_images/naming-conventions.jpg
|
||||
excerpt: Naming conventions, while not easy to enforce, make code easier to read and understand. Learn how to name your variables in JavaScript with this handy guide.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Using JavaScript generator functions for ranges
|
||||
type: story
|
||||
tags: javascript,function,array
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-range-generator.jpg
|
||||
cover: blog_images/generator.jpg
|
||||
excerpt: Learn how to use JavaScript ES6 generators and iterators to iterate over ranges of numbers.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: How do I clone an object in JavaScript?
|
||||
type: question
|
||||
tags: javascript,object
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-shallow-deep-clone.jpg
|
||||
cover: blog_images/pagodas.jpg
|
||||
excerpt: Learn how JavaScript handles mutable data, such as objects and arrays, and understand how shallow cloning and deep cloning work.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: How can I implement a singleton in JavaScript?
|
||||
type: question
|
||||
tags: javascript,object,function,proxy,pattern
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-singleton-proxy.jpg
|
||||
cover: blog_images/obelisk.jpg
|
||||
excerpt: Learn how to implement a singleton, a commonly used software design pattern, in JavaScript using the Proxy object.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: "Tip: How to swap two variables in JavaScript"
|
||||
type: tip
|
||||
tags: javascript,array,variables
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-swap-two-variables.jpg
|
||||
cover: blog_images/mountain-lake-2.jpg
|
||||
excerpt: Learn how to swap the values of two variables in JavaScript using a single line of ES6 code.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: What is the ternary operator and how do I use it?
|
||||
type: story
|
||||
tags: javascript,condition
|
||||
authors: maciv
|
||||
cover: blog_images/javascript-ternary-operator.jpg
|
||||
cover: blog_images/red-succulent.jpg
|
||||
excerpt: Learn everything you need to know about the conditional (ternary) operator and how to use it in JavaScript.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: What is hoisting in JavaScript?
|
||||
type: question
|
||||
tags: javascript,type,variable
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-variable-hoisting.jpg
|
||||
cover: blog_images/boat-port.jpg
|
||||
excerpt: One of the most commonly asked JavaScript interview questions is about hoisting. It's also a concept that might require some getting used to, so read our guide to learn more.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Understanding JavaScript variables and scopes
|
||||
type: story
|
||||
tags: javascript,type,variable
|
||||
authors: chalarangelo
|
||||
cover: blog_images/javascript-variable-scope.jpg
|
||||
cover: blog_images/periscope.jpg
|
||||
excerpt: JavaScript developers often get confused by JavaScript's variables and scope. Here's a quick guide to understanding and remembering everything related to these concepts.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: "Tip: Debugging Node.js using Chrome Developer Tools"
|
||||
type: tip
|
||||
tags: javascript,node,debugging
|
||||
authors: chalarangelo
|
||||
cover: blog_images/nodejs-chrome-debugging.jpg
|
||||
cover: blog_images/bug.jpg
|
||||
excerpt: Did you know you can use Chrome Developer Tools to debug your Node.js code? Find out how in this short guide.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: "Tip: Prefetching resources in the browser"
|
||||
type: tip
|
||||
tags: webdev,html,browser
|
||||
authors: chalarangelo
|
||||
cover: blog_images/prefetching-resources.jpg
|
||||
cover: blog_images/playing-fetch.jpg
|
||||
excerpt: Resource prefetching is a great technique to improve perceived page speed on your website and one that requires little to no effort. Learn how to use it today.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: What is the difference between lists and tuples in Python?
|
||||
type: question
|
||||
tags: python,list
|
||||
authors: chalarangelo
|
||||
cover: blog_images/python-lists-tuples.jpg
|
||||
cover: blog_images/red-mountain.jpg
|
||||
excerpt: Learn how Python's lists and tuples are different and level up your code today.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: How do I convert a string to lowercase in Python?
|
||||
type: question
|
||||
tags: python,string
|
||||
authors: maciv
|
||||
cover: blog_images/python-lowercase.jpg
|
||||
cover: blog_images/type-stamps.jpg
|
||||
excerpt: Learn of the two different way to convert a string to lowercase in Python and understand when you should use each one with this quick guide.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Understanding Python's slice assignment
|
||||
type: story
|
||||
tags: python,list
|
||||
authors: maciv
|
||||
cover: blog_images/python-slice-notation.jpg
|
||||
cover: blog_images/sliced-fruits.jpg
|
||||
excerpt: Learn everything you need to know about Python's slice assignment with this handy guide.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Understanding Python's slice notation
|
||||
type: story
|
||||
tags: python,list
|
||||
authors: maciv
|
||||
cover: blog_images/python-slice-notation.jpg
|
||||
cover: blog_images/sliced-fruits.jpg
|
||||
excerpt: Learn everything you need to know about Python's slice notation with this handy guide.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: "Tip: React conditional className, empty strings and null"
|
||||
type: tip
|
||||
tags: react,components
|
||||
authors: maciv
|
||||
cover: blog_images/react-conditional-classname.jpg
|
||||
cover: blog_images/succulent-red-light.jpg
|
||||
excerpt: When developing React components, you might often need to conditionally apply a className. Learn how to handle empty classNames correctly using this handy tip.
|
||||
---
|
||||
|
||||
@ -29,7 +29,7 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
In the code example above, we create two very similar components, both of which conditionally set the `className` of an element based on the value of the `enabled` prop. The first one will set the `className` to an empty string if `enabled` is `false` and the second one will set it to `null`.
|
||||
In the code example above, we create two very similar components, both of which conditionally set the `className` of an element based on the value of the `enabled` prop. The first one will set the `className` to an empty string if `enabled` is `false` and the second one will set it to `null`.
|
||||
|
||||
Both will result in a very similar output, however, if you carefully inspect the HTML, you will notice that the first one will render `<div class>Hi</div>` whereas the second one will render `<div>Hi</div>`. This kind of markup (an attribute being present but without value) is rather uncommon and you'd rarely ever see something like that without React. This subtle difference is quite important and might be the root of a lot of problems, especially when trying to select elements with/without any classes using CSS selectors (e.g. `[class]`/`:not([class])`).
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: React rendering basics
|
||||
type: story
|
||||
tags: react,render
|
||||
authors: chalarangelo
|
||||
cover: blog_images/react-rendering.jpg
|
||||
cover: blog_images/comic-glasses.jpg
|
||||
excerpt: Take a deeper dive into React's rendering process and understand the basics behind the popular JavaScript framework.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: React rendering optimization
|
||||
type: story
|
||||
tags: react,render
|
||||
authors: chalarangelo
|
||||
cover: blog_images/react-rendering.jpg
|
||||
cover: blog_images/comic-glasses.jpg
|
||||
excerpt: Take a deeper dive into React's rendering process and understand how to make small yet powerful tweaks to optimize performance.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: React rendering state
|
||||
type: story
|
||||
tags: react,render
|
||||
authors: chalarangelo
|
||||
cover: blog_images/react-rendering.jpg
|
||||
cover: blog_images/comic-glasses.jpg
|
||||
excerpt: Take a deeper dive into React's rendering process and understand the role of the Context API and Redux in it.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: How can I set the value of a select input in React?
|
||||
type: question
|
||||
tags: react,components,input
|
||||
authors: maciv
|
||||
cover: blog_images/react-selected-option.jpg
|
||||
cover: blog_images/two-doors.jpg
|
||||
excerpt: Learn of all the different ways to set the value of a selected input in React with this quick guide.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Regular Expressions Cheat Sheet
|
||||
type: cheatsheet
|
||||
tags: javascript,string,regexp,cheatsheet
|
||||
authors: chalarangelo
|
||||
cover: blog_images/cheatsheet1.jpg
|
||||
cover: blog_images/tools.jpg
|
||||
excerpt: Regular expressions are a very useful tool in a variety of situations. Save this cheatsheet for any time you need to look up their syntax and speed up your development.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Testing React components that update asynchronously with React Testing Li
|
||||
type: story
|
||||
tags: react,testing,event
|
||||
authors: maciv,chalarangelo
|
||||
cover: blog_images/testing-react-side-effects.jpg
|
||||
cover: blog_images/colorful-lounge.jpg
|
||||
excerpt: Testing React components that update asynchronously with React Testing Library is a common scenario. Learn how to deal with common issues and speed up your testing.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Testing Redux-connected components with React Testing Library
|
||||
type: story
|
||||
tags: react,testing
|
||||
authors: chalarangelo
|
||||
cover: blog_images/testing-redux-connected-components.jpg
|
||||
cover: blog_images/sparkles.jpg
|
||||
excerpt: Testing Redux-connected components with React Testing Library is a very common scenario. Learn how to use this simple utility function to speed up your testing.
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: An approach to testing stateful React components
|
||||
type: story
|
||||
tags: react,testing
|
||||
authors: chalarangelo
|
||||
cover: blog_images/testing-stateful-ui-components.jpg
|
||||
cover: blog_images/lake-trees.jpg
|
||||
excerpt: Testing stateful React components is by no means a difficult task, but did you know there is an elegant solution that doesn't involve testing state directly?
|
||||
---
|
||||
|
||||
|
||||