html-tips-tricks reviews and mentions

• How to create a countdown timer using React Hooks
  3 projects | dev.to | 1 Feb 2022

  import React from 'react'; import DateTimeDisplay from './DateTimeDisplay'; import { useCountdown } from './hooks/useCountdown'; const ExpiredNotice = () => { return (

  Expired!!!

  Please select a future date and time.

  ); }; const ShowCounter = ({ days, hours, minutes, seconds }) => { return (

  :

  :

  :

  ); }; const CountdownTimer = ({ targetDate }) => { const [days, hours, minutes, seconds] = useCountdown(targetDate); if (days + hours + minutes + seconds <= 0) { return ; } else { return ( ); } }; export default CountdownTimer;

• I have made a kickass automated portfolio site with Next.js. Here is how.
  1 project | /r/Indiewebdev | 6 Sep 2021

  Here is the link to the website: https://tapasadhikary.com

• 10 trivial yet powerful HTML facts you must know
  1 project | dev.to | 5 Apr 2021

  , , , , , -, , , , , 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 mode

  In 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 mode

  To 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>

• 16 side project GitHub repositories you may find useful
  15 projects | dev.to | 19 Jan 2021

  atapas / html-tips-tricks

• A note from our sponsor - InfluxDB
  www.influxdata.com | 26 Apr 2024

  Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →