Marko Denic Profile picture
Oct 29, 2021 14 tweets 4 min read Read on X
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

Jun 10
Certifications you can take { for free }:
In this thread, you will find websites where you can get free certifications.

Software Engineering, Marketing, Project Management...
1/ Digital Marketing (by @Google)

There are 26 modules to explore, all created by Google trainers, and packed with practical exercises and real-world examples to help you turn knowledge into action.

learndigital.withgoogle.com/digitalgarage/…
Read 9 tweets
Jun 5
Use `console.log()` like a pro.

Using `console.log()` for JavaScript debugging is the most common practice. But, there is more…

🧵
1/ The most common Console methods:

console.log() – For general output of logging information.
console. info() – Informative logging.
console.debug() – A message to the console with the log level debug.
console.warn() – A warning message.
console.error() – An error message. Image
2/ Custom CSS styles for a console.log():

The `console.log` output can be styled in DevTools using the CSS format specifier. Image
Read 15 tweets
May 13
CSS generators can save you a lot of time and effort.

Here are the 10 most useful CSS generators:
1. Buttons CSS generator

100+ buttons you can use in your project.

markodenic.com/tools/buttons-…
2. CSS Grid Generator

cssgrid-generator.netlify.app
Image
Read 12 tweets
Mar 14
HTML templates you can use { for free }:
1. HTMLrev

Free HTML templates created to power up your online projects.

htmlrev.com
Image
2. UIdeck

Free HTML Landing Page Templates and UI Kits.

uideck.com
Image
Read 6 tweets
Feb 29
CSS tips you won't see in most tutorials:
1/ Create a beautiful text portrait with a few lines of CSS: Image
2/ 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); Image
Read 18 tweets
Feb 21
HTML tips you won't see in most tutorials:
1/ The `meter` element

You can use the `<meter>` element to display quantities. No JavaScript/CSS is needed. Image
2/ Use the `<datalist>` element to create a native HTML autocomplete. Image
Read 17 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

Don't want to be a Premium member but still want to support us?

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

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(