html-tips-tricks
create-react-app
html-tips-tricks | create-react-app | |
---|---|---|
4 | 576 | |
316 | 101,923 | |
- | 0.2% | |
0.0 | 1.5 | |
7 months ago | 4 days ago | |
HTML | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
html-tips-tricks
-
How to create a countdown timer using React Hooks
import React from 'react'; import DateTimeDisplay from './DateTimeDisplay'; import { useCountdown } from './hooks/useCountdown'; const ExpiredNotice = () => { return (
Expired!!!); }; const ShowCounter = ({ days, hours, minutes, seconds }) => { return (Please select a future date and time.
:
:
:
-
I have made a kickass automated portfolio site with Next.js. Here is how.
Here is the link to the website: https://tapasadhikary.com
-
10 trivial yet powerful HTML facts you must know
, , , , , -, , , , , many others. Example of the Inline elements: , , , , , , , , , , many more.
8. Autofocus
The
autofocus
attribute helps to get focus on an input element automatically when the page loads.
action="/action.do"> for="uname">Username: type="text" id="uname" name="uname" autofocus>
for="password">Password: type="password" id="password" name="password">
type="submit">Enter fullscreen mode Exit fullscreen modeIn the example above, the Username text field gets the focus automatically when the page loads.
9. Autocomplete
Like autofocus,
autocomplete
is another attribute that comes in handy with the form element's input fields. The autocomplete attribute provides automated suggestions filling out the form field values.
type="email" id="email" name="email" autocomplete="on">
Enter fullscreen mode Exit fullscreen modeTo
autocomplete
to work the following four conditions to satisfy,- The autocomplete attribute works on
,
</code>, and <code><select></code> elements.</li> <li>The element must have a name and/or id specified.</li> <li>The element must be enclosed within a <code>form</code> element.</li> <li>The enclosing form must have a submit button.</li> </ul> <p>Read more about the autocomplete attribute values and the administrative levels from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete">here</a>. </p> <h1> <a name="10-the-raw-iframe-endraw-is-not-always-bad" href="#10-the-raw-iframe-endraw-is-not-always-bad" class="anchor"> </a> 10. The <code>iframe</code> is not always bad </h1> <p>Honestly, it is a separate article topic by itself. But, let me try giving an overview here. The iframe(inline frame) is one of the controversial, abused and oldest HTML tags. It is used to embed another HTML document inside the current HTML. You can embed a video from YouTube, any 3rdparty advertisements, Payment gateways, in fact, a complete webpage itself.</p> <p>Here is an example of embedding my website in a 500x500 <code>iframe</code>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><iframe</span> <span class="na">src=</span><span class="s">"https://www.tapasadhikary.com/"</span> <span class="na">height=</span><span class="s">"500px"</span> <span class="na">width=</span><span class="s">"500px"</span><span class="nt">></iframe></span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Over the decades, hundreds of thousands of articles have been written to show how bad the <code>iframe</code> is and why to avoid it in practice. Most of the claims made as disadvantages are very true. However, it would be too pessimistic to write off <code>iframe</code> altogether, thinking that we can not use it in our app.</p> <p>What are the major problems with iframes, and how can we still use them by avoiding them?</p> <ul> <li> <strong>Security:</strong> As we embed third-party site and content using iframe, we hardly have control over it. This increases the security risk as some malicious content, unwanted popups, etc., may get into our app. The <code>iframe</code> has two special attributes, <code>sandbox</code> and <code>allow</code>, that help you safeguard some of these security concerns.</li> </ul> <p>With the <code>sandbox</code> attribute, we can state what kind of privileges we want to give to the iframe and what to allow, and whatnot. Below is a code example where the iframe can only submit the form and open popup dialog.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code> <span class="nt"><iframe</span> <span class="na">sandbox=</span><span class="s">"allow-forms allow-popups"</span> <span class="na">src=</span><span class="s">"https://www.tapasadhikary.com/"</span><span class="nt">></iframe></span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Similarly, with the <code>allow</code> attribute(works on Chrome so far), we can specify the features(battery, camera, autoplay, etc.) to access and perform by the iframe.</p> <ul> <li> <strong>Speed:</strong> The <code>iframe</code> may make your app slower. It is because the memory consumption goes higher with usages of every iframe. You can avoid the slag by lazy loading your iframes. To do that, add the attribute <code>loading=" lazy</code> to your iframe tag. It will load the iframe only when it is required. </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight html"><code> <span class="nt"><iframe</span> <span class="na">src=</span><span class="s">"https://tapasadhikary.com/"</span> <span class="na">loading=</span><span class="s">"lazy"</span><span class="nt">></iframe></span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <ul> <li> <strong>SEO:</strong> The search engine considers the content from the iframe belongs to another website. While iframe doesn't have a strong negative impact on SEO, it doesn't positively impact either. It is a better SEO practice to avoid iframe from the main page of the website/app. <a href="https://www.boostability.com/content/the-affect-of-iframes-on-seo">Check out this article</a> to learn more about iframe and SEO.</li> </ul> <p>It is important to know the iframe attributes and possibilities to use them in practice. You may have better chances to use iframe than completely banning it.</p> <hr> <br> If you enjoyed this article or found it helpful, let's connect. You can find me on <a href="https://twitter.com/tapasadhikary">Twitter(@tapasadhikary)</a> sharing thoughts, tips, and code practices. <p>You may also like,</p> <ul> <li><a href="https://blog.greenroots.info/10-useful-html5-features-you-may-not-be-using-ckdua7ql300l1m3s1ez7teshc">10 useful HTML5 features, you may not be using</a></li> <li><a href="https://blog.greenroots.info/10-vs-code-emmet-tips-to-make-you-more-productive-ckknjvxal028f1qs18w20e94t">10 VS Code emmet tips to make you more productive</a></li> <li><a href="https://blog.greenroots.info/10-useful-html-file-upload-tips-for-web-developers-ckgetegpf0c7go9s123wvg7bi">10 useful HTML file upload tips for web developers</a></li> </ul> <p>P.S. I love Coffee ☕. <a href="https://www.buymeacoffee.com/greenroots"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y61HrVIM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" loading="lazy"></a></p>
- The autocomplete attribute works on
-
16 side project GitHub repositories you may find useful
atapas / html-tips-tricks
create-react-app
-
Top 12+ Battle-Tested React Boilerplates for 2024
Create React App (CRA) abstracts away the complexity of configuring Webpack, Babel, and other build tools, allowing developers to focus on writing React code. It includes features such as hot module reloading for efficient development.
-
Integration of Angular, Vue.js and React with .NET: Creating a Modern Web Experience
Immerse yourself in the official Create React App documentation for a deeper understanding.
-
Free Resources Every Web Developer Should Know About
Create React App (https://create-react-app.dev/)
-
Learn CSS Layout the Pedantic Way
- And ofc, there are some templates/frameworks that bring something of that together (https://create-react-app.dev/; maybe https://vitejs.dev/) - google for templates.
I recommend finding some friend with modern experience or at least some youtube tutorials or at least some learning course. That would help you to catch up on the best way to bootstrap your first project. Then you can practice.
-
React Labs: What We've Been Working On – February 2024 – React Compiler
What's the connection?
Also, take a look at this response from 2021: https://github.com/facebook/create-react-app/discussions/117...
- JamesCheng wants to pay 0 USD to have this issue fixed
-
Getting Started with React: An Introduction and Setup Guide
Create React App Documentation
- Membangun Aplikasi To-Do List dengan React.js dan Tailwind CSS
-
Build and Deploy a ReactJS App to AWS EC2 with Docker, NGINX, and Automate with GitHub Actions.
Inside the react-tutorial-app folder, to create a new React project runs the following command using create-react-appand for more details on how create-react-app works and other staff, please visit the official website: https://create-react-app.dev/
-
🌟 Unleashing React Code Splitting: The Epic Guide! 🚀
Before we embark on our journey, make sure you have React installed and a React project set up. If not, fear not! Create React App is your trusty sidekick for a quick start.
What are some alternatives?
covid-19 - COVID-19 World is yet another Project to build a Dashboard like app to showcase the data related to the COVID-19(Corona Virus).
craco - Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
imaginary - imaginary is an image gallery built using Gatsby and Cloudinary. Follow this project to know more.
vite - Next generation frontend tooling. It's fast!
theme-builder - The theming system helps you in building a theme of your choice and apply it to test live. Why wait? Just give it a try.
nx - Smart Monorepos · Fast CI
notifyme - react-notification-timeline is a react based component helps in managing the notification in time-based manner.
nwb - A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
add-copyright - This is a Script to Automate adding the Copyright text to one or more source files Recursively.
react-boilerplate - :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
react-play - react-play is an opensource platform that helps you learn ReactJS faster with hands-on practice model. It is a collection of projects that you can use to learn ReactJS.
turborepo - Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turborepo and Turbopack. [Moved to: https://github.com/vercel/turbo]