<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Luciano Menezes</title>
    <description>The latest articles on DEV Community by Luciano Menezes (@luciano655).</description>
    <link>https://dev.to/luciano655</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1281073%2Ff011b5d8-a3ee-4a7c-bd7e-e2a13f88d0fa.png</url>
      <title>DEV Community: Luciano Menezes</title>
      <link>https://dev.to/luciano655</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/luciano655"/>
    <language>en</language>
    <item>
      <title>🎥 Why is it almost impossible to create a social media with videos - Daykeeper</title>
      <dc:creator>Luciano Menezes</dc:creator>
      <pubDate>Tue, 05 Aug 2025 04:18:11 +0000</pubDate>
      <link>https://dev.to/luciano655/why-is-it-almost-impossible-to-create-a-social-media-with-videos-daykeeper-kna</link>
      <guid>https://dev.to/luciano655/why-is-it-almost-impossible-to-create-a-social-media-with-videos-daykeeper-kna</guid>
      <description>&lt;p&gt;Currently, I’m a 16-year-old student, and since January 2024, I’ve been developing DayKeeper on my own — a social network with a different proposal: turning each day into a meaningful memory. Inspired by platforms like Twitter and Instagram, DayKeeper lets users make daily posts with text, images, and videos.&lt;/p&gt;

&lt;p&gt;Over time, the idea has gone through many changes. A lot has changed: the project’s vision matured, features were redesigned, and the code… well, most of the code has been rewritten several times. One of the biggest challenges so far? &lt;strong&gt;Supporting video uploads in a scalable, secure, and affordable way.&lt;/strong&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  DayKeeper’s Environment
&lt;/h1&gt;

&lt;p&gt;To understand the problem, you first need to understand the project’s environment:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Database:&lt;/strong&gt; MongoDB&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;File storage:&lt;/strong&gt; AWS S3 (images and videos)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Content moderation:&lt;/strong&gt; Amazon Rekognition&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Video verification notifications:&lt;/strong&gt; Amazon SNS (Simple Notification Service)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Of course, along with many other things, like &lt;strong&gt;nodemailer&lt;/strong&gt; for emails, &lt;strong&gt;passport&lt;/strong&gt; for third-party login, &lt;strong&gt;firebase&lt;/strong&gt; for mobile app notifications, etc.&lt;/p&gt;

&lt;p&gt;To understand what happens when a user creates a post, here’s the route:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;router&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/create&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;checkTokenMW&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nf"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;multerConfig&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;both&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;array&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;files&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="nx"&gt;handleMulterError&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;createMediaDocsMW&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;detectInappropriateFileMW&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;postValidation&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;createPost&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or explained:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;checkTokenMW&lt;/code&gt;: Makes sure the user is authenticated.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;multer(...)&lt;/code&gt;: Middleware to upload files (images or videos).&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;handleMulterError&lt;/code&gt;: Handles upload errors.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;createMediaDocsMW&lt;/code&gt;: Creates documents in the "media" collection, separating files from the post.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;detectInappropriateFileMW&lt;/code&gt;: Uses Rekognition to moderate files. Images are moderated instantly; videos go through asynchronous analysis.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;postValidation&lt;/code&gt;: Validates post data.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;createPost&lt;/code&gt;: Creates the post with references to stored files.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  The Problem
&lt;/h1&gt;

&lt;h2&gt;
  
  
  1. Storage structure
&lt;/h2&gt;

&lt;p&gt;Originally, images could be embedded in the post objects. But videos require asynchronous moderation. So a unified structure was created: all files (images and videos) are now stored in a separate "media" collection with fields like &lt;code&gt;status: 'pending'&lt;/code&gt;, &lt;code&gt;public&lt;/code&gt;, or &lt;code&gt;rejected&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Verification time
&lt;/h2&gt;

&lt;p&gt;Images are analyzed in milliseconds, but videos take minutes. The system sends the video to Rekognition, waits for processing, and gets a notification via SNS when it’s done. During this time, the post stays pending.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Costs
&lt;/h2&gt;

&lt;p&gt;This is the critical part.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Images:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Cost: &lt;strong&gt;$0.001 per verified image&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;1,000 images/day ≈ $1/day = $30/month&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Videos:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Cost: &lt;strong&gt;$0.10 per minute&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;1,000 videos of 5 minutes ≈ $500/month&lt;/li&gt;
&lt;li&gt;Not counting multiple videos per post&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;S3 Storage:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;$0.023 per GB/month&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;PNG 1080x1080 ≈ 500 KB – 5 MB&lt;/li&gt;
&lt;li&gt;1080p Video (5 Mbps) ≈ 1.5 GB&lt;/li&gt;
&lt;li&gt;$100/month in S3 gives:&lt;/li&gt;
&lt;li&gt;~4.4 million PNG images&lt;/li&gt;
&lt;li&gt;~2,400 five-minute videos&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Result&lt;/strong&gt;: Supporting video content is dozens or hundreds of times more expensive than images.&lt;/p&gt;

&lt;h1&gt;
  
  
  Possible Solutions
&lt;/h1&gt;

&lt;h2&gt;
  
  
  1. Having funds ($$$)
&lt;/h2&gt;

&lt;p&gt;The obvious but least accessible solution for solo developers. If you have investors or a big budget, you can afford full video moderation. For me, a 16-year-old student without capital, this isn’t viable.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Imposing limits
&lt;/h2&gt;

&lt;p&gt;Strict limits might be necessary:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Max video length: &lt;strong&gt;3 minutes&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Size limit&lt;/strong&gt; (e.g., 700 MB)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automatic compression&lt;/strong&gt; for all files&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Daily upload limits&lt;/strong&gt; per user&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These reduce video costs and let you store more content in the same space. Of course, this might affect user experience, so it must be implemented carefully.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Trust-based moderation system
&lt;/h2&gt;

&lt;p&gt;Currently on DayKeeper, not every file is automatically analyzed by Rekognition.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Trust Factor&lt;/strong&gt;: New users have low trust and all their files are checked. If they follow rules and aren’t banned, they gain trust and can post without automatic checks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Report System&lt;/strong&gt;: Any file can be reported. If reported multiple times, it’s reanalyzed, even if it passed automatically.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Manual moderation&lt;/strong&gt;: Admins can view reports, ban users, and manually moderate content.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;On top of that, random moderation of unchecked files will run in the background to keep the app safe. If a malicious user tries to bypass thumbnail analysis, and the post gets many reports, a full video check is triggered and the user may be auto-banned.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Partial video verification
&lt;/h2&gt;

&lt;p&gt;Analyzing every frame is expensive — and often unnecessary. DayKeeper only checks a few:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;2 frames at the start&lt;/li&gt;
&lt;li&gt;2 in the middle&lt;/li&gt;
&lt;li&gt;2 at the end&lt;/li&gt;
&lt;li&gt;2 random frames&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This equals about 1 frame every 18 seconds for a 3-minute video. If a video is reported, it’s reanalyzed in full. This also varies depending on Trust Factor.&lt;/p&gt;

&lt;h3&gt;
  
  
  Use Queues with Redis and BullMQ
&lt;/h3&gt;

&lt;p&gt;Creating and verifying thumbnails takes time, and handling thousands of simultaneous requests could overload the server. DayKeeper uses a &lt;code&gt;moderation queue&lt;/code&gt; with BullMQ to manage tasks in a scalable and safe way.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Video compression
&lt;/h2&gt;

&lt;p&gt;A clear way to cut storage costs is by compressing every file &lt;strong&gt;before uploading to the server&lt;/strong&gt;. This lets you store more videos in less space, with little quality loss — massively reducing storage costs.&lt;/p&gt;

&lt;h1&gt;
  
  
  DayKeeper’s Solution
&lt;/h1&gt;

&lt;p&gt;DayKeeper combines a &lt;strong&gt;trust-based moderation system&lt;/strong&gt; with admins and reports, &lt;strong&gt;partial video verification&lt;/strong&gt;, &lt;strong&gt;task queues&lt;/strong&gt;, and &lt;strong&gt;file compression&lt;/strong&gt;, all alongside &lt;strong&gt;clear limits&lt;/strong&gt; on daily stories, posts, and uploaded files.&lt;/p&gt;

&lt;p&gt;Imposing limits also opens the door for a &lt;strong&gt;premium subscription&lt;/strong&gt;. While it might seem controversial in a social network, I believe it’s more acceptable than selling user data or spamming ads. If done right, it won’t hurt free users too much and can help monetize the app.&lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;Building a video-friendly social network isn’t impossible — but it’s a real challenge, especially for solo developers. Costs, moderation time, and technical complexity are tough hurdles.&lt;/p&gt;

&lt;p&gt;In DayKeeper, we’re overcoming them with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;File compression&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Partial video checks&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Trust and reporting systems&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Human moderation&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With creative solutions and scalable thinking, even a solo project can reach a professional level. The key is balancing user experience, security, and costs — all while building something you believe in.&lt;/p&gt;

&lt;p&gt;If you want to learn more about DayKeeper, you can &lt;a href="https://github.com/luciano655dev/daykeeper-api" rel="noopener noreferrer"&gt;check the code here&lt;/a&gt; or visit &lt;a href="https://daykeeper.app" rel="noopener noreferrer"&gt;our website&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>socialmedia</category>
      <category>node</category>
    </item>
    <item>
      <title>🎆THE BEST PROGRAMMING CHALLENGES USED IN BIG TECHS FOR YOU TO TRAIN IN 2024🎆</title>
      <dc:creator>Luciano Menezes</dc:creator>
      <pubDate>Thu, 28 Mar 2024 00:05:13 +0000</pubDate>
      <link>https://dev.to/luciano655/the-best-programming-challenges-used-in-big-techs-for-you-to-train-in-2024-29e1</link>
      <guid>https://dev.to/luciano655/the-best-programming-challenges-used-in-big-techs-for-you-to-train-in-2024-29e1</guid>
      <description>&lt;h1&gt;
  
  
  ⭐- WHAT WILL I SHOW?
&lt;/h1&gt;

&lt;p&gt;In this post, I will show you REAL programming challenges used by VARIOUS BIG TECHS in job interviews!&lt;/p&gt;

&lt;p&gt;From simpler challenges to more complex ones, including PicPay, Google, Uber, Amazon, Netflix, and MORE!&lt;/p&gt;

&lt;p&gt;Enjoy the post!&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 1 - Back-end Challenge by PicPay
&lt;/h1&gt;

&lt;p&gt;This challenge, as the title says, has already been used by PicPay for a Backend position.&lt;/p&gt;

&lt;p&gt;Your challenge? Develop a simplified system inspired by PicPay.&lt;/p&gt;

&lt;p&gt;The system should allow two types of users, regular users, and merchants, to transfer money between them.&lt;/p&gt;

&lt;p&gt;To see the details and solve the challenge, just go to &lt;a href="https://github.com/PicPay/picpay-desafio-backend" rel="noopener noreferrer"&gt;this GitHub repository!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And if you want to see a resolution video, I highly recommend &lt;a href="https://youtube.com/watch?v=QXunBiLq2SM&amp;amp;t=621s" rel="noopener noreferrer"&gt;@kipperdev's on YouTube!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I HIGHLY recommend you try it out!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJtooeIW0AA3IKL%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJtooeIW0AA3IKL%3Fformat%3Dpng%26name%3Dsmall" width="664" height="680"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 2 - First Missing Positive by Google
&lt;/h1&gt;

&lt;p&gt;This is a hard-level challenge that has been used by GOOGLE itself.&lt;/p&gt;

&lt;p&gt;Here, you'll receive an unordered array of INTs &lt;code&gt;nums&lt;/code&gt; and need to return the smallest integer not present in the array.&lt;/p&gt;

&lt;p&gt;To do this, you must implement an algorithm that runs in O(n) time and uses O(1) auxiliary space.&lt;/p&gt;

&lt;p&gt;Sounds easy? &lt;a href="https://leetcode.com/problems/first-missing-positive/description/" rel="noopener noreferrer"&gt;Here's the challenge on LeetCode for you to try!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And if you want to see a resolution video, &lt;a href="https://youtube.com/watch?v=DsG617OTdhs" rel="noopener noreferrer"&gt;@phenpessoa's on YouTube is GREAT!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This one's good! I recommend it!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJtqx2TXAAAG9_w%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJtqx2TXAAAG9_w%3Fformat%3Dpng%26name%3Dsmall" width="652" height="679"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 3 - Backend Challenge by Uber
&lt;/h1&gt;

&lt;p&gt;Here's another challenge for BackEnds, this time from Uber!&lt;/p&gt;

&lt;p&gt;Here, you should create a prototype of one of the following projects:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Departure Times&lt;/li&gt;
&lt;li&gt;SF Movies&lt;/li&gt;
&lt;li&gt;Email Service&lt;/li&gt;
&lt;li&gt;Food Trucks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The design is up to you, and you should deploy it as if it were in production!&lt;/p&gt;

&lt;p&gt;To see more details, &lt;a href="https://github.com/uber-archive/coding-challenge-tools/blob/master/coding_challenge.md" rel="noopener noreferrer"&gt;just go to this GitHub repo!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And if you want to see any resolution videos, &lt;a href="https://youtube.com/watch?v=eFgeO9M9lLw&amp;amp;list=PLNCSWIsR6ADKaT1cO6XUJkRy0_v9p-h0Z" rel="noopener noreferrer"&gt;@kipperdev's is ideal!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJttLwJWcAAApgK%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJttLwJWcAAApgK%3Fformat%3Dpng%26name%3Dsmall" width="680" height="489"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 4 - Product of Array Except Self by Amazon
&lt;/h1&gt;

&lt;p&gt;This is a medium-level challenge, but still, it's interview level!&lt;/p&gt;

&lt;p&gt;Here, you receive an array &lt;code&gt;nums&lt;/code&gt; and need to return an array &lt;code&gt;answer&lt;/code&gt; where &lt;code&gt;answer[i]&lt;/code&gt; is equal to the product of the elements of &lt;code&gt;nums&lt;/code&gt; MINUS &lt;code&gt;num[i]&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Additionally, the product of any prefix or suffix of &lt;code&gt;nums&lt;/code&gt; must be a 32-bit integer.&lt;/p&gt;

&lt;p&gt;If you want to try it yourself, &lt;a href="https://leetcode.com/problems/product-of-array-except-self/description/" rel="noopener noreferrer"&gt;just go to this LeetCode challenge!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And if you want to see a resolution video, &lt;a href="https://youtube.com/watch?v=2sM68Rxr950" rel="noopener noreferrer"&gt;Vamos Codar's is quick, practical, and efficient!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJtuwJAXsAAO3d_%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJtuwJAXsAAO3d_%3Fformat%3Dpng%26name%3Dsmall" width="680" height="526"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 5 - First Unique Character in a String by Netflix
&lt;/h1&gt;

&lt;p&gt;LOOK, this one is EASY level on LeetCode and has been USED IN NETFLIX!&lt;/p&gt;

&lt;p&gt;In this challenge, you receive a string &lt;code&gt;s&lt;/code&gt; and need to return the index of the first character that does not repeat!&lt;/p&gt;

&lt;p&gt;If this character does not exist, just return &lt;code&gt;-1&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Seriously, this is one of the EASIEST, but still, it can be a great challenge!&lt;/p&gt;

&lt;p&gt;To try to solve it, &lt;a href="https://leetcode.com/problems/first-unique-character-in-a-string/description/" rel="noopener noreferrer"&gt;just go to this challenge on LeetCode!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And if you want to see a resolution video, &lt;a href="https://youtube.com/watch?v=XIvgNQdTcn4" rel="noopener noreferrer"&gt;@phenpessoa's is THE BEST!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Of all on this list, this is the one I most recommend you try!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJtwfF-WQAElaT2%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJtwfF-WQAElaT2%3Fformat%3Dpng%26name%3Dsmall" width="680" height="582"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐- BONUS - Uber Archives
&lt;/h1&gt;

&lt;p&gt;If you want to see other challenges that have been used in Uber interviews in the past, the &lt;a href="https://github.com/uber-archive" rel="noopener noreferrer"&gt;Uber Archives repository&lt;/a&gt; has MANY of these challenges in an Open Source format!&lt;/p&gt;

&lt;p&gt;I HIGHLY recommend checking it out!&lt;/p&gt;

&lt;h1&gt;
  
  
  😄 - THANK YOU!
&lt;/h1&gt;

&lt;p&gt;Of all on this profile, without a doubt, this is one of the best in my opinion!&lt;/p&gt;

&lt;p&gt;Took me a while to post it precisely because I researched a lot and wasn't very free, but still, I hope you liked it!&lt;/p&gt;

&lt;p&gt;If you have any suggestions, just send me a &lt;a href="https://twitter.com/Luciano655dev" rel="noopener noreferrer"&gt;DM on Twitter!&lt;/a&gt; I always want to bring the best content here.&lt;/p&gt;

&lt;p&gt;My recent posts didn't reach many people, and even if it continues like this, I'll never stop posting!&lt;/p&gt;

&lt;p&gt;Finally, Thank you for reading this far!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/luciano655dev" rel="noopener noreferrer"&gt;Also, check out other projects of mine on my GitHub!&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Thank you!
&lt;/h3&gt;

</description>
    </item>
    <item>
      <title>🎆THE BEST HTML/REACT TAGS YOU SURELY DON'T KNOW FOR 2024🎆</title>
      <dc:creator>Luciano Menezes</dc:creator>
      <pubDate>Mon, 25 Mar 2024 23:31:10 +0000</pubDate>
      <link>https://dev.to/luciano655/the-best-htmlreact-tags-you-surely-dont-know-for-2024-3jjo</link>
      <guid>https://dev.to/luciano655/the-best-htmlreact-tags-you-surely-dont-know-for-2024-3jjo</guid>
      <description>&lt;h1&gt;
  
  
  ⭐- WHAT WILL I SHOW?
&lt;/h1&gt;

&lt;p&gt;In this post, I'll showcase AMAZING HTML/REACT tags that you DEFINITELY DON'T KNOW to START USING IN 2024&lt;/p&gt;

&lt;p&gt;If you're new, I always post programming content here! Stay tuned!&lt;/p&gt;

&lt;p&gt;Enjoy the read!!&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 1 - &lt;code&gt;&amp;lt;picture&amp;gt;&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This Tag allows you to place MULTIPLE IMAGES at the same time, being able to choose which one will be shown according to the client's screen!&lt;/p&gt;

&lt;p&gt;It's AMAZING for when you have various images of different sizes!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://w3schools.com/tags/tag_picture.asp" rel="noopener noreferrer"&gt;Learn more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjT36tXcAAHCU9%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjT36tXcAAHCU9%3Fformat%3Djpg%26name%3Dsmall" alt="Picture Tag" width="680" height="284"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 2 - &lt;code&gt;&amp;lt;dialog&amp;gt;&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This one is simpler, but VERY USEFUL&lt;/p&gt;

&lt;p&gt;You know when you want to show those dialog boxes on your website? This tag will save you!&lt;/p&gt;

&lt;p&gt;I only use it now!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://w3schools.com/tags/tag_dialog.asp" rel="noopener noreferrer"&gt;Learn more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjUTBYXUAAoC-0%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjUTBYXUAAoC-0%3Fformat%3Dpng%26name%3Dsmall" alt="Dialog Tag" width="680" height="183"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 3 - &lt;code&gt;&amp;lt;template&amp;gt;&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;No more defining a variable with an ENTIRE HTML in your JavaScript!&lt;/p&gt;

&lt;p&gt;This tag allows you to place content that can be shown or not, based on JavaScript&lt;/p&gt;

&lt;p&gt;IMAGINE THE POSSIBILITIES!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://w3schools.com/w3css/w3css_templates.asp" rel="noopener noreferrer"&gt;Learn more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjU6ldW4AAX4aU%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjU6ldW4AAX4aU%3Fformat%3Djpg%26name%3Dsmall" alt="Template Tag" width="680" height="259"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 4 - &lt;code&gt;&amp;lt;track&amp;gt;&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This TAG you use along with a media element, like a video or an audio, and you can simply provide SUBTITLES for that content!&lt;/p&gt;

&lt;p&gt;MAKES YOUR LIFE MUCH EASIER!!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://w3schools.com/tags/tag_track.asp" rel="noopener noreferrer"&gt;Learn more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjVTuhXgAAK3ya%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjVTuhXgAAK3ya%3Fformat%3Dpng%26name%3Dsmall" alt="Track Tag" width="680" height="240"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 5 - &lt;code&gt;&amp;lt;object&amp;gt;&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This one allows you to embed external content within your HTML page!&lt;/p&gt;

&lt;p&gt;You can put a PDF, files, videos, audios, and even handle the error if the browser doesn't support it!&lt;/p&gt;

&lt;p&gt;simply AMAZING!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://w3schools.com/tags/tag_object.asp" rel="noopener noreferrer"&gt;Learn more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjV5Q0WwAAH3xy%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjV5Q0WwAAH3xy%3Fformat%3Dpng%26name%3Dsmall" alt="Object Tag" width="680" height="249"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐ BONUS - &lt;code&gt;&amp;lt;base&amp;gt;&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This one's good!&lt;br&gt;
With it, you set a Base URL for ALL URLs on your page!&lt;/p&gt;

&lt;p&gt;No more repeating the same URL all the time!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/tags/tag_base.asp" rel="noopener noreferrer"&gt;Learn more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjWTHKW0AAlKVA%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJjWTHKW0AAlKVA%3Fformat%3Dpng%26name%3Dsmall" alt="Base Tag" width="620" height="355"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  😄 - THANK YOU!
&lt;/h1&gt;

&lt;p&gt;This post was shorter than the others, mainly because time is a bit tighter, but I'll make the next one AMAZING!!&lt;/p&gt;

&lt;p&gt;Thank you for reading so far! If you have any suggestions, just let me know and I'll tag you at the top!!&lt;/p&gt;

&lt;p&gt;Also, check out my other projects:&lt;/p&gt;

&lt;p&gt;better-format: &lt;a href="https://github.com/luciano655dev/better-format" rel="noopener noreferrer"&gt;https://github.com/luciano655dev/better-format&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;DayKeeper (in dev):&lt;br&gt;
&lt;a href="https://github.com/luciano655dev/daykeeper" rel="noopener noreferrer"&gt;https://github.com/luciano655dev/daykeeper&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Thank you!
&lt;/h3&gt;

</description>
    </item>
    <item>
      <title>🎆 THE BEST CSS PROPERTIES YOU SURELY DON'T KNOW FOR 2024 🎆</title>
      <dc:creator>Luciano Menezes</dc:creator>
      <pubDate>Thu, 21 Mar 2024 00:01:17 +0000</pubDate>
      <link>https://dev.to/luciano655/the-best-css-properties-you-surely-dont-know-for-2024-4ad3</link>
      <guid>https://dev.to/luciano655/the-best-css-properties-you-surely-dont-know-for-2024-4ad3</guid>
      <description>&lt;p&gt;This post is also available, originally, in a &lt;a href="https://twitter.com/Luciano655dev/status/1770597755854946554" rel="noopener noreferrer"&gt;Twitter thread&lt;/a&gt; and in Portuguese, on &lt;a href="https://www.tabnews.com.br/Luciano655/as-melhores-propriedades-css-que-voce-com-certeza-nao-conhece-para-2024" rel="noopener noreferrer"&gt;Tabnews&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJdWhcXQAAZInI%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJdWhcXQAAZInI%3Fformat%3Djpg%26name%3Dsmall" width="680" height="389"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐ - WHAT WILL I SHOW?
&lt;/h1&gt;

&lt;p&gt;In this Post, I'll show you some &lt;strong&gt;AMAZING CSS PROPERTIES&lt;/strong&gt; that you &lt;strong&gt;DEFINITELY&lt;/strong&gt; don't know about!&lt;/p&gt;

&lt;p&gt;If you're new here, I always post programming content on &lt;a href="https://twitter.com/luciano655dev" rel="noopener noreferrer"&gt;my Twitter&lt;/a&gt;! Feel free to follow and give suggestions!&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 1 - &lt;code&gt;mix-blend-mode&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This property allows you to control how an element blends with the content of its parent element and the background element.&lt;/p&gt;

&lt;p&gt;With it, you can create UNIQUE overlay effects, among MANY other things!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode" rel="noopener noreferrer"&gt;Learn more!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJmYbWWIAAVM0c%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJmYbWWIAAVM0c%3Fformat%3Dpng%26name%3Dsmall" width="680" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 2 - &lt;code&gt;shape-outside&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This one allows you to wrap content around a specific shape, like a circle, a triangle, a polygon, and MANY others.&lt;/p&gt;

&lt;p&gt;This is GREAT for creating more interesting and creative layouts for your website.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside" rel="noopener noreferrer"&gt;Learn more!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJmoNvXAAAyHo9%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJmoNvXAAAyHo9%3Fformat%3Dpng%26name%3Dsmall" width="680" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 3 - &lt;code&gt;backdrop-filter&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This property applies filtering effects, such as blur or color inversion, to the background of an element, including nested elements.&lt;/p&gt;

&lt;p&gt;With this, you can create some visual effects that make the page INCREDIBLY more beautiful!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter" rel="noopener noreferrer"&gt;Learn more!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJnME7WMAATl7u%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJnME7WMAATl7u%3Fformat%3Dpng%26name%3Dsmall" width="680" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 4 - &lt;code&gt;scroll-behavior&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;You know when you want to automatically scroll to somewhere on your page? This property will save you!&lt;/p&gt;

&lt;p&gt;With it, you can configure how the scroll will be, whether it will be fast, linear, smooth, HOWEVER you want!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior" rel="noopener noreferrer"&gt;Learn more!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJnr_bWAAAzIU1%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJnr_bWAAAzIU1%3Fformat%3Dpng%26name%3Dsmall" width="680" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 5 - &lt;code&gt;clip-path&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;With this property, you can cut elements IN ANY SHAPE YOU PREFER.&lt;/p&gt;

&lt;p&gt;You can make a geometric shape, a star, ANYTHING, making your page UNIQUE and INCREDIBLY BEAUTIFUL.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path" rel="noopener noreferrer"&gt;Learn more!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJoFrQWIAA7HRI%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJoFrQWIAA7HRI%3Fformat%3Dpng%26name%3Dsmall" width="680" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 6 - &lt;code&gt;object-fit&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This one's for you who CAN'T DEAL with an image!&lt;/p&gt;

&lt;p&gt;With this property, you can place an element HOWEVER YOU WANT over another, whether by filling it, cutting it to make a mask, ANYTHING.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit" rel="noopener noreferrer"&gt;Learn more!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJoeAHXMAA9gH7%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJoeAHXMAA9gH7%3Fformat%3Dpng%26name%3Dsmall" width="680" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 7 - &lt;code&gt;perspective&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;I KNOW you often want to create some 3D effect on your Website and always end up going for some library.&lt;/p&gt;

&lt;p&gt;With THIS property, you define the user's perspective in relation to the Z axis of the website, GREATLY IMPROVING any 3D you're going to do!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective" rel="noopener noreferrer"&gt;Learn more!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJpAKgWQAAjAQI%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJpAKgWQAAjAQI%3Fformat%3Dpng%26name%3Dsmall" width="680" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 8 - &lt;code&gt;column-count&lt;/code&gt; AND &lt;code&gt;column-gap&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;These two properties allow you to divide the content of an element into a specific number of columns and define the space between these columns.&lt;/p&gt;

&lt;p&gt;With this, everything becomes MUCH more organized, it can SAVE a website!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap" rel="noopener noreferrer"&gt;Learn more about column-gap!&lt;/a&gt;&lt;br&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-count" rel="noopener noreferrer"&gt;Learn more about column-count!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJp-u3WoAAd0R5%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJp-u3WoAAd0R5%3Fformat%3Dpng%26name%3Dsmall" width="680" height="335"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJqHl_WoAA8CLh%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJqHl_WoAA8CLh%3Fformat%3Dpng%26name%3Dsmall" width="680" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 9 - &lt;code&gt;image-rendering&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;You know when the image is on the website, but it looks a bit weird?&lt;/p&gt;

&lt;p&gt;THIS PROPERTY allows you to DEFINE how an image will be rendered!&lt;/p&gt;

&lt;p&gt;Whether it'll be pixelated, with sharper edges, YOU CHOOSE.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering" rel="noopener noreferrer"&gt;Learn more!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJqYWFXoAIz7VX%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJqYWFXoAIz7VX%3Fformat%3Dpng%26name%3Dsmall" width="680" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 10 - &lt;code&gt;word-wrap&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;You know when that text of yours is ALL MESSED UP on the page, overflowing the container and everything?&lt;/p&gt;

&lt;p&gt;Well, this property allows you to BREAK the sentence WHENEVER YOU NEED!&lt;/p&gt;

&lt;p&gt;NO MORE MESSED UP SENTENCES, NO MORE BAD TEXTS, NEVER AGAIN!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://w3schools.com/cssref/css3_pr_word-wrap.php" rel="noopener noreferrer"&gt;Learn more!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJrdWlW0AErLAe%3Fformat%3Dpng%26name%3D240x240" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJrdWlW0AErLAe%3Fformat%3Dpng%26name%3D240x240" alt="Sorry for the image, it was the best I could do" width="213" height="173"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐ BONUS - &lt;code&gt;text-overflow&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This property, just like the previous one, allows you to IMPROVE THAT MESSED UP TEXT by 100%&lt;/p&gt;

&lt;p&gt;With it, you can put '...' at the end of a sentence that doesn't fit in the container, for example, and MUCH MORE.&lt;/p&gt;

&lt;p&gt;THIS HAS SAVED ME A LOT&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow" rel="noopener noreferrer"&gt;Learn more!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJsOd6W0AE8Su0%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGJJsOd6W0AE8Su0%3Fformat%3Dpng%26name%3Dsmall" width="680" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  😄 - THANK YOU
&lt;/h1&gt;

&lt;p&gt;The last thread didn't reach as many people, but even if none of my threads yield results, I WILL ALWAYS CONTINUE POSTING.&lt;/p&gt;

&lt;p&gt;Hope you enjoyed! Remember that this post is also available on TabNews and DevTo!&lt;/p&gt;

&lt;p&gt;My last thread: &lt;a href="https://twitter.com/Luciano655dev/status/1769868521863835956" rel="noopener noreferrer"&gt;https://twitter.com/Luciano655dev/status/1769868521863835956&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Also check out my other projects!&lt;/p&gt;

&lt;p&gt;better-format: &lt;a href="https://github.com/luciano655dev/better-format" rel="noopener noreferrer"&gt;https://github.com/luciano655dev/better-format&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;DayKeeper (in dev): &lt;a href="https://github.com/luciano655dev/daykeeper" rel="noopener noreferrer"&gt;https://github.com/luciano655dev/daykeeper&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;THANK YOU!&lt;/strong&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>🎆THE BEST GIT COMMANDS YOU PROBABLY DON'T KNOW FOR 2024 🎆</title>
      <dc:creator>Luciano Menezes</dc:creator>
      <pubDate>Mon, 18 Mar 2024 23:43:03 +0000</pubDate>
      <link>https://dev.to/luciano655/the-best-git-commands-you-probably-dont-know-for-2024-3mjl</link>
      <guid>https://dev.to/luciano655/the-best-git-commands-you-probably-dont-know-for-2024-3mjl</guid>
      <description>&lt;p&gt;This post is also available originally in &lt;a href="https://twitter.com/luciano655dev" rel="noopener noreferrer"&gt;Thread format on Twitter&lt;/a&gt; and in English on &lt;a href="https://dev.to/luciano655dev"&gt;Dev.To&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI-nAE-XEAEfMbQ%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI-nAE-XEAEfMbQ%3Fformat%3Dpng%26name%3Dsmall" width="640" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐- WHAT WILL I SHOW?
&lt;/h1&gt;

&lt;p&gt;In this Thread, I'll show you &lt;strong&gt;useful git commands&lt;/strong&gt; that &lt;strong&gt;you probably haven't even heard of&lt;/strong&gt; and believe me, they are &lt;strong&gt;VERY USEFUL&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you're new, I always post content here and on Twitter! Keep an eye out!&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 1 - &lt;code&gt;git rebase -i&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This GIT command allows you to reorganize, edit, or combine commits during a rebase&lt;/p&gt;

&lt;p&gt;This is VERY useful for cleaning up commit history before sending a pull request, merging your changes into a main branch, etc.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-rebase" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI-rrZAWgAEIueg%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI-rrZAWgAEIueg%3Fformat%3Dpng%26name%3Dsmall" width="518" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 2 - &lt;code&gt;git cherry-pick&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This command basically allows you to copy a single commit from one branch to another&lt;/p&gt;

&lt;p&gt;It's very useful when you need to add a specific change from a commit without merging the entire branch, for example&lt;/p&gt;

&lt;p&gt;Ever since I saw it, I've been using it all the time!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-cherry-pick" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI-sVQ2W4AA5z23%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI-sVQ2W4AA5z23%3Fformat%3Dpng%26name%3Dsmall" width="550" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 3 - &lt;code&gt;git reflog&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;Reflog records ALL previous HEADs, allowing you to navigate through the change history, even after a rebase or reset&lt;/p&gt;

&lt;p&gt;It's incredible for recovering lost commits, reversing accidental actions, among MANY other things&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-reflog" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_QaATXcAImYvV%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_QaATXcAImYvV%3Fformat%3Dpng%26name%3Dsmall" width="466" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 4 - &lt;code&gt;git bisect&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This command is used to locate a specific commit that introduced a bug, performing a binary search between two known points&lt;/p&gt;

&lt;p&gt;You can use it to quickly identify the cause of problems in large commit histories, for example&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-bisect" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_QxL-WgAA2wRd%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_QxL-WgAA2wRd%3Fformat%3Dpng%26name%3Dsmall" width="466" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 5 - &lt;code&gt;git worktree&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This one allows you to work with MULTIPLE working directories from the same Git repository&lt;/p&gt;

&lt;p&gt;It works great when you need to work on multiple branches simultaneously without switching between directories, etc...&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-worktree" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_RIZtW4AATgWu%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_RIZtW4AATgWu%3Fformat%3Dpng%26name%3Dsmall" width="500" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 6 - &lt;code&gt;git submodule&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;Submodules are Git repositories embedded within a main repository&lt;/p&gt;

&lt;p&gt;They are useful for including dependencies from other repositories in your project while keeping them as separate entities&lt;/p&gt;

&lt;p&gt;With this command, you can manage EVERYTHING from a submodule&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-submodule" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_RghfXAAAxjRv%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_RghfXAAAxjRv%3Fformat%3Dpng%26name%3Dsmall" width="518" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 7 - &lt;code&gt;git clean&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This command is used to remove untracked files from the working directory&lt;/p&gt;

&lt;p&gt;It's useful for cleaning up automatically generated files or temporary files that shouldn't be included in the repository (which has happened to me before)&lt;/p&gt;

&lt;p&gt;This one's one of the best, I recommend it!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-clean" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_SB99XcAAGmK9%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_SB99XcAAGmK9%3Fformat%3Dpng%26name%3Dsmall" width="450" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 8 - &lt;code&gt;git worktree prune&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;Prune is used to clean up inactive working directories created by git worktree, which we saw a little while ago&lt;/p&gt;

&lt;p&gt;This is useful for freeing up disk space and keeping the workspace always clean!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-prune" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_SbnQW4AEK70O%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_SbnQW4AEK70O%3Fformat%3Dpng%26name%3Dsmall" width="602" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 9 - &lt;code&gt;git sparse-checkout&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This feature allows you to work only with a subset of files in a large repository&lt;/p&gt;

&lt;p&gt;It's good for saving your time and disk space when cloning or pulling large projects, greatly improving everything&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-sparse-checkout" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_Sh4kXIAAjaP8%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_Sh4kXIAAjaP8%3Fformat%3Dpng%26name%3Dsmall" width="618" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 10 - &lt;code&gt;git rerere&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This command automatically records successful conflict resolutions and reuses them in similar conflicts in the future&lt;/p&gt;

&lt;p&gt;This is AMAZING for saving your time when dealing with recurring conflicts during merge, for example&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-rerere" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_S4P1WkAELfy_%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_S4P1WkAELfy_%3Fformat%3Dpng%26name%3Dsmall" width="466" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐ BONUS - &lt;code&gt;git notes&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This command attaches notes to your commits without altering the main timeline&lt;/p&gt;

&lt;p&gt;This is GREAT for adding additional information, such as code reviews or review notes, without modifying the original commits&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-notes" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_TdzeW0AARHKs%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGI_TdzeW0AARHKs%3Fformat%3Dpng%26name%3Dsmall" width="450" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  😄- THANK YOU
&lt;/h1&gt;

&lt;p&gt;I hope you enjoyed the post!&lt;/p&gt;

&lt;p&gt;I always post programming content here and on &lt;a href="https://twitter.com/luciano655dev" rel="noopener noreferrer"&gt;my Twitter&lt;/a&gt;, feel free to follow and give suggestions! I always give credit at the top of the Thread!&lt;/p&gt;

&lt;p&gt;Also, check out my other projects!&lt;/p&gt;

&lt;p&gt;⭐ better-format: &lt;a href="https://github.com/luciano655dev/better-format" rel="noopener noreferrer"&gt;https://github.com/luciano655dev/better-format&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;⭐ DayKeeper (under development): &lt;a href="https://github.com/luciano655dev/daykeeper" rel="noopener noreferrer"&gt;https://github.com/luciano655dev/daykeeper&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Thank you!&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>git</category>
      <category>commands</category>
      <category>new</category>
      <category>terminal</category>
    </item>
    <item>
      <title>🎆HOW TO CREATE YOUR OWN PACKAGE ON NPM EASILY, QUICKLY, AND UPDATED 2024🎆</title>
      <dc:creator>Luciano Menezes</dc:creator>
      <pubDate>Thu, 29 Feb 2024 22:42:11 +0000</pubDate>
      <link>https://dev.to/luciano655/how-to-create-your-own-package-on-npm-easily-quickly-and-updated-2024-5bkl</link>
      <guid>https://dev.to/luciano655/how-to-create-your-own-package-on-npm-easily-quickly-and-updated-2024-5bkl</guid>
      <description>&lt;p&gt;This post is also available, originally, in &lt;a href="https://twitter.com/Luciano655dev/status/1763330058389782898" rel="noopener noreferrer"&gt;Thread format on Twitter&lt;/a&gt; and, in Portuguese, on &lt;a href="https://www.tabnews.com.br/Luciano655/como-criar-seu-proprio-pacote-no-npm-facil-rapido-e-atualizado-2024" rel="noopener noreferrer"&gt;TabNews&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiJ-t2XQAAavp6%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiJ-t2XQAAavp6%3Fformat%3Djpg%26name%3Dsmall" alt="Image by Hare Prananda on LinkedIn" width="680" height="383"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐- WHAT ARE WE GOING TO DO?
&lt;/h1&gt;

&lt;p&gt;In this thread, I will teach you how to create your &lt;strong&gt;own package on NPM&lt;/strong&gt;, in an &lt;strong&gt;EASY AND QUICK&lt;/strong&gt; way, with &lt;strong&gt;JavaScript/TypeScript&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;This thread will be based on &lt;strong&gt;my own package, BETTER-FORMAT&lt;/strong&gt;, which I will use as a reference!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/luciano655dev/better-format" rel="noopener noreferrer"&gt;See more here on GitHub!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiK5T8WUAYQCgb%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiK5T8WUAYQCgb%3Fformat%3Dpng%26name%3Dsmall" alt="Better-Format by Luciano655dev on GitHub" width="680" height="353"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅- WHAT IS NPM?
&lt;/h1&gt;

&lt;p&gt;NPM, or Node Package Manager, is simply a package manager for Node.JS.&lt;/p&gt;

&lt;p&gt;In other words, it's a place where anyone can create and publish packages.&lt;/p&gt;

&lt;p&gt;Here we have both HUGE and smaller packages, all useful for something!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiQ57ZXgAAe6nz%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiQ57ZXgAAe6nz%3Fformat%3Djpg%26name%3Dsmall" width="680" height="308"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅- BEFORE CREATING...
&lt;/h1&gt;

&lt;p&gt;Before creating an NPM package, think about what this package will do.&lt;/p&gt;

&lt;p&gt;Better-Format, for example, helps you format and validate some types of data, such as strings, numbers, CPF validation, card, etc...&lt;/p&gt;

&lt;p&gt;Just have an idea and put it into practice!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiRkK5W8AAuCyB%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiRkK5W8AAuCyB%3Fformat%3Dpng%26name%3Dsmall" width="680" height="215"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅- WHAT YOU WILL NEED
&lt;/h1&gt;

&lt;p&gt;To create your first package, you just need an account on NPM and knowledge in some language, like JavaScript!&lt;/p&gt;

&lt;p&gt;Depending on the package, you can also use other existing packages to help you, such as &lt;a href="https://axios-http.com" rel="noopener noreferrer"&gt;axios&lt;/a&gt;, &lt;a href="https://www.npmjs.com/package/bcrypt" rel="noopener noreferrer"&gt;bcrypt&lt;/a&gt;, etc...&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiSjYjW8AAiR_I%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiSjYjW8AAiR_I%3Fformat%3Djpg%26name%3Dsmall" width="680" height="558"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 1 - HOW TO GET STARTED
&lt;/h1&gt;

&lt;p&gt;First, you need to initialize a package, something you've surely done before, with &lt;code&gt;npm init&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Fill in as much information as possible here, as it is important.&lt;/p&gt;

&lt;p&gt;Before that, it's also good to create a repository on GitHub to link to your project!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiXOUEWsAAyhma%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiXOUEWsAAyhma%3Fformat%3Dpng%26name%3Dsmall" width="612" height="203"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 2 - FIRST CODE
&lt;/h1&gt;

&lt;p&gt;After initializing the package, create an &lt;code&gt;index.js&lt;/code&gt; file and put something in it, like a &lt;code&gt;hello world&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Then, run the &lt;code&gt;npm link&lt;/code&gt; command, which will start your package locally, making it ready for testing.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiUs3XXUAAPPrm%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiUs3XXUAAPPrm%3Fformat%3Dpng%26name%3Dsmall" width="630" height="181"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 3 - CREATING THE PACKAGE
&lt;/h1&gt;

&lt;p&gt;From here on, it's up to you and your creativity!&lt;/p&gt;

&lt;p&gt;Create as many folders as you want, install as many dependencies as you want, and make your code work!&lt;/p&gt;

&lt;p&gt;After that, just export everything in your &lt;code&gt;index.js&lt;/code&gt; with &lt;code&gt;module.exports = {...}&lt;/code&gt;!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiVfeQW8AAy6SH%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiVfeQW8AAy6SH%3Fformat%3Djpg%26name%3Dsmall" width="628" height="680"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 4 - CREATING TESTS
&lt;/h1&gt;

&lt;p&gt;Along with everything you do, I strongly recommend running a test for it!&lt;/p&gt;

&lt;p&gt;To do this, just install Jest with &lt;code&gt;npm i jest&lt;/code&gt; and create a &lt;code&gt;./tests&lt;/code&gt; folder, for example.&lt;/p&gt;

&lt;p&gt;Here, you can test the functions you created! Use and abuse it!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiWPnEWEAELJl5%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiWPnEWEAELJl5%3Fformat%3Djpg%26name%3Dsmall" width="680" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 5 - TESTING LOCALLY
&lt;/h1&gt;

&lt;p&gt;Remember we ran the &lt;code&gt;npm link&lt;/code&gt; command before? That's what allows us to test the package before it's published!&lt;/p&gt;

&lt;p&gt;In another folder, run the command&lt;br&gt;
&lt;code&gt;npm i {my_package}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Then just import it with&lt;br&gt;
&lt;code&gt;const myPackage = require('my_package')&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;and test as much as you want!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiYZ3SXkAAFNyp%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiYZ3SXkAAFNyp%3Fformat%3Djpg%26name%3Dsmall" width="680" height="242"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 6 - PUBLISHING THE PACKAGE
&lt;/h1&gt;

&lt;p&gt;After developing the package, the simplest part is to publish!&lt;/p&gt;

&lt;p&gt;Run the &lt;code&gt;npm login&lt;/code&gt; command and enter your NPM account!&lt;/p&gt;

&lt;p&gt;Then, check the version and run &lt;code&gt;npm publish&lt;/code&gt; and YOU'RE DONE! YOU'VE ALREADY PUBLISHED YOUR FIRST PACKAGE!&lt;/p&gt;

&lt;p&gt;To update, change the version and run the same command again!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiZJnaWQAA8cKo%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiZJnaWQAA8cKo%3Fformat%3Djpg%26name%3Dsmall" width="680" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 7 - AFTER PUBLISHING
&lt;/h1&gt;

&lt;p&gt;After publishing, promote your package!&lt;/p&gt;

&lt;p&gt;Post it on your social networks, everything! Besides, NPM itself distributes your package when you create it!&lt;/p&gt;

&lt;p&gt;Remember to create a good README to attract people and make everything right on GitHub!&lt;/p&gt;

&lt;p&gt;Check Issues, PRs, create a good environment for other developers, and hopefully, your package will be a success!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiZxeVXkAAVmyQ%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGHiZxeVXkAAVmyQ%3Fformat%3Dpng%26name%3Dsmall" width="379" height="592"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐ - BONUS
&lt;/h1&gt;

&lt;p&gt;If you want to see more content about it, there are two videos that I HIGHLY recommend you to watch!&lt;/p&gt;

&lt;p&gt;One from &lt;a href="https://www.youtube.com/@WebDevSimplified" rel="noopener noreferrer"&gt;WebDevSimplified&lt;/a&gt; that shows in detail how to create the package.&lt;/p&gt;

&lt;p&gt;And another from &lt;a href="https://www.youtube.com/@PaulaSantamaria" rel="noopener noreferrer"&gt;Paula Santamaría&lt;/a&gt;, which shows how she created her own package in a VERY well-produced video!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://youtube.com/watch?v=J4b_T-qH3BY&amp;amp;t=233s" rel="noopener noreferrer"&gt;WebDevSimplified video here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://youtube.com/watch?v=cdHb1fTl6_E&amp;amp;list=WL&amp;amp;index=1" rel="noopener noreferrer"&gt;Paula Santamaría video here&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  😄 - THANK YOU!
&lt;/h1&gt;

&lt;p&gt;Hope you enjoyed it!&lt;/p&gt;

&lt;p&gt;It had been a while since I last did a thread, mostly due to lack of good content, but I always want to post more!&lt;/p&gt;

&lt;p&gt;If you liked it, visit the Better-Format repository! Your contribution will always be very welcome!&lt;/p&gt;

&lt;p&gt;Thank you!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>🎆 THE BEST AND MOST USEFUL VSCODE EXTENSIONS 🎆</title>
      <dc:creator>Luciano Menezes</dc:creator>
      <pubDate>Thu, 22 Feb 2024 13:13:57 +0000</pubDate>
      <link>https://dev.to/luciano655/the-best-and-most-useful-vscode-extensions-jb3</link>
      <guid>https://dev.to/luciano655/the-best-and-most-useful-vscode-extensions-jb3</guid>
      <description>&lt;p&gt;This post is also avaliable on &lt;a href="https://twitter.com/Luciano655dev/status/1760448495339626753" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; and, in portuguese, on &lt;a href="https://www.tabnews.com.br/Luciano655/as-melhores-e-mais-uteis-extensoes-do-vscode" rel="noopener noreferrer"&gt;TabNews&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  THE BEST AND MOST USEFUL VSCODE EXTENSIONS
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaORyPXwAE5Xoa%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaORyPXwAE5Xoa%3Fformat%3Djpg%26name%3Dsmall" alt="Peacock (end of thread)" width="680" height="363"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐- WHAT WILL I SHOW?
&lt;/h1&gt;

&lt;p&gt;In this Thread, I won't show you little extensions that you probably already know, like &lt;a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" rel="noopener noreferrer"&gt;Live Server&lt;/a&gt; or &lt;a href="https://prettier.io" rel="noopener noreferrer"&gt;Prettier&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I'll focus on &lt;strong&gt;USEFUL&lt;/strong&gt; extensions that you &lt;strong&gt;probably don't have or know&lt;/strong&gt;, but of course, I'll also go through some simple ones along the way.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaQFEnXYAAKNak%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaQFEnXYAAKNak%3Fformat%3Dpng%26name%3Dsmall" width="680" height="375"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 1 - BETTER COMMENTS
&lt;/h1&gt;

&lt;p&gt;This extension will &lt;strong&gt;REVOLUTIONIZE&lt;/strong&gt; the way you comment your code!&lt;/p&gt;

&lt;p&gt;With it, you can change the &lt;strong&gt;color&lt;/strong&gt;, &lt;strong&gt;style&lt;/strong&gt;, leave the comment &lt;strong&gt;THE WAY YOU PREFER&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I myself always use it and &lt;strong&gt;WON'T STOP USING IT&lt;/strong&gt;, it helps a lot to make the code beautiful!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaR4ErWwAA8NXV%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaR4ErWwAA8NXV%3Fformat%3Djpg%26name%3Dsmall" width="680" height="534"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 2 - ERROR LENS
&lt;/h1&gt;

&lt;p&gt;You know when you're writing code and need to &lt;strong&gt;ALWAYS COMPILE&lt;/strong&gt; it to then &lt;strong&gt;LOOK FOR THE ERROR&lt;/strong&gt;?&lt;/p&gt;

&lt;p&gt;THAT ENDS HERE! Error Lens shows you &lt;strong&gt;CLEARLY&lt;/strong&gt; where the errors are &lt;strong&gt;WHILE YOU WRITE THE CODE&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;And I'll warn you, it also shows TypeScript alerts hahaha, I highly recommend it!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaR7_9XUAEYtWR%3Fformat%3Djpg%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaR7_9XUAEYtWR%3Fformat%3Djpg%26name%3Dsmall" width="680" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 3 - TABNINE AI AUTOCOMPLETE
&lt;/h1&gt;

&lt;p&gt;You may know others like it, but I assure you, &lt;strong&gt;I'VE BEEN USING THIS FOR YEARS AND NEVER REGRETTED IT&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Even the free version helps you &lt;strong&gt;A LOT&lt;/strong&gt; to write code! It has a VERY complete system, besides being &lt;strong&gt;VERY reliable&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;I DON'T CODE WITHOUT IT ANYMORE! I HIGHLY RECOMMEND IT!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaShqwWQAADkbx%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaShqwWQAADkbx%3Fformat%3Dpng%26name%3Dsmall" width="680" height="618"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 4 - VSCODE ANIMATIONS
&lt;/h1&gt;

&lt;p&gt;This extension &lt;strong&gt;WILL IMPROVE YOUR VSCODE EXPERIENCE BY 1000x&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It adds &lt;strong&gt;simple animations to VARIOUS actions&lt;/strong&gt;, like opening a new file, terminal, etc.&lt;/p&gt;

&lt;p&gt;And believe me! It won't bother you &lt;strong&gt;AT ALL&lt;/strong&gt;! IT'S REALLY WORTH IT!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=BrandonKirbyson.vscode-animations" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaTThBXsAAfM3x%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaTThBXsAAfM3x%3Fformat%3Dpng%26name%3Dsmall" width="663" height="680"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 5 - BOOKMARKS
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;NO MORE GETTING LOST IN CODE&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;With Bookmarks, you can add markers wherever you want!&lt;br&gt;
These markers can have &lt;strong&gt;comments&lt;/strong&gt;, be &lt;strong&gt;customized&lt;/strong&gt;, and all of them appear in a &lt;strong&gt;TAB JUST FOR THEM&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;It's REALLY WORTH IT for large codes, &lt;strong&gt;I HIGHLY RECOMMEND IT&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaZeIWXYAACqDY%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaZeIWXYAACqDY%3Fformat%3Dpng%26name%3Dsmall" width="680" height="652"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 6 - CODE SNAP
&lt;/h1&gt;

&lt;p&gt;You probably already know this one, &lt;strong&gt;BUT WAIT, I'LL SHOW YOU SOMETHING YOU DON'T KNOW&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;With this extension, you take &lt;strong&gt;THE BEST PHOTOS OF YOUR CODE&lt;/strong&gt;, it's perfect for sharing anywhere! even on Instagram to brag about your clean code! hahaha&lt;/p&gt;

&lt;p&gt;And one thing you might not know is that it's &lt;strong&gt;CUSTOMIZABLE&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can change the background, color, opacity, spacing, &lt;strong&gt;EVERYTHING&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;It's really worth it! I ALWAYS recommend it!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaanG3WsAApHFf%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaanG3WsAApHFf%3Fformat%3Dpng%26name%3Dsmall" width="680" height="678"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 7 - VSCODE PETS
&lt;/h1&gt;

&lt;p&gt;I showed this one in the previous post, &lt;strong&gt;BUT IT'S WORTH SHOWING AGAIN&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;With this extension, &lt;strong&gt;YOU CAN PUT PETS IN YOUR VSCODE&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;There are various options for animals, scenarios, you can play with them, &lt;strong&gt;EVERYTHING, IT'S AMAZING&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;IT'S REALLY WORTH INSTALLING OH MY GOD IT'S REALLY WORTH IT&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaaueRXQAA8NIM%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaaueRXQAA8NIM%3Fformat%3Dpng%26name%3Dsmall" width="680" height="673"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 8 - WAKA TIME
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;THIS IS INNOVATIVE, YOU'LL SEE!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;With this extension &lt;strong&gt;YOU CONTROL ALL THE TIME YOU SPENT CODING IN THE WEEK&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It sends you a report about &lt;strong&gt;EVERYTHING&lt;/strong&gt; in the week, with the time you spent on each project, file, &lt;strong&gt;IT'S AMAZING&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Just sign up and make the most of it!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=WakaTime.WakaTime" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaba1zXEAEEoyr%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGaba1zXEAEEoyr%3Fformat%3Dpng%26name%3Dsmall" width="680" height="675"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 9 - GIT HISTORY
&lt;/h1&gt;

&lt;p&gt;If you use Git / GitHub frequently, &lt;strong&gt;THIS EXTENSION WILL SAVE YOU A LOT&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It shows &lt;strong&gt;ALL&lt;/strong&gt; Git history, from commits, pull requests, &lt;strong&gt;EVERYTHING YOU CAN IMAGINE&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;And this with the &lt;strong&gt;SIMPLEST AND MOST INTUITIVE&lt;/strong&gt; design&lt;/p&gt;

&lt;p&gt;Even though it's simpler, &lt;strong&gt;IT'S REALLY WORTH IT&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory" rel="noopener noreferrer"&gt;See more here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGacsZdXcAAr9sN%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGacsZdXcAAr9sN%3Fformat%3Dpng%26name%3Dsmall" width="680" height="629"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ 10 - PEACOCK
&lt;/h1&gt;

&lt;p&gt;If you're a person like me, who always has &lt;strong&gt;MANY&lt;/strong&gt; VSCode tabs open and always gets lost in them, &lt;strong&gt;THIS EXTENSION IS THE SOLUTION&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;With it, you can put &lt;strong&gt;ANY COLOR ON THE GITHUB BORDER&lt;/strong&gt;, making it &lt;strong&gt;UNMISTAKABLE&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;(AND IT STARTED THE POST)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGadqVjXYAA-Jya%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGadqVjXYAA-Jya%3Fformat%3Dpng%26name%3Dsmall" width="680" height="679"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐ BONUS - REGEX PREVIEWER
&lt;/h1&gt;

&lt;p&gt;This one's for you &lt;strong&gt;WHO DON'T KNOW AND DON'T WANT TO KNOW REGEX&lt;/strong&gt; (JUST LIKE ME HAHAHA)&lt;/p&gt;

&lt;p&gt;With this extension, you preview what your RegEx expression does!&lt;/p&gt;

&lt;p&gt;Believe me, &lt;strong&gt;IT WILL HELP YOU A LOT&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=chrmarti.regex" rel="noopener noreferrer"&gt;See more here!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGafd68WoAAtjlC%3Fformat%3Dpng%26name%3Dsmall" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FGGafd68WoAAtjlC%3Fformat%3Dpng%26name%3Dsmall" width="680" height="584"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  😄 - THANK YOU
&lt;/h1&gt;

&lt;p&gt;I hope you liked it!&lt;/p&gt;

&lt;p&gt;If you have any questions, just DM me on Twitter! I'm always available!&lt;/p&gt;

&lt;h3&gt;
  
  
  My social networks:
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://twitter.com/luciano655dev" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/luciano655dev" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  My projects:
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/luciano655dev/DayKeeper" rel="noopener noreferrer"&gt;DayKeeper&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/luciano655dev/better-format" rel="noopener noreferrer"&gt;Better-Format&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  THANK YOU!
&lt;/h2&gt;

</description>
    </item>
    <item>
      <title>HOW TO CUSTOMIZE YOUR VS Code AND Windows TERMINAL!</title>
      <dc:creator>Luciano Menezes</dc:creator>
      <pubDate>Thu, 15 Feb 2024 00:11:38 +0000</pubDate>
      <link>https://dev.to/luciano655/how-to-customize-your-vs-code-and-windows-terminal-4jb4</link>
      <guid>https://dev.to/luciano655/how-to-customize-your-vs-code-and-windows-terminal-4jb4</guid>
      <description>&lt;p&gt;This post is a translation of a Thread posted by me on Twitter! Feel free to see the original version &lt;a href="https://twitter.com/Luciano655dev/status/1757910828320428092" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa4s49r6vwnc6tpomgdtc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa4s49r6vwnc6tpomgdtc.png" alt=" " width="800" height="428"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnen4v6064fmfvwju242a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnen4v6064fmfvwju242a.png" alt=" " width="800" height="428"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⭐WHAT DO WE DO???
&lt;/h1&gt;

&lt;p&gt;In this Post, we will go through themes, vscode settings, fonts, icons, color palette, terminal styling in Windows, EVERYTHING YOU CAN IMAGINE&lt;/p&gt;

&lt;h1&gt;
  
  
  🎆 - VS CODE THEME
&lt;/h1&gt;

&lt;p&gt;The theme I'm using is called "Min Theme", which is very simple, but very good!&lt;/p&gt;

&lt;p&gt;If you want to use a livelier theme, there's "Shades of Purple" which I used for a long time! In addition to "Andromeda", "Tokyo Night" and the famous "Dracula" that you already know!&lt;/p&gt;

&lt;p&gt;Here are the links, choose the one you prefer! Everyone is amazing&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=miguelsolorio.min-theme" rel="noopener noreferrer"&gt;Min Theme&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F70m45vh79lagpuocik1f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F70m45vh79lagpuocik1f.png" alt=" " width="800" height="369"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple" rel="noopener noreferrer"&gt;Shades of Purple (Super Dark)&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F06x5ezvmgtn6lj5qco2i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F06x5ezvmgtn6lj5qco2i.png" alt=" " width="800" height="369"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda" rel="noopener noreferrer"&gt;Andromeda&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9htytjvfb8xbb4u1czfi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9htytjvfb8xbb4u1czfi.png" alt=" " width="800" height="369"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night" rel="noopener noreferrer"&gt;Tokyo Night&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1eshia9wtyeyiusq52dg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1eshia9wtyeyiusq52dg.png" alt=" " width="800" height="369"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula" rel="noopener noreferrer"&gt;Dracula&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8ug6mfjpqjrfz4az7n35.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8ug6mfjpqjrfz4az7n35.png" alt=" " width="800" height="369"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  🗂️- FILE ICONS
&lt;/h1&gt;

&lt;p&gt;Currently, I'm using 'vscode-icons", which I really like! However, one that goes REALLY well with this theme is "Symbols", which follows the minimalist aesthetic!&lt;/p&gt;

&lt;p&gt;These two are the ones I recommend! It's up to you to choose!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons" rel="noopener noreferrer"&gt;vscode-icons&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2x00eht1h713kcrlvq3w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2x00eht1h713kcrlvq3w.png" alt=" " width="226" height="433"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=miguelsolorio.symbols" rel="noopener noreferrer"&gt;Symbols&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9q1ncm9c5mk3kwuwsnre.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9q1ncm9c5mk3kwuwsnre.png" alt=" " width="208" height="434"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  🅰️- VSCODE FONTS
&lt;/h1&gt;

&lt;p&gt;This is the BEST FONT I found, called "JeiBrains Mono"!&lt;/p&gt;

&lt;p&gt;It is a very complete font for devs, containing EVERYTHING you need, such as fontLigatures, Nerd Fonts, etc...&lt;/p&gt;

&lt;p&gt;Another good one is Geist Mono, launched by Versel, which also contains ALL OF THIS&lt;/p&gt;

&lt;p&gt;You choose!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://t.co/uxfLfye86s" rel="noopener noreferrer"&gt;JetBrains Mono&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F061njrk3tfbwvmgmadrs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F061njrk3tfbwvmgmadrs.png" alt=" " width="800" height="388"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://t.co/dM8MErssx2" rel="noopener noreferrer"&gt;Geist Mono&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F845fwbj9eko947lpalgk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F845fwbj9eko947lpalgk.png" alt=" " width="800" height="369"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  ⌨️ - GENERAL SETTINGS
&lt;/h1&gt;

&lt;p&gt;This is where everything will change! I'll show you how to really make VSCode your own!&lt;/p&gt;

&lt;p&gt;Press Ctrl + Shift + P in VsCode and search for "Preferences: Open User Settings (JSON)"&lt;/p&gt;

&lt;p&gt;This is the JSON that goes into all the VS CODE configs! There's a lot to put here, &lt;a href="https://t.co/4NZUZ6o5Dd" rel="noopener noreferrer"&gt;so here is a link to the Rocketseat video explaining everything!&lt;/a&gt; (Portuguese)&lt;/p&gt;

&lt;p&gt;If you just want to get the configs, you can look at his github repository, in the description of this video&lt;/p&gt;

&lt;p&gt;If you want to leave it EXACTLY as mine is, just read it here, which is a simpler version that I customized, but it's not very different!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"symbols.hidesExplorerArrows"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"tabnine.experimentalAutoImports"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"workbench.colorTheme"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Dracula"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"workbench.iconTheme"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"symbols"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"editor.fontFamily"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"JetBrains Mono"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"vscode-pets.theme"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"forest"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"editor.fontSize"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;14&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"editor.lineHeight"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mf"&gt;1.8&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"workbench.startupEditor"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"newUntitledFile"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"editor.renderLineHighlight"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"gutter"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"editor.fontLigatures"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"workbench.editor.labelFormat"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"short"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"explorer.compactFolders"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"editor.semanticHighlighting.enabled"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"breadcrumbs.enabled"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"editor.minimap.enabled"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"workbench.statusBar.visible"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"apc.electron"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"titleBarStyle"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"hiddenInset"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"trafficLightPosition"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"x"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"y"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"frame"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"window.commandCenter"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"apc.header"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"height"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;36&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"apc.stylesheet"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;".title-label &amp;gt; h2"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"display: none"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;".editor-actions"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"display: none"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;".nosidebar .inline-tabs-placeholder"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"width: 75px"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;".pane-header"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"padding: 0 8px"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;".pane-body"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"padding: 8px"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;".split-view-view:first-child .pane-header"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"display: none !important;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;".monaco-list-row"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"border-radius: 4px;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;".monaco-workbench .monaco-list:not(.element-focused):focus:before"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"display: none;"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"apc.listRow"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"height"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;24&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"explorer.fileNesting.enabled"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"explorer.fileNesting.patterns"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"*.ts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"${capture}.js"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"*.js"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"${capture}.js.map, ${capture}.min.js, ${capture}.d.ts"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"*.jsx"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"${capture}.js"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"*.tsx"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"${capture}.ts"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"tsconfig.json"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"tsconfig.*.json"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"package.json"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"terminal.integrated.fontSize"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;14&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"terminal.integrated.fontFamily"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"JetBrainsMono Nerd Font"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"window.density.editorTabHeight"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"compact"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  🎲- MISCELLANEOUS IMPROVEMENTS
&lt;/h1&gt;

&lt;p&gt;To improve it further, go to each panel you don't like, right-click and select "Hidden"&lt;/p&gt;

&lt;p&gt;Do this with "Overview" in Explorer, for example, with "Problems" in the terminal, "Timeline", etc...&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg6stpbnfrdsgsat98edj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg6stpbnfrdsgsat98edj.png" alt=" " width="355" height="317"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  😺- VS CODE PETS
&lt;/h1&gt;

&lt;p&gt;She adds PETS THAT STAY WITH YOU! There are several different animals, you can change the litter, play with them, play ball, EVERYTHING!!!&lt;/p&gt;

&lt;p&gt;BEST EXTENSION EVER!&lt;br&gt;
Leaves the aesthetics AMAZING!!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://t.co/9iTa751pkA" rel="noopener noreferrer"&gt;vscode-pets&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcwfzds6vxaj01mswejly.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcwfzds6vxaj01mswejly.png" alt=" " width="261" height="172"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  🖥️- NOW IN TERMINALLLL
&lt;/h1&gt;

&lt;p&gt;Here, I will style the WINDOWS terminal based on &lt;a href="https://youtu.be/-G6GbXGo4wo" rel="noopener noreferrer"&gt;this video&lt;/a&gt;&lt;br&gt;
, SORRY TO THOSE WHO USE MAC/LINUX MY BAD&lt;/p&gt;

&lt;p&gt;If you want to watch his video, I highly recommend it! VERY good video!&lt;/p&gt;

&lt;h1&gt;
  
  
  🎨- TERMINAL COLOR PALETTE
&lt;/h1&gt;

&lt;p&gt;To see a theme, just choose one you like in the &lt;a href="https://windowsterminalthemes.dev" rel="noopener noreferrer"&gt;Windows Terminal Theme&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In my case, I'm using the "JetBrains Dracula" theme, but when the terminal is inside VS Code, it won't make a difference lol&lt;/p&gt;

&lt;h3&gt;
  
  
  INSTRUCTIONS:
&lt;/h3&gt;

&lt;p&gt;When you find the theme you like on the website, click the "Get Theme" button, which will copy the theme&lt;/p&gt;

&lt;p&gt;In the terminal, click on the arrow -&amp;gt; settings -&amp;gt; Open JSON file (last option) and look for the value "schemes"&lt;/p&gt;

&lt;p&gt;Then, just paste the theme you had copied at the end of the Array and select it from the options! ENJOY!&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3fnt3xx45ir9kcrw8n4b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3fnt3xx45ir9kcrw8n4b.png" alt=" " width="373" height="66"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  🅰️- NERD FONTSSS
&lt;/h1&gt;

&lt;p&gt;A "Nerd Font" is a font that contains dev symbols, such as the node symbol, etc... which REALLY improves the aesthetics of the terminal&lt;/p&gt;

&lt;p&gt;For the terminal font, I will be using the FiraCode Nerd Font, but you can find several others &lt;a href="https://github.com/ryanoasis/nerd-fonts/" rel="noopener noreferrer"&gt;here&lt;/a&gt;!&lt;br&gt;
(If you want, you can even use the JetBrains Mono that is already installed!)&lt;/p&gt;

&lt;p&gt;To install the font, search for it on github, download and install the font by right click + install on all of them&lt;/p&gt;

&lt;p&gt;Then, just go to the terminal and press the arrow -&amp;gt; settings -&amp;gt; Default -&amp;gt; Appearance and select the font you installed!&lt;/p&gt;

&lt;p&gt;Just restart the terminal and be happy!&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frynzasmo1sbswvzamrn4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frynzasmo1sbswvzamrn4.png" alt=" " width="680" height="325"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  🎆- TERMINAL THEMES (GOOD PART)
&lt;/h1&gt;

&lt;p&gt;To put those themes in the terminal, we'll use &lt;a href="https://ohmyposh.dev" rel="noopener noreferrer"&gt;Oh-My-Posh&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;The instructions for doing everything are a little more extensive, but just read the documentation and you'll get the hang of it! Anyway, it's a shame to see the config video I posted!&lt;/p&gt;

&lt;p&gt;It offers VARIOUS themes for your terminal! What I'm using is a simple one, called "neko", just install it and run for the hug&lt;/p&gt;

&lt;p&gt;Make sure WinGet is installed first, otherwise just install the "App Installer" by searching for "WinGet" in the Microsoft Store&lt;/p&gt;

&lt;p&gt;If you have any problems with initializing the theme configuration file, a post that helped me &lt;a href="https://t.co/U2R1C3kaMa" rel="noopener noreferrer"&gt;was this one&lt;/a&gt;, on StackOverflow!&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F47y0te5kah778f7ulhyi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F47y0te5kah778f7ulhyi.png" alt=" " width="385" height="51"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  🎲- OTHER SETTINGS
&lt;/h1&gt;

&lt;p&gt;To improve the terminal a little more, you can make some general settings in the arrow -&amp;gt; Settings -&amp;gt; Appearance&lt;/p&gt;

&lt;p&gt;Then, you can put a background image (Default-&amp;gt;Appearance), make the navigation bar transparent (acrylic mode), put a clear theme, among MANY other things&lt;/p&gt;

&lt;p&gt;Then it's up to you to explore!&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvwvrb921g6vf4058omhb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvwvrb921g6vf4058omhb.png" alt=" " width="679" height="362"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  😄- THANK YOU!
&lt;/h1&gt;

&lt;p&gt;That was Thread, I hope you liked it and found it a good customization for your VS Code!&lt;/p&gt;

&lt;p&gt;If you have any questions, just DM me on Twitter! I'm always available!&lt;/p&gt;

&lt;p&gt;My socials:&lt;br&gt;
&lt;a href="https://twitter.com/luciano655dev" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/luciano655dev" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;My projects:&lt;br&gt;
&lt;a href="https://github.com/Luciano655dev/DayKeeper" rel="noopener noreferrer"&gt;DayKeeper&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/Luciano655dev/better-format" rel="noopener noreferrer"&gt;better-format&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thank you!&lt;/p&gt;

</description>
      <category>customize</category>
      <category>vscode</category>
      <category>terminal</category>
      <category>windows</category>
    </item>
  </channel>
</rss>
