10 HTML Tips and Tricks to help you in 2021
HTML has lots of useful elements and attributes that some people don’t know about. Check out this list of 10 HTML Tips and Tricks to help you to achieve better results with HTML.
Here are 10 HTML Tips and Tricks to help you
1) Color Picker
Did you know you can create a nice color picker using only HTML?
Check it out:
<input type="color" id="color-picker"
name="color-picker" value="#e66465">
<label for="color-picker">Pick a color</label>2) Progress bar
You can also create a progress bar using only HTML with the progress element. It can be used in order to show the progress of a task such as a file upload/download.
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>3) Meter tag
You can use the meter element to display measured data within a certain range with min/max/low/high values, such as temperature.
<label for="fuel">Fuel level:</label>
<meter id="fuel"
min="0" max="100"
low="33" high="66" optimum="80"
value="50">
at 50/100
</meter>4) Input search
You can set an input’s type attribute to search to create a search input field. The nice thing is it adds the “x” button that allows the user to quickly clear the field.
<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q"
aria-label="Search through site content">
<button>Search</button>5) Start attribute in ordered lists
You can use the start attribute to specify the start value of an ordered list.
<ol start="79">
<li>Slowpoke</li>
<li>Slowbro</li>
<li>Magnemite</li>
<li>Magneton</li>
</ol>6) Responsive images
Use the picture tag to display different images according to the window size.
It’s useful to make your website more responsive.
<picture>
<source media="(min-width:1050px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/006.png">
<source media="(min-width:750px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/005.png">
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png" alt="Charizard-evolutions" style="width:auto">
</picture>7) Highlight text
Use the mark tag to highlight text. The default color is yellow but you can change it by setting the background-color attribute to any other color you like.
<p>Hi dev friend, this is a
<mark>highlighted text</mark>
made with love by simon paix </p>8) Interactive widget
You can use the details tag to create a native accordion that the user can open and close.
Tip: the summary element should be the first child of the details tag.
<details>
<summary>Click to open </summary>
<p>Hi stranger! I'm the content hidden inside this accordion ;)</p>
</details>9) Native Input Suggestions
You can use the datalist element to display suggestions for an input element.
The input’s list attribute must be equal to the id of the datalist.
<label for="fighter">Pick your fighter</label>
<input list="fighters" name="fighter">
<datalist id="fighters">
<option value="Sub Zero">
<option value="Pikachu">
<option value="Mario">
<option value="Baraka">
</datalist>10) Open all links in a new tab
You can set the base element target attribute to blank so when the user clicks a link it always opens in a new tab. It is useful if you want to avoid users unintentionally leaving a certain page.
However, it includes links to your own domain. If you only want links to a different domain to open in a new tab, you must use JavaScript, instead.
<head>
<base target="_blank">
</head>
<div>
All links will open in a new tab:
<a href="https://learnpine.com/">LearnPine</a>
</div>
10 VS Code Extensions to Fight Technical Debt
Many engineering teams get stuck and cannot ship quality software fast because of technical debt. The best engineering teams I’ve talked to use the right tools to continuously refactor code, improve their codebase communication, and address technical debt.
Here are 10 VS Code Extensions to Fight Technical Debt that’ll help you navigate the production landscape.
10 VS Code Extensions to Fight Technical Debt
Refactoring and Tech Debt Tools
1. Glean
Glean provides refactoring tools for your React codebase: extract JSX into a new component, convert Class Components to Functional Components, wrapping with Hooks. It allows extracting JSX into new components, converting Class Components to Functional Components and vice-verse, wrapping JSX with conditional, renaming state variables and their setters simultaneously, and more.
2. Stepsize
Our team has built Stepsize specifically for Engineering teams to track and prioritize technical debt directly in the VS Code editor. It is an editor-first issue tracker for a healthy codebase that allows engineering teams to:
- Create and view code issues directly from your editor
- Track and prioritize code improvements like technical debt
- Add key issues to your sprints with our Jira integration
3. JavaScript Assistant
JavaScript assistant will help you write modern, clear, and concise code. It offers 48 automated refactorings, cleanups, and actions for JavaScript and TypeScript.
4. Abracadabra, Refactor This!
With Abracadabra, you can quickly and safely refactor existing code in VS Code.
VS Code ships with a few basic refactorings. Abracadabra supercharges your editor with shortcuts to trigger the most useful ones in no time, quick fixes to suggest refactorings when appropriate, options to customize the UX to your needs, refactorings that work with .js, .jsx, .ts, .tsx, and .vue files.
TODOs and Comments
5. TODO Highlight
If you like to mark sections of code with TODO and FIXME tags but keep forgetting about them then this plugin will solve your problem. It highlights TODO or FIXME phrases in the code so that you don’t forget what you wanted to fix or improve.
6. Todo Tree
The Todo Tree extension collects all your tasks scattered throughout the application at your command into one tree on the left side of the editor workspace. You can quickly search your workspace for comment tags like TODO and FIXME, and see them in a tree view.
7. Comment Anchors
Comment Anchors allows you to place anchors within comments or strings to place bookmarks within the context of your code. Anchors can be used to track TODOs, write notes, create foldable sections, or build simple navigation making it easier to navigate your files.
Anchors can be viewed for the current file, or throughout the entire workspace, using an easy-to-use the sidebar. Comment Anchors provides many configuration options, allowing you to tailor this extension to your personal workflow, and increase productivity.
8. New Relic CodeStream
New Relic CodeStream is a developer collaboration platform that integrates essential dev tools into VS Code. Eliminate context-switching and simplify code discussion and code review by putting collaboration tools in your IDE.
- Create and review GitHub and GitLab pull requests
- Get feedback on work-in-progress with pre-PR code reviews
- Code discussions and comments
Automation
9. SonarLint
SonarLint lets you fix coding issues before they exist: like a spell checker, SonarLint highlights Bugs and Security Vulnerabilities as you write code, with clear remediation guidance so you can fix them before the code is even committed. SonarLint in VS Code supports analysis of JavaScript, TypeScript, Python, Java, HTML & PHP code.
10. Code Runner
Run code snippet or code file for multiple languages, such as C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, and many more.
- Run code file of current active Text Editor
- Run code file through the context menu of file explorer
- Run selected code snippet in Text Editor
These 10 VS Code extensions will help you keep your codebase healthy and manage technical debt continuously. Do you use other similar extensions? Share below in the comment section!
7 useful HTML attributes you may not know
HTML is the cornerstone of web development. Yet, many aspiring programmers merely skim the surface and move on to CSS, JS, etc, missing its entire potential.
This is a list of 7 useful HTML attributes you may not know, but that can be helpful.
Please, let me know in the comments if you would like to add any other attribute to the list and I’ll check it out 😉
7 useful HTML attributes you may not know
1) Multiple
The multiple attribute allows the user to enter multiple values on an <input>. It is a boolean attribute valid for file or email input types and the <select> element.
For an email input, if and only if the multiple attribute is specified, the value can be a list of comma-separated email addresses. Any whitespace is removed from each address in the list.
For a file input, the user can select multiple files in the as usual (holding down Shift or Crtl).
<input type="file" multiple>2) Accept
The <input> element has the accept attribute that allows you to specify the types of files the user can upload.
You need to pass it a string containing a comma-separated list of unique file type specifiers.
You can also use it to specify only audio, image, or video format.
<input type="file" accept=".png, .jpg">3) Contenteditable
Contenteditable is a global attribute (common to all HTML elements) that makes the HTML content editable by the user or not. However, be careful with changes only made to visible content vs the DOM content.
<div contenteditable="true">I'm a cool editable div ;)</div>4) Spellcheck
The spellcheck is another global attribute that you can use to check spelling and grammar on HTML elements such as input fields and other editable elements.
Note: Typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking.
<p contenteditable="true" spellcheck="true">
Thanks furr checkinng my speling :)</p>5) Translate
translate tells the browser whether the content should be translated or not.
For instance, you can use it to prevent Google Translate from automatically trying to translate your company’s or brand’s name.
<footer><p translate="no">LearnPine</p></footer>6) Poster
Use the poster attribute to specify an image to be shown while the video is downloading, or until the user hits the play button.
If the image isn’t specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.
<video controls
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>7) Download
Use the download attribute combined with an <a> element to instruct browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file.
You can also specify the file name.
<a href="index.html" download="fileName">Download me :)</a>
