CSS is an essential part of web development, as it determines most of the layout and appearance of websites. If you are looking to brush up on your CSS skills, these can be a great way to learn and improve.
 
<h2><a href="https://flexboxfroggy.com">Flexbox Froggy</a></h2>
<blockquote>
Learn the concepts of flexbox in CSS
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/flexbox-froggy.jpg" alt="Flexbox Froggy">
Flexbox Froggy introduces players to the concepts of flexbox layout in CSS. Players must use flexbox properties to position frogs on a lily pad, working their way through progressively more difficult levels.
 
<h2><a href="https://cssgridgarden.com">Grid Garden</a></h2>
<blockquote>
Learn about the CSS grid layout system
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/grid-garden.jpg" alt="Grid Garden">
Grid Garden teaches players about the CSS grid layout system by challenging them to grow a garden by writing CSS code. Players must use grid properties to arrange plants in a grid, working through various levels.
 
<h2><a href="https://flukeout.github.io">CSS Diner</a></h2>
<blockquote>
Learn the basics of CSS selectors
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/css-diner.jpg" alt="CSS Diner">
CSS Diner takes players through a series of increasingly difficult challenges that teach the basics of CSS selectors. Players must use the correct selectors to select a series of dishes to advance each level.
 
<h2><a href="http://www.flexboxdefense.com">Flexbox Defense</a></h2>
<blockquote>
Move around towers to defend a road from attacks
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/flexbox-defense.jpg" alt="Flexbox Defense">
Flexbox Defense has 12 different levels and is a great game for learning CSS. It involves placing towers to protect a road from enemy attacks.
 
<h2><a href="https://knightsoftheflexboxtable.com">Knights of the Flexbox Table</a></h2>
<blockquote>
Navigate the knight through the dungeon using Tailwind CSS
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/knights-of-the-flexbox-table.jpg" alt="Knights of the Flexbox Table">
Knights of the Flexbox Table is a game where you help Sir Frederic Flexbox and his friends to uncover the treasures hidden in the CSS dungeons. You can navigate the knight through the dungeon by changing his position within the dungeon using Flexbox and Tailwind CSS.
 
<h2><a href="https://codingfantasy.com/games/flexboxadventure">Flex Box Adventure</a></h2>
<blockquote>
A game with 24 levels of CSS challenges
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/flex-box-adventure.jpg" alt="Flex Box Adventure">
Flex Box Adventure has 24 levels and is a game where you'll have the opportunity to learn from helpful hints and test your skills with a variety of tasks. It's a great way to continue improving your understanding of CSS.
 
<h2><a href="https://codingfantasy.com/games/css-grid-attack">Grid Attack</a></h2>
<blockquote>
An interactive game to practice CSS grid
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/grid-attack.jpg" alt="Grid Attack">
Grid Attack is expertly designed and will provide you with a fun and interactive way to learn about CSS Grid. The objective is to use CSS Grid to alter the landscape to defeat demons. With 80 levels to play through, you'll have plenty of opportunities to practice and master this important web development skill.
 
<h2><a href="https://mastery.games/flexboxzombies">Flexbox Zombies</a></h2>
<blockquote>
Shoot zombies while learning about flexbox
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/flexbox-zombies.jpg" alt="Flexbox Zombies">
Flexbox Zombies has 12 chapters and up to 25 levels in each, there's plenty of content to keep you entertained. Normally, this game comes with a price tag, but it appears to be free to play indefinitely.
 
<h2><a href="https://guess-css.app">Guess CSS</a></h2>
<blockquote>
Guessing game with CSS selectors
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/guess-css.jpg" alt="Guess CSS">
Guess CSS challenges you to determine which selector produces the desired result. One of the benefits of this game is that you get to see the correct answer, which helps you learn. Additionally, it covers a wide range of CSS concepts, rather than focusing on just one specific aspect.
 
<h2><a href="https://css-speedrun.netlify.app">CSS Speedrun</a></h2>
<blockquote>
CSS selector game with time pressure and replayability
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/css-speedrun.jpg" alt="CSS Speedrun">
CSS Speedrun requires you to use CSS Selectors to target and select certain elements on the page. It adds an extra level of difficulty by requiring you to do it quickly. With 10 levels to play through, you can test your skills and try to improve your speed with each attempt.
 
<h2><a href="https://css-challenges.com">CSS Challenges</a></h2>
<blockquote>
Improve CSS skills with daily challenges
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/css-challenges.jpg" alt="CSS Challenges">
CSS Challenges is a great tool for improving your CSS skills and learning new tricks. It provides daily challenges that will help you grow as a web developer.
 
<h2><a href="https://cssbattle.dev">CSSBattle</a></h2>
<blockquote>
Use your CSS skills to replicate targets with the smallest possible code
</blockquote>
<img src="/images/posts/learn-css-by-playing-games/cssbattle.jpg" alt="CSSBattle">
CSSBattle challenges players to build images using CSS. Players are given a set of design constraints and must use their CSS skills to replicate targets with the smallest possible code.
 
Thanks! Hopefully, you enjoyed the post and will have fun playing with CSS!

CSS is an essential part of web development, as it determines most of the layout and appearance of websites. If you are looking to brush up on your CSS skills, these can be a great way to learn and improve.Flexbox FroggyLearn the concepts of flexbox in CSSFlexbox Froggy introduces players to the concepts of flexbox layout in CSS. Players must use flexbox properties to position frogs on a lily pad, working their way through progressively more difficult levels.Grid GardenLearn about the...

Learn CSS by playing games

If you are developing a web application, then there are a lot of things to consider. One important aspect is the images that are used, for aesthetic purposes or various other reasons (e.g. icons). Either way, it is important to have a backup plan in case images don't load for some reason.
For example, if you are pulling image data from an external database or API, sometimes you can't be 100% sure that it will return you an existing image file. In those cases, you may end up with a broken image icon on your webpage, and depending on the browser, there may be no indication at all that something went wrong. Frontend developers should predict these cases and adequately provide a fallback image when it happens.
To achieve this we can use the <code>onerror</code> event handler on <code>img</code> elements. This handle will get called if an error occurs while loading or rendering an image. According to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#image_loading_errors">MDN Web Docs</a>, it can happen in several situations, including:
<ul>
<li>The <code>src</code> attribute is empty or <code>null</code>.</li>
<li>The <code>src</code> URL is the same as the URL of the page the user is currently on.</li>
<li>The image is corrupted in some way that prevents it from being loaded.</li>
<li>The image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code>img</code> element's attributes.</li>
<li>The image is in a format not supported by the user agent.</li>
</ul>
To do this with React we just need to use <code>onError</code> instead (the <code>SyntheticEvent</code> wrapper from React’s event system).
<pre><code class="language-javascript">import React from &#x27;react&#x27;;

export default function App() {
 const addImageFallback = (event) =&gt; {
 event.currentTarget.src = &#x27;/images/fallback.png&#x27;;
 };

 return (
 &lt;img src=&quot;/images/broken.png&quot; alt=&quot;&quot; onError={addImageFallback} /&gt;
 );
}
</code></pre>
If using TypeScript, we just need to properly type the <code>event</code> parameter of the <code>addImageFallback</code> function.
<pre><code class="language-typescript">import React, { SyntheticEvent } from &#x27;react&#x27;;

export default function App() {
 const addImageFallback = (event: SyntheticEvent&lt;HTMLImageElement, Event&gt;) =&gt; {
 event.currentTarget.src = &#x27;/images/fallback.png&#x27;;
 };

 return (
 &lt;img src=&quot;/images/broken.png&quot; alt=&quot;&quot; onError={addImageFallback} /&gt;
 );
}
</code></pre>
And that's it! Now you know how to add fallback images to your React projects. Hopefully, this has been a valuable resource if you are just starting your coding journey. Thanks!

If you are developing a web application, then there are a lot of things to consider. One important aspect is the images that are used, for aesthetic purposes or various other reasons (e.g. icons). Either way, it is important to have a backup plan in case images don't load for some reason.For example, if you are pulling image data from an external database or API, sometimes you can't be 100% sure that it will return you an existing image file. In those cases, you may end up with a broken image i...

Adding fallback images onto your React projects

<a href="https://lodash.com">Lodash</a> is one of the most popular open-source JavaScript libraries. It implements a lot of functional programming helpers that make everyday coding easier. It's something I use often in my own development work, and so I wanted to share with you some of the methods that I find myself using a lot.
In this short post, we'll go over 15 everyday methods that, when used properly, can speed up development and make your code more readable.
<h2>shuffle</h2>
<blockquote>
Creates an array of shuffled values (using a version of the <a href="https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle">Fisher-Yates shuffle</a>).
</blockquote>
<pre><code class="language-javascript">import shuffle from &#x27;lodash/shuffle&#x27;;

const result = shuffle([1, 2, 3, 4, 5]);

// result =&gt; [2, 5, 1, 4, 3]
</code></pre>
<h2>orderBy</h2>
<blockquote>
Creates an array of elements, sorted in the specified order by the results of running each element in a collection thru each iteratee.
</blockquote>
<pre><code class="language-javascript">import orderBy from &#x27;lodash/orderBy&#x27;;

const items = [
 { name: &#x27;Item A&#x27;, price: 2 },
 { name: &#x27;Item B&#x27;, price: 8 },
 { name: &#x27;Item C&#x27;, price: 4 },
 { name: &#x27;Item D&#x27;, price: 4 }
];

const result = orderBy(items, [&#x27;price&#x27;, &#x27;name&#x27;], [&#x27;desc&#x27;, &#x27;asc&#x27;]);

/*
result =&gt; [
 { name: &#x27;Item B&#x27;, price: 8 },
 { name: &#x27;Item C&#x27;, price: 4 },
 { name: &#x27;Item D&#x27;, price: 4 },
 { name: &#x27;Item A&#x27;, price: 2 }
]
*/
</code></pre>
<h2>chunk</h2>
<blockquote>
Creates an array of elements split into groups of a specified size (if the array can't be split evenly, the final chunk will only contain the remaining elements).
</blockquote>
<pre><code class="language-javascript">import chunk from &#x27;lodash/chunk&#x27;;

const array = [ 1, 2, 3, 4 ];

const result = chunk(array, 2);

// result =&gt; [[1, 2], [3, 4]]
</code></pre>
<h2>take</h2>
<blockquote>
Creates a slice of the array with <code>n</code> elements taken from the beginning.
</blockquote>
<pre><code class="language-javascript">import take from &#x27;lodash/take&#x27;;

const result = take([1, 2, 3], 2);

// result =&gt; [1, 2]
</code></pre>
<h2>difference</h2>
<blockquote>
Creates an array of the values not included in the other given arrays. The order and references of result values are determined by the first array.
</blockquote>
<pre><code class="language-javascript">import difference from &#x27;lodash/difference&#x27;;

const result = difference([1, 2, 3], [2, 3, 4]);

// result =&gt; [1]
</code></pre>
<h2>intersection</h2>
<blockquote>
Creates an array of unique values that are included in all given arrays. The order and references of result values are determined by the first array.
</blockquote>
<pre><code class="language-javascript">import intersection from &#x27;lodash/intersection&#x27;;

const result = intersection([1, 2, 3], [2, 3, 4]);

// result =&gt; [2, 3]
</code></pre>
<h2>isEmpty</h2>
<blockquote>
Checks if the value is an empty object, collection, map, or set (objects are considered empty if they have no own enumerable string keyed properties).
</blockquote>
<pre><code class="language-javascript">import isEmpty from &#x27;lodash/isEmpty&#x27;;

isEmpty({});
// =&gt; true

isEmpty({ name: &#x27;John Doe&#x27; });
// =&gt; false
</code></pre>
<h2>throttle</h2>
<blockquote>
Creates a throttled function that only invokes the passed function at most once per every interval, specified in milliseconds.
</blockquote>
<pre><code class="language-javascript">import throttle from &#x27;lodash/throttle&#x27;;

const throttled = throttle(() =&gt; {
 console.log(&#x27;Throttled after 50ms!&#x27;);
}, 50);

window.addEventListener(&#x27;resize&#x27;, throttled);
</code></pre>
<h2>debounce</h2>
<blockquote>
Creates a debounced function that delays invoking the passed function until after the specified wait time has elapsed since the last time the debounced function was invoked.
</blockquote>
<pre><code class="language-javascript">import debounce from &#x27;lodash/debounce&#x27;;

const debounced = debounce(() =&gt; {
 console.log(&#x27;Debounced after 400ms!&#x27;);
}, 400);

window.addEventListener(&#x27;resize&#x27;, debounced);
</code></pre>
<h2>merge</h2>
<blockquote>
Recursively merges own and inherited enumerable string keyed properties of source objects into the destination object.
</blockquote>
<pre><code class="language-javascript">import merge from &#x27;lodash/merge&#x27;;

const firstObject = { &#x27;A&#x27;: [{ &#x27;B&#x27;: 1 }, { &#x27;C&#x27;: 2 }] };

const secondObject = { &#x27;A&#x27;: [{ &#x27;B&#x27;: 3 }, { &#x27;D&#x27;: 4 }] };

const result = merge(firstObject, secondObject);

// result =&gt; { A: [{ B: 3 }, { C: 2, D: 4 }] }
</code></pre>
<h2>cloneDeep</h2>
<blockquote>
Creates a deep clone of a specified value.
</blockquote>
<pre><code class="language-javascript">import cloneDeep from &#x27;lodash/cloneDeep&#x27;;

const items = [
 { name: &#x27;Item A&#x27; },
 { name: &#x27;Item B&#x27; },
];

const result = cloneDeep(items);

// result[0] === items[0] =&gt; false
</code></pre>
<h2>startCase</h2>
<blockquote>
Converts a string to <a href="https://en.wikipedia.org/wiki/Letter_case#Start_case">start case</a> (the first letter of each word capitalized).
</blockquote>
<pre><code class="language-javascript">import startCase from &#x27;lodash/startCase&#x27;;

startCase(&#x27;--foo-bar--&#x27;);
// =&gt; &#x27;Foo Bar&#x27;

startCase(&#x27;fooBar&#x27;);
// =&gt; &#x27;Foo Bar&#x27;

startCase(&#x27;__FOO_BAR__&#x27;);
// =&gt; &#x27;FOO BAR&#x27;
</code></pre>
<h2>kebabCase</h2>
<blockquote>
Converts a string to <a href="https://en.wikipedia.org/wiki/Letter_case#Kebab_case">kebab case</a> (punctuation is removed, the text is converted to lowercase, and spaces are replaced by single dashes).
</blockquote>
<pre><code class="language-javascript">import kebabCase from &#x27;lodash/kebabCase&#x27;;

kebabCase(&#x27;Foo Bar&#x27;);
// =&gt; &#x27;foo-bar&#x27;

kebabCase(&#x27;fooBar&#x27;);
// =&gt; &#x27;foo-bar&#x27;

kebabCase(&#x27;__FOO_BAR__&#x27;);
// =&gt; &#x27;foo-bar&#x27;
</code></pre>
<h2>snakeCase</h2>
<blockquote>
Converts a string to <a href="https://en.wikipedia.org/wiki/Letter_case#Snake_case">snake case</a> (punctuation is removed, the text is converted to lowercase, and spaces are replaced by single underscores).
</blockquote>
<pre><code class="language-javascript">import snakeCase from &#x27;lodash/snakeCase&#x27;;

snakeCase(&#x27;Foo Bar&#x27;);
// =&gt; &#x27;foo_bar&#x27;

snakeCase(&#x27;fooBar&#x27;);
// =&gt; &#x27;foo_bar&#x27;

snakeCase(&#x27;--FOO-BAR--&#x27;);
// =&gt; &#x27;foo_bar&#x27;
</code></pre>
<h2>camelCase</h2>
<blockquote>
Converts a string to <a href="https://en.wikipedia.org/wiki/Letter_case#Camel_case">camel case</a> (spaces and punctuation are removed and the first letter of each word is capitalized).
</blockquote>
<pre><code class="language-javascript">import camelCase from &#x27;lodash/camelCase&#x27;;

camelCase(&#x27;Foo Bar&#x27;);
// =&gt; &#x27;fooBar&#x27;

camelCase(&#x27;--foo-bar--&#x27;);
// =&gt; &#x27;fooBar&#x27;

camelCase(&#x27;__FOO_BAR__&#x27;);
// =&gt; &#x27;fooBar&#x27;
</code></pre>
That’s all. Thanks! I hope this can help you the next time you write a JavaScript application. <a href="https://lodash.com">Lodash</a> is a very popular open-source library that's worth checking out if you're looking for ways to build web applications faster.

Lodash is one of the most popular open-source JavaScript libraries. It implements a lot of functional programming helpers that make everyday coding easier. It's something I use often in my own development work, and so I wanted to share with you some of the methods that I find myself using a lot.In this short post, we'll go over 15 everyday methods that, when used properly, can speed up development and make your code more readable.shuffleCreates an array of shuffled values (using a version of...

15 useful Lodash methods for everyday coding

These days, the cloud has made it easier for anybody to launch a website or app. One of those services is Heroku, a platform that allows websites to be deployed on runtimes such as Node.js.
Heroku allows you to publish your web application with just one click. And if you're familiar with it, then you already know that you can use shell scripts or launch commands in the terminal to deploy your applications to the cloud. But what if you have a specific build or start script that you might want to run solely on Heroku?
In this article, I will teach you how to set up your Node.js application on Heroku using a build and start script of your choice!
<h2>Heroku-specific build script</h2>
If your app has a build step that you’d like to run when you deploy, you can use a <code>build</code> script in <code>package.json</code> (since March 2019, Node.js deployments will automatically execute an app’s <code>build</code> script during the deployment if one is defined in the app’s <code>package.json</code> file).
<pre><code class="language-json">&quot;scripts&quot;: {
 &quot;start&quot;: &quot;node index.js&quot;,
 &quot;build&quot;: &quot;webpack&quot; // this will automatically run on Heroku
}
</code></pre>
If you want to define some other script rather than <code>build</code> to run specifically on Heroku, you can add a <code>heroku-postbuild</code> to your <code>package.json</code> scripts, which will run instead of the regular <code>build</code> script.
<pre><code class="language-json">&quot;scripts&quot;: {
 &quot;start&quot;: &quot;node index.js&quot;,
 &quot;build&quot;: &quot;ng build&quot;, // will not run on Heroku
 &quot;heroku-postbuild&quot;: &quot;ng build --prod&quot; // if provided, this will run instead
}
</code></pre>
You may also want to run scripts only before or after other Heroku build steps. For instance, you may need to configure npm, git, or ssh before Heroku installs dependencies, or you may need to build production assets after dependencies are installed.
To achieve these Heroku-specific actions, you can use the following scripts:
<ul>
<li>heroku-prebuild:
<ul>
<li>Runs before Heroku installs dependencies.</li>
</ul>
</li>
<li>heroku-postbuild:
<ul>
<li>Runs after Heroku installs dependencies (but before pruning and caches dependencies). If this script is specified, the regular build script will not run.</li>
</ul>
</li>
<li>heroku-cleanup:
<ul>
<li>Runs after Heroku prunes and caches dependencies.</li>
</ul>
</li>
</ul>
<h2>Heroku-specific start script</h2>
By default, Heroku runs <code>npm start</code> while starting deployed Node.js applications, but if you would like to run some other script from your <code>package.json</code> instead you just need to follow one simple step.
Just create a <code>Procfile</code> at the root of your project with your custom start script:
<pre><code>web: npm run my-custom-start
</code></pre>
And that's it! Now Heroku will run <code>my-custom-start</code> instead of the regular <code>start</code> script when you deploy your Node.js app.
<pre><code class="language-json">&quot;scripts&quot;: {
 &quot;start&quot;: &quot;node index.js&quot;, // will not run on Heroku
 &quot;my-custom-start&quot;: &quot;PROD=true node index.js&quot; // this will run instead
}
</code></pre>
<blockquote>
Setting up a Node.js app on Heroku is easy, but still requires some setup to ensure that your app build and starts properly.
</blockquote>
Hopefully, this small guide could help you customize your Heroku app to your specific needs and make your deployment process faster. Thanks!

These days, the cloud has made it easier for anybody to launch a website or app. One of those services is Heroku, a platform that allows websites to be deployed on runtimes such as Node.js.Heroku allows you to publish your web application with just one click. And if you're familiar with it, then you already know that you can use shell scripts or launch commands in the terminal to deploy your applications to the cloud. But what if you have a specific build or start script that you might want to...

How to setup a Node.js app with a custom start and build script on Heroku

There are many ways to speed up your development time when building a web application. For example, if you're creating a web app from scratch, you may want to use a framework to make your development faster. However it’s not always easy to find the right framework for your web application - so you'll probably be tempted to try a lot of different options out. Still, just because there are multiple frameworks doesn't mean they're all equal.
In this article, we'll explore 5 React UI frameworks that I think are worth looking into.
<h2>React UI frameworks and component libraries to look forward in 2022</h2>
Here are the 5 frameworks that we’ll cover in this post:
<ol>
<li>Chakra UI</li>
<li>Material UI</li>
<li>React Bootstrap</li>
<li>Ant Design</li>
<li>Semantic UI React</li>
</ol>
 
<h2><a href="https://chakra-ui.com">Chakra UI</a></h2>
<blockquote>
A simple, modular, and accessible component library
</blockquote>
<img src="/images/posts/5-best-react-ui-frameworks-to-build-web-applications-faster-in-2022/chakra-ui.jpg" alt="Chakra UI">
Chakra UI is a rising open-source library made by <a href="https://twitter.com/thesegunadebayo">Segun Adebayo</a> that empowers developers with the building blocks they need to create robust React apps. It is currently my go-to choice when developing new web applications for its simplicity and design. It provides a wide variety of components, it is easily extensible, and it is packaged with some very useful custom hooks. The beauty of Chakra UI is its simplicity and I would recommend it to anyone looking to bootstrap a new web application using React.
 
<h2><a href="https://mui.com">Material UI</a></h2>
<blockquote>
A robust, customizable, and accessible library of foundational and advanced components
</blockquote>
<img src="/images/posts/5-best-react-ui-frameworks-to-build-web-applications-faster-in-2022/material-ui.jpg" alt="Material UI">
Material UI is one of the most popular open-source component frameworks in the React ecosystem. It is maintained by a group of invaluable contributors, with the massive support and involvement of the community. It offers numerous quality components on its base package, which are free to use and MIT licensed on their community edition. However, some components such as the Data Grid and the Date Ranger Picker have some features locked behind their MUI X Pro package which gets you more components and professional support. Nevertheless, Material UI is still a great choice if you are looking for something powerful, flexible, and that most users are familiar with.
 
<h2><a href="https://react-bootstrap.github.io">React Bootstrap</a></h2>
<blockquote>
The most popular front-end framework, rebuilt for React
</blockquote>
<img src="/images/posts/5-best-react-ui-frameworks-to-build-web-applications-faster-in-2022/react-bootstrap.jpg" alt="React Bootstrap">
Originally named Twitter Blueprint, Bootstrap needs no introduction as it is one of the most popular front-end component libraries. It was made by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a> as a framework to encourage consistency across internal projects at Twitter. React Bootstrap is a wrapper around the original Bootstrap framework which provides most of the components built from scratch as a true React component.
 
<h2><a href="https://ant.design">Ant Design</a></h2>
<blockquote>
A design system for enterprise-level products
</blockquote>
<img src="/images/posts/5-best-react-ui-frameworks-to-build-web-applications-faster-in-2022/ant-design.jpg" alt="Ant Design">
Ant Design has a React UI library that contains a set of high-quality enterprise-class components for building rich, interactive user interfaces. It is written in TypeScript with predictable static types, internationalization support for dozens of languages, and offers powerful theme customization. <a href="https://xtech.antfin.com">XTech</a> had two main goals for this project: build components with a superior design and make the process of developing for the web more accessible for the developers. It is a great choice if you need a complex set of components and it has the support of big brands like Alibaba, Tencent, and Baidu.
 
<h2><a href="https://react.semantic-ui.com">Semantic UI React</a></h2>
<blockquote>
A development framework that helps create beautiful responsive layouts
</blockquote>
<img src="/images/posts/5-best-react-ui-frameworks-to-build-web-applications-faster-in-2022/semantic-ui-react.jpg" alt="Semantic UI React">
Semantic UI React is a jQuery-free integration of the original Semantic UI framework. It uses a unique design that has a declarative API adapted to React. It offers over 50 different components which are very easy to integrate into your project. The only negative aspect I noticed is that some components can be not so easily customizable. Anyway, it is still a solid choice with lots of options for most web applications.
 
<blockquote>
UI frameworks allow to build web applications with less code and much faster. They are flexible and easy to use, so it doesn't matter whether you are a professional or beginner in the React world, these frameworks will defiantly help you get started with creating your web application.
</blockquote>
 
Thanks for reading! Hopefully you enjoyed the article and have now a better understanding of the React UI framework ecosystem.

There are many ways to speed up your development time when building a web application. For example, if you're creating a web app from scratch, you may want to use a framework to make your development faster. However it’s not always easy to find the right framework for your web application - so you'll probably be tempted to try a lot of different options out. Still, just because there are multiple frameworks doesn't mean they're all equal.In this article, we'll explore 5 React UI frameworks that...

5 best React UI frameworks to build web applications faster in 2022

Since it took me a while to find out this information, I decided to put it up here for anyone looking for it and future reference.
<a href="https://momentjs.com">Moment.js</a> is a commonly used library to manipulate dates and times in JavaScript. Here is a gist with a list of all the timezone slugs supported, sorted alphabetically.
Link to the GitHub Gist: <a href="https://gist.github.com/diogocapela/12c6617fc87607d11fd62d2a4f42b02a">List of All Moment.js Timezones</a>
<pre><code>Africa/Abidjan
Africa/Accra
Africa/Addis_Ababa
Africa/Algiers
Africa/Asmara
Africa/Asmera
Africa/Bamako
Africa/Bangui
Africa/Banjul
Africa/Bissau
Africa/Blantyre
Africa/Brazzaville
Africa/Bujumbura
Africa/Cairo
Africa/Casablanca
Africa/Ceuta
Africa/Conakry
Africa/Dakar
Africa/Dar_es_Salaam
Africa/Djibouti
Africa/Douala
Africa/El_Aaiun
Africa/Freetown
Africa/Gaborone
Africa/Harare
Africa/Johannesburg
Africa/Juba
Africa/Kampala
Africa/Khartoum
Africa/Kigali
Africa/Kinshasa
Africa/Lagos
Africa/Libreville
Africa/Lome
Africa/Luanda
Africa/Lubumbashi
Africa/Lusaka
Africa/Malabo
Africa/Maputo
Africa/Maseru
Africa/Mbabane
Africa/Mogadishu
Africa/Monrovia
Africa/Nairobi
Africa/Ndjamena
Africa/Niamey
Africa/Nouakchott
Africa/Ouagadougou
Africa/Porto-Novo
Africa/Sao_Tome
Africa/Timbuktu
Africa/Tripoli
Africa/Tunis
Africa/Windhoek
America/Adak
America/Anchorage
America/Anguilla
America/Antigua
America/Araguaina
America/Argentina/Buenos_Aires
America/Argentina/Catamarca
America/Argentina/ComodRivadavia
America/Argentina/Cordoba
America/Argentina/Jujuy
America/Argentina/La_Rioja
America/Argentina/Mendoza
America/Argentina/Rio_Gallegos
America/Argentina/Salta
America/Argentina/San_Juan
America/Argentina/San_Luis
America/Argentina/Tucuman
America/Argentina/Ushuaia
America/Aruba
America/Asuncion
America/Atikokan
America/Atka
America/Bahia
America/Bahia_Banderas
America/Barbados
America/Belem
America/Belize
America/Blanc-Sablon
America/Boa_Vista
America/Bogota
America/Boise
America/Buenos_Aires
America/Cambridge_Bay
America/Campo_Grande
America/Cancun
America/Caracas
America/Catamarca
America/Cayenne
America/Cayman
America/Chicago
America/Chihuahua
America/Coral_Harbour
America/Cordoba
America/Costa_Rica
America/Creston
America/Cuiaba
America/Curacao
America/Danmarkshavn
America/Dawson
America/Dawson_Creek
America/Denver
America/Detroit
America/Dominica
America/Edmonton
America/Eirunepe
America/El_Salvador
America/Ensenada
America/Fort_Nelson
America/Fort_Wayne
America/Fortaleza
America/Glace_Bay
America/Godthab
America/Goose_Bay
America/Grand_Turk
America/Grenada
America/Guadeloupe
America/Guatemala
America/Guayaquil
America/Guyana
America/Halifax
America/Havana
America/Hermosillo
America/Indiana/Indianapolis
America/Indiana/Knox
America/Indiana/Marengo
America/Indiana/Petersburg
America/Indiana/Tell_City
America/Indiana/Vevay
America/Indiana/Vincennes
America/Indiana/Winamac
America/Indianapolis
America/Inuvik
America/Iqaluit
America/Jamaica
America/Jujuy
America/Juneau
America/Kentucky/Louisville
America/Kentucky/Monticello
America/Knox_IN
America/Kralendijk
America/La_Paz
America/Lima
America/Los_Angeles
America/Louisville
America/Lower_Princes
America/Maceio
America/Managua
America/Manaus
America/Marigot
America/Martinique
America/Matamoros
America/Mazatlan
America/Mendoza
America/Menominee
America/Merida
America/Metlakatla
America/Mexico_City
America/Miquelon
America/Moncton
America/Monterrey
America/Montevideo
America/Montreal
America/Montserrat
America/Nassau
America/New_York
America/Nipigon
America/Nome
America/Noronha
America/North_Dakota/Beulah
America/North_Dakota/Center
America/North_Dakota/New_Salem
America/Ojinaga
America/Panama
America/Pangnirtung
America/Paramaribo
America/Phoenix
America/Port-au-Prince
America/Port_of_Spain
America/Porto_Acre
America/Porto_Velho
America/Puerto_Rico
America/Punta_Arenas
America/Rainy_River
America/Rankin_Inlet
America/Recife
America/Regina
America/Resolute
America/Rio_Branco
America/Rosario
America/Santa_Isabel
America/Santarem
America/Santiago
America/Santo_Domingo
America/Sao_Paulo
America/Scoresbysund
America/Shiprock
America/Sitka
America/St_Barthelemy
America/St_Johns
America/St_Kitts
America/St_Lucia
America/St_Thomas
America/St_Vincent
America/Swift_Current
America/Tegucigalpa
America/Thule
America/Thunder_Bay
America/Tijuana
America/Toronto
America/Tortola
America/Vancouver
America/Virgin
America/Whitehorse
America/Winnipeg
America/Yakutat
America/Yellowknife
Antarctica/Casey
Antarctica/Davis
Antarctica/DumontDUrville
Antarctica/Macquarie
Antarctica/Mawson
Antarctica/McMurdo
Antarctica/Palmer
Antarctica/Rothera
Antarctica/South_Pole
Antarctica/Syowa
Antarctica/Troll
Antarctica/Vostok
Arctic/Longyearbyen
Asia/Aden
Asia/Almaty
Asia/Amman
Asia/Anadyr
Asia/Aqtau
Asia/Aqtobe
Asia/Ashgabat
Asia/Ashkhabad
Asia/Atyrau
Asia/Baghdad
Asia/Bahrain
Asia/Baku
Asia/Bangkok
Asia/Barnaul
Asia/Beirut
Asia/Bishkek
Asia/Brunei
Asia/Calcutta
Asia/Chita
Asia/Choibalsan
Asia/Chongqing
Asia/Chungking
Asia/Colombo
Asia/Dacca
Asia/Damascus
Asia/Dhaka
Asia/Dili
Asia/Dubai
Asia/Dushanbe
Asia/Famagusta
Asia/Gaza
Asia/Harbin
Asia/Hebron
Asia/Ho_Chi_Minh
Asia/Hong_Kong
Asia/Hovd
Asia/Irkutsk
Asia/Istanbul
Asia/Jakarta
Asia/Jayapura
Asia/Jerusalem
Asia/Kabul
Asia/Kamchatka
Asia/Karachi
Asia/Kashgar
Asia/Kathmandu
Asia/Katmandu
Asia/Khandyga
Asia/Kolkata
Asia/Krasnoyarsk
Asia/Kuala_Lumpur
Asia/Kuching
Asia/Kuwait
Asia/Macao
Asia/Macau
Asia/Magadan
Asia/Makassar
Asia/Manila
Asia/Muscat
Asia/Nicosia
Asia/Novokuznetsk
Asia/Novosibirsk
Asia/Omsk
Asia/Oral
Asia/Phnom_Penh
Asia/Pontianak
Asia/Pyongyang
Asia/Qatar
Asia/Qyzylorda
Asia/Rangoon
Asia/Riyadh
Asia/Saigon
Asia/Sakhalin
Asia/Samarkand
Asia/Seoul
Asia/Shanghai
Asia/Singapore
Asia/Srednekolymsk
Asia/Taipei
Asia/Tashkent
Asia/Tbilisi
Asia/Tehran
Asia/Tel_Aviv
Asia/Thimbu
Asia/Thimphu
Asia/Tokyo
Asia/Tomsk
Asia/Ujung_Pandang
Asia/Ulaanbaatar
Asia/Ulan_Bator
Asia/Urumqi
Asia/Ust-Nera
Asia/Vientiane
Asia/Vladivostok
Asia/Yakutsk
Asia/Yangon
Asia/Yekaterinburg
Asia/Yerevan
Atlantic/Azores
Atlantic/Bermuda
Atlantic/Canary
Atlantic/Cape_Verde
Atlantic/Faeroe
Atlantic/Faroe
Atlantic/Jan_Mayen
Atlantic/Madeira
Atlantic/Reykjavik
Atlantic/South_Georgia
Atlantic/St_Helena
Atlantic/Stanley
Australia/ACT
Australia/Adelaide
Australia/Brisbane
Australia/Broken_Hill
Australia/Canberra
Australia/Currie
Australia/Darwin
Australia/Eucla
Australia/Hobart
Australia/LHI
Australia/Lindeman
Australia/Lord_Howe
Australia/Melbourne
Australia/NSW
Australia/North
Australia/Perth
Australia/Queensland
Australia/South
Australia/Sydney
Australia/Tasmania
Australia/Victoria
Australia/West
Australia/Yancowinna
Brazil/Acre
Brazil/DeNoronha
Brazil/East
Brazil/West
CET
CST6CDT
Canada/Atlantic
Canada/Central
Canada/Eastern
Canada/Mountain
Canada/Newfoundland
Canada/Pacific
Canada/Saskatchewan
Canada/Yukon
Chile/Continental
Chile/EasterIsland
Cuba
EET
EST
EST5EDT
Egypt
Eire
Etc/GMT
Etc/GMT+0
Etc/GMT+1
Etc/GMT+10
Etc/GMT+11
Etc/GMT+12
Etc/GMT+2
Etc/GMT+3
Etc/GMT+4
Etc/GMT+5
Etc/GMT+6
Etc/GMT+7
Etc/GMT+8
Etc/GMT+9
Etc/GMT-0
Etc/GMT-1
Etc/GMT-10
Etc/GMT-11
Etc/GMT-12
Etc/GMT-13
Etc/GMT-14
Etc/GMT-2
Etc/GMT-3
Etc/GMT-4
Etc/GMT-5
Etc/GMT-6
Etc/GMT-7
Etc/GMT-8
Etc/GMT-9
Etc/GMT0
Etc/Greenwich
Etc/UCT
Etc/UTC
Etc/Universal
Etc/Zulu
Europe/Amsterdam
Europe/Andorra
Europe/Astrakhan
Europe/Athens
Europe/Belfast
Europe/Belgrade
Europe/Berlin
Europe/Bratislava
Europe/Brussels
Europe/Bucharest
Europe/Budapest
Europe/Busingen
Europe/Chisinau
Europe/Copenhagen
Europe/Dublin
Europe/Gibraltar
Europe/Guernsey
Europe/Helsinki
Europe/Isle_of_Man
Europe/Istanbul
Europe/Jersey
Europe/Kaliningrad
Europe/Kiev
Europe/Kirov
Europe/Lisbon
Europe/Ljubljana
Europe/London
Europe/Luxembourg
Europe/Madrid
Europe/Malta
Europe/Mariehamn
Europe/Minsk
Europe/Monaco
Europe/Moscow
Europe/Nicosia
Europe/Oslo
Europe/Paris
Europe/Podgorica
Europe/Prague
Europe/Riga
Europe/Rome
Europe/Samara
Europe/San_Marino
Europe/Sarajevo
Europe/Saratov
Europe/Simferopol
Europe/Skopje
Europe/Sofia
Europe/Stockholm
Europe/Tallinn
Europe/Tirane
Europe/Tiraspol
Europe/Ulyanovsk
Europe/Uzhgorod
Europe/Vaduz
Europe/Vatican
Europe/Vienna
Europe/Vilnius
Europe/Volgograd
Europe/Warsaw
Europe/Zagreb
Europe/Zaporozhye
Europe/Zurich
GB
GB-Eire
GMT
GMT+0
GMT-0
GMT0
Greenwich
HST
Hongkong
Iceland
Indian/Antananarivo
Indian/Chagos
Indian/Christmas
Indian/Cocos
Indian/Comoro
Indian/Kerguelen
Indian/Mahe
Indian/Maldives
Indian/Mauritius
Indian/Mayotte
Indian/Reunion
Iran
Israel
Jamaica
Japan
Kwajalein
Libya
MET
MST
MST7MDT
Mexico/BajaNorte
Mexico/BajaSur
Mexico/General
NZ
NZ-CHAT
Navajo
PRC
PST8PDT
Pacific/Apia
Pacific/Auckland
Pacific/Bougainville
Pacific/Chatham
Pacific/Chuuk
Pacific/Easter
Pacific/Efate
Pacific/Enderbury
Pacific/Fakaofo
Pacific/Fiji
Pacific/Funafuti
Pacific/Galapagos
Pacific/Gambier
Pacific/Guadalcanal
Pacific/Guam
Pacific/Honolulu
Pacific/Johnston
Pacific/Kiritimati
Pacific/Kosrae
Pacific/Kwajalein
Pacific/Majuro
Pacific/Marquesas
Pacific/Midway
Pacific/Nauru
Pacific/Niue
Pacific/Norfolk
Pacific/Noumea
Pacific/Pago_Pago
Pacific/Palau
Pacific/Pitcairn
Pacific/Pohnpei
Pacific/Ponape
Pacific/Port_Moresby
Pacific/Rarotonga
Pacific/Saipan
Pacific/Samoa
Pacific/Tahiti
Pacific/Tarawa
Pacific/Tongatapu
Pacific/Truk
Pacific/Wake
Pacific/Wallis
Pacific/Yap
Poland
Portugal
ROC
ROK
Singapore
Turkey
UCT
US/Alaska
US/Aleutian
US/Arizona
US/Central
US/East-Indiana
US/Eastern
US/Hawaii
US/Indiana-Starke
US/Michigan
US/Mountain
US/Pacific
US/Pacific-New
US/Samoa
UTC
Universal
W-SU
WET
Zulu
</code></pre>

Since it took me a while to find out this information, I decided to put it up here for anyone looking for it and future reference.Moment.js is a commonly used library to manipulate dates and times in JavaScript. Here is a gist with a list of all the timezone slugs supported, sorted alphabetically.Link to the GitHub Gist: List of All Moment.js TimezonesAfrica/AbidjanAfrica/AccraAfrica/Addis_AbabaAfrica/AlgiersAfrica/AsmaraAfrica/AsmeraAfrica/BamakoAfrica/BanguiAfrica/BanjulAfrica/Biss...

Posts

Learn CSS by playing games

Adding fallback images onto your React projects

15 useful Lodash methods for everyday coding

How to setup a Node.js app with a custom start and build script on Heroku

5 best React UI frameworks to build web applications faster in 2022

List of all Moment.js timezones