📌 HTML Units

→ CSS has several different units for expressing a length.

→ Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

→ Length is a number followed by a length unit, such as 10px, 2em, etc.

→ A whitespace cannot appear between the number and the unit.

→ However, if the value is 0, the unit can be omitted.

→ For some CSS properties, negative lengths are allowed.

📌 Types Of Units

→ There are two types of length units:

1️⃣ Relative Units

→ em, vh, ex, ch, rem, vh, vmin, vmax, %

2️⃣ Absolute Units

→ px, pt, pc, mm, cm, in

1️⃣ Relative Units

→ Relative length units specify a length relative to another length property.

→ Relative length units scale better between different rendering medium.

2️⃣ Absolute Units

→ The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

→ Absolute length units are not recommended for use on screen, because screen sizes vary so much.

→ However, they can be used if the output medium is known, such as for print layout.

→ Pixels (px) are relative to the viewing device.

→ For low-dpi devices, 1px is one device pixel (dot) of the display.

→ For printers and high resolution screens 1px implies multiple device pixels.

📌 Difference Between PX, EM and Percent

→ Pixel is a static measurement, while percent and EM are relative measurements.

→ The size of an EM or percent depends on its parent.

→ If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16).

Thanks for reading this thread ❤️

If you like it , make sure you:

🔷 Like the tweet
🔷 Retweet the first tweet ⚡

For more content , follow:

@MrunayU

You can read the unrolled version of this thread here: https://typefully.com/MrunayU/Cb7tXoT

About HTML Units

🔷 Best HTML Tips For Web Developers

A Thread🧵 👇

1️⃣ The Figure Element

→ There unfortunately isn't any easy or semantic way to associate the caption, wrapped in the paragraph tag, with the image element itself.

→ HTML5 rectifies this, with the introduction of the <figure> element.

→ When combined with the element, we can now semantically associate captions with their image counterparts.

2️⃣ No More Types For Scripts And Links

→ You possibly still add the type attribute to your (ink and script tags.

→ There is no longer necessary.

→ It's implied that both of these tags refer to stylesheets and scripts, respectively.

→ As such, we can remove the type attribute all together.

3️⃣ Make Your Content Editable

→ The new browsers have a nifty new attribute that can be applied to elements, called contenteditable.

→ As the name implies, this allows the user to edit any of the text contained within the element, including its children.

4️⃣ The Semantic Header And Footer

→ Divs, by nature, have no semantic structure - even after an I'd is applied.

→ Now, with HTML5, we have access to the
and elements.

→ The mark-up above can now be replaced with:-

5️⃣ Icon Adder

→ This tricks is used to add icons on the place of favicon.

→ You just need a path for the source file.

→ Include the <link> tag inside of the <body> tag.

→ This will place an icon on your favicon place.

6️⃣ Voice Recognition

→ This tricks is used to add voice search in the input field.

→ Like Google search, it searches on by voice recognition.

→ Note:- This will only work on mobile devices (Lolipop only Google Chrome).

You can read the unrolled version of this thread here: https://typefully.com/MrunayU/HVAIB3z

Best HTML Tips For Web Developers

🔷 GitHub Repos You Can't Miss

A Thread🧵 👇

📌 What is a repository?

→ Basically a repo is short for repository.

→ A repository is like a container, it stores your files. It is stored with a history of changes you've made.

→ If you don't get what a repo is storing or its purpose, you can read the repo's README.md file.

⛔ Here are some repositories you need to check👇

📌 ossu/computer-science

→ The OSSU curriculum is a complete education in computer science using online materials.

🔗 https://github.com/ossu/computer-science

📌 public-apis/public-apis

→ A nice and frequently updated collection of public apis.

→ The APIs are even broken down into categories making it much easier to browse through them.

🔗 https://github.com/public-apis/public-apis

📌 swisskyrepo/PayloadsAllTheThings

→ This repository is a list of useful payloads and bypasses for Web Application security.

🔗 https://github.com/swisskyrepo/payloadsAllTheThings

📌 EbookFoundation/free-programming-books

→ In this repository, you can get various free books related to various programming topics.

🔗 https://github.com/EbookFoundation/free-programming-books

📌 freeCodeCamp

→ FreeCodeCamp is a great place to get started with programming on youtube, their website and even Github.

🔗 https://github.com/freeCodeCamp/freeCodeCamp

📌 jwsham/coding-interview-university

→ "Googley-as-heck" created this repository to document his 8-month process of preparing for a Google Interview and you can spend less time thanks to this repo.

🔗 https://github.com/jwasham/coding-interview-university

📌 trekhleb/javascript-algorithms

→ This repository contains algorithms and data structures implemented in Javascript with explanations and links to further readings.

🔗 https://github.com/trekhleb/javascript-algorithms

You can read the unrolled version of this thread here: https://typefully.com/MrunayU/qXD2XVY

GitHub Repos You Can't Miss

🔷 VS Code Tricks You Must Know

A Thread🧵 👇

✅ Multiple Cursors

👉 To add cursors at arbitrary positions, select a position with your mouse and use ALT + CLICK.

✅ Move Line up & Down

👉 To move a whole line up & down, put the cursor on that line and use ALT + UP OR ALT + DOWN.

✅ Copy Line up & Down

👉 To copy a whole line up or down, put the cursor on that line and use SHIFT + ALT + UP OR SHIFT + ALT + DOWN.

✅ Rename A Symbol

👉 To Rename a symbol, select the symbol then press F2.

👉 Write a new name and hit enter.

👉 All occurrences will be updated.

✅ Code Formatting

👉 To Format the currently selected source code use CTRL + K CTRL + F & for the whole document use Shift + Alt + F.

You can read the unrolled version of this thread here: https://typefully.com/MrunayU/eFJnIVZ

VS Code Tricks You Must Know

🔷 Top 3 Ways To Align Item To Center

A Thread🧵 👇

1️⃣  This method just uses 4 lines of CSS code.

Your item is now centered Horizontally and vertically in the webpage ( responsively).

2️⃣ Now second way is using position absolute method in this method the parent element should have position: relative and then the item you are centering should have position: absolute to center it.

👆Here you see that the parent element have position relative to it and the center item ( the item we need to center) has position absolute if you not put this then it will not work.

3️⃣ Now third way is how to center the item to center by using just 3 lines of codes.

You can read the unrolled version of this thread here: https://typefully.com/MrunayU/cSRnBrv

Top 3 Ways To Align Item To Center

🔷 8 HTML Tips You Must Know

A Thread🧵 👇

1️⃣ Capture attribute to open your device camera

→ Just as the input tag has attributes for email, text and password, there is also an attribute to open the camera of mobile devices to capture images.

→ This is done with the capture attribute which can take two values:

• user for the front camera.
• environment for the back camera.

2️⃣ Automatic website refresh

→ You can set your website to refresh after a given amount of time from the head tag!

→ This snippet refreshes the website every 10 seconds.

3️⃣ Activate spellcheck

→ You can use the HTML spellcheck attribute and set it to true to activate it.

→ Specify the language to be used using the lang attribute.

→ It is a standard attribute and is supported by most browsers.

4️⃣ Specify file type to be uploaded

→ You can specify the file types users are permitted too upload in the input tag using the accept attribute.

5️⃣ Prevent translation

→ Setting the translate attribute to no, prevents translation.

→ This is important in case where you don't want a phrase or word to be translated, for example your logo, company or brand name.

6️⃣ Entering multiple items into the input tag

→ This can be done with the multiple attribute.

→ It works for both files and emails.

→ For emails, separate each email by a comma.

7️⃣ Creating a poster (thumbnail) for your videos

→ With the poster attribute, you can create an image which is displayed while the video is downloading, or until the user hits the play button.

→ If this is not included, the first frame of the video will be used instead.

8️⃣ Automatically download on link click

→ If you want a particular resource to be downloaded when a link to the target resource is clicked, add the download attribute.

You can read the unrolled version of this thread here: https://typefully.com/MrunayU/F6frJOo

8 HTML Tips You Must Know

🔷 5 Things You Need To Know About <input> Tag

A Thread🧵 👇

1️⃣ Focus

→ The :focus selector comes into action when we click the input element and we can type content in the input field.

→ Suppose we don't have a border in our <input> tag, we can implement this using:

→ But, when we begin to type content in our input label, we get those borders back again.

→ So, a simple solution to this problem will be:

2️⃣ Autocomplete

→ Autocomplete helps us to complete input fields, but sometimes it becomes irritating and suggests wrong details.

→ A method to turn off autocomplete would be:

3️⃣ File input

→ Sometimes, text content is not what we want to send, it might be images, gifs, videos, etc.

→ We can send this type of data using the type="file" attribute.

→ Usually, we use e.target.value to access the input value, but here we can access the file data using e.target.files[0].

→ It contains the details of the file like its name, path, etc in form of an object.

→ The 'no file chosen" text is black by default, you can change this to any color using input[type="file].

4️⃣ Autofocus

→ The input autofocus attribute specifies that an input field should automatically get focus when the page loads.

⛔ Example: While editing/making blogs, when we land on the edit blog page, we would want the input to be in focus.

5️⃣ Input list attribute

→ Want the user to choose from a specific list of options?

→ We can use the list attribute. Let's look at an example:

You can read the unrolled version of this thread here: https://typefully.com/MrunayU/MuPVRLD

5 Things You Need To Know About <input> Tag

🔷 About HTML Web Workers API - 2

A Thread🧵 👇

📌 Terminate a Web Worker

→ When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.

→ To terminate a web worker, and free browser/computer resources, use the terminate() method.

📌 Check Web Worker Support

→ Before creating a web worker, check whether the user's browser supports it.

📌 Reuse the Web Worker

→ If you set the worker variable to undefined, after it has been terminated, you can reuse the code.

📌 Web Workers and the DOM

→ Since web workers are in external files, they do not have access to the following JavaScript objects:-

• The window object
• The document object
• The parent object

📌 Full Web Worker Example Code

→ We have already seen the Worker code in the .js file.

→ Below is the code for the HTML page.

You can read the unrolled version of this thread here: https://typefully.com/MrunayU/nRZTm3Q

About HTML Web Workers API - 2

🔷 About HTML Web Workers API - 1

A Thread🧵 👇

📌 What is a Web Worker?

→ A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page.

→ When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

→ You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

📌 Create a Web Worker File

→ Now, let's create our web worker in an external JavaScript.

→ Here, we create a script that counts.

→ The script is stored in the "demo_workers.js" file.

→ The important part of the code above is the postMessage() method - which is used to post a message back to the HTML page.

⛔ Note:- Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.

📌 Create a Web Worker Object

→ Now that we have the web worker file, we need to call it from an HTML page.

→ The following lines checks if the worker already exists, if not - it creates a new web Worker object and runs the code in "demo_workers.JS".

→ Then we can send and receive messages from the web worker.

→ Add an "onmessage" event listener to the web worker.

→ When the web worker posts a message, the code within the event listener is executed.

→ The data from the web worker is stored in event.data.

You can read the unrolled version of this thread here: https://typefully.com/MrunayU/5ORwAP3

About HTML Web Workers API - 1

🔷 CSS Libraries For Beautiful Image Hover Effects

A Thread🧵 👇

📌 Image Hover Effects

→ In this page you will find a nice collection of 16 hover images effects with captions.

→ Grab the HTML and CSS code for each effect by hovering over the images, then clicking Show Code.

🔗 https://github.com/miketricking/bootstrap-image-hover

📌 Image Caption Hover Animation

→ Here are 4 cool caption animations that run when one hovers over the image.

→ The effects are built with pure CSS3 transitions and transform, and no Javascript, to increase compatability across browser.

🔗 https://hasinhayder.github.io/ImageCaptionHoverAnimation/

📌 iHover

→ iHover is a collection of hover effects powered by CSS3.

→ There are 20 circle hover effects and 15 square hover effects.

→ To use the effects, you will need to write some HTML markup and include the CSS files.

🔗 https://gudh.github.io/ihover/dist/

📌 Image Hover

→ This library contains 44 effects made with pure CSS.

→ Some of the effects include fades, pushes, slides, hinges, reveals, zooms, blurs, flips, folds and shutters, in multiple directions.

🔗 https://imagehover.io/

📌 Hover CSS

→ Hover CSS lets you add hover effects to any element, such as a button, link or image.

→ The effects include 2D transitions, background transitions, border, Shadow and Glow transitions, and more.

🔗 https://ianlunn.github.io/Hover/

📌 Hover Effect Ideas

→ This image hover demo made by Codrop, gives you inspiration when making smooth transitions between images and its captions.

→ There are total 30 effects on two sets with tutorials and the source code.

🔗 https://tympanus.net/Development/HoverEffectIdeas/

You can read the unrolled version of this thread here: https://typefully.com/MrunayU/wvBpz4b