JavaScript tips you won't see in most tutorials.

🧵
1. Copy to clipboard

You can use the `Clipboard` API to create the “Copy to clipboard” functionality: ```javascript function copyToClipboard(text) {   navigator.c
2. "Go back" button

Use the `history.back()` to create a “Go Back” button. The image contains a code block.  ```html <button onclick=&q
3. `console.table()`

You can use the `console.table()` method to display tabular data as a table:
4. You can wrap your console.log() arguments with curly brackets to see the variable names. ```javascript const myNumber = 123; // Instead of doing this
5. Capture right clicks (user attempts to open a context menu). ```javascript window.oncontextmenu = (event) => {   // Do st
6. Get min/max value from an array

You can use `Math.min()` or `Math.max()` combined with the spread operator to find the minimum or maximum value in an array. ```javascript const numbers = [6, 8, 1, 3, 9];  console.log(
7. Run event listener only once

If you want to add an event listener but have it run only once, you can use the ` once` option: ```javascript element.addEventListener('click', () => consol
8. Numbers separators

To improve readability for numbers, you can use underscores as separators: ```javascript const largeNumber = 1_000_000_000;  console.lo
9. Use the `window.print()` to create a "print page" functionality. ```html <button onclick="window.print()">   Print
10. Use the `Fullscreen API` to open any element in full-screen mode. ```javascript const fullScreenButton = document.getElementBy
11. Use the `dataset` property to access the element's custom data attributes (data-*): ```html <div id="user" data-name="John Doe&qu
12. You can use `Set` to remove duplicate elements from an array: ```javascript const numbers = [2, 3, 4, 4, 2];  console.log(
If you're learning HTML, CSS or JavaScript be sure to follow me and never miss tips like this.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Marko ⚡ Denic

Marko ⚡ Denic Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @denicmarko

22 Oct
Useful websites for developers.

🧵
1. Erase bg (@erase_bg)

Remove background from images and download high-resolution images for free. You can also edit and resize images as you like.

Link: erase.bg
2. vscode.dev (@code)

When you go to vscode.dev, you'll be presented with a lightweight version of VS Code running fully in the browser. No install required.

Link: vscode.dev
Read 8 tweets
20 Oct
CSS tips you won't see in most tutorials.

🧵
1. When you work with transparent images you can use the `drop-shadow()` filter function to create a shadow on the image's content, instead of `box-shadow` property which creates a rectangular shadow behind an element's entire box:

filter: drop-shadow(2px 4px 8px #585858); Two images shown. One with rectangular shadow around whole i
2. Center anything

Easily center anything, horizontally and vertically, with 3 lines of CSS: ```css .center {   display: flex;   align-items: center;   j
Read 18 tweets
17 Oct
Useful websites for web developers.

🧵
1. Mockuper (by Enrico Toniato)

The free mockups generator to create custom images to show your awesome projects.

Link: mockuper.net
2. Poet (by @reviews_experts)

Capture and share Twitter posts as beautiful images.

Link: poet.so
Read 8 tweets
7 Oct
CSS generators can save you a lot of time and effort.

🧵
1. Buttons CSS generator

100+ buttons you can use in your project.

Link: markodenic.com/tools/buttons-…
2. Neumorphism/Soft UI generator

CSS code generator that will help with colors, gradients, and shadows to adopt this new design trend or discover its possibilities.

Link: neumorphism.io
Read 12 tweets
5 Oct
10 JavaScript Array methods to simplify your code.

🧵
1. filter()

The `filter()` method creates a new array with all elements that pass the test implemented by the provided function.  ```javascript const words = ['HTML', 'CSS', 'JavaScript', '
2. forEach()

The `forEach()` method executes a provided function once for each array element. ```javascript const words = ['HTML', 'CSS', 'JavaScript'];
Read 13 tweets
1 Oct
HTML tips you won't see in most tutorials.

🧵
1. The `loading=lazy` attribute

You can use the `loading=lazy` attribute to defer the loading of the image until the user scrolls to them. <img src='image.jpg' loading='lazy' alt='Alternative Text'>
2. Use the `<datalist>` element to create native HTML autocomplete. Codepen preview.  HTML code:   <div class="wrapper"
Read 21 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(