André Casal
André Casal
  • 561
  • 242 126
Typographical components on the web
Learn about the 4 ways to handle typographical elements on the web and which one's the best way.
Feel free to visit verveui.pro/
Переглядів: 22

Відео

Layout components | VerveUI
Переглядів 322 місяці тому
Find out what makes layout components useful and how to use them. verveui.pro/
How to align components on the edge
Переглядів 232 місяці тому
How to align components on the edge 0:00 - Intro 0:29 - How to visually check for alignment 1:21 - The fix 3:21 - Consistent alignments 5:02 - Thank you
The 80/20 of Visual Regression Testing with Playwright
Переглядів 872 місяці тому
The 80/20 of Visual Regression Testing with Playwright 0:00 - Intro 0:06 - Use case 2:41 - How Visual Regresstion Testing Works 6:38 - Workflow 8:03 - Workflow summary 9:20 - Deploy 9:31 - Skipping CI/CD 10:51 - Thank You!
Intro to Mastery for VS Code ⭐️
Переглядів 134Рік тому
First video of the Mastery for VS Code, which also serves as an intro. Access the course here: andrecasal.com/courses/mastery-for-vs-code
Creating Full Stack Components in Remix: A Step-by-Step Guide
Переглядів 199Рік тому
In this video, you'll learn how to code a full-stack component using Remix, the full-stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. Whether you're a seasoned developer or just getting started, this tutorial will walk you through building a component from start to finish. By the end of the...
Boost Your VS Code Terminal Productivity
Переглядів 775Рік тому
In this video, we take a look at the latest improvements to the integrated terminal in VS Code. We'll start by showing how to customize your terminal prompt theme using ZSH, including how to make it look better and more informative. Next, we'll show you how to improve the terminal font to make it easier to read and more aesthetically pleasing. We'll also show you how to customize the cursor sty...
Top 4 Fonts for Code: The Ultimate Guide for Programmers
Переглядів 1,5 тис.Рік тому
In this video, we will be showcasing the four absolute best fonts for coding. Whether you're a seasoned developer or just getting started, the right font can make a huge difference in your productivity and overall developer experience. We'll be covering everything from easy readability to optimal screen real estate usage. So join us as we take a closer look at the top fonts for coding and find ...
Unlock the Secrets of the Console, Terminal, and Shell: A Beginner's Guide 💻💡
Переглядів 1,2 тис.Рік тому
Confused about the difference between a console, terminal, and shell? Look no further! In this video, we'll clear up the confusion and explain how these three terms are related. You'll learn about the history of mainframe computers and how they were accessed through a piece of hardware called a console, which ran terminal software to communicate with the mainframe. Today, both the console and t...
Get the Best Visual Studio Code Theme for Maximum Productivity and Style!
Переглядів 393Рік тому
Get ready to up your coding game with my top three favorite themes for Visual Studio Code! These beauties will help you crank out code in style: Cobalt2 for syntax highlighting and a sleek look vscode-icons for a professional edge Fluent for a polished product icon theme And if you're feeling inspired, check out my improved settings.json file on GitHub: github.com/andrecasal/VS-Code-Settings #v...
Talk: Self-aware communication
Переглядів 57Рік тому
This was a talk on self-aware communication, given at The Base Cowork Space (goo.gl/maps/QEmcavFdEiCmQS5i6), Lisbon, on the 19th of October 2022 for the Future Founders community. Self-aware communication is a model of communication inspired, but quite different, from the non-violent communication model developed by Marshall Rosenberg. Know more at andrecasal.com
VS Code's built-in browser
Переглядів 2,1 тис.2 роки тому
Hey there, Let's talk about VS Code's built-in browser. 💎 Why it matters Integrations accelerate your work. 🔍 Problem You waste time switching between VS Code and the browser. 💡 Solution Open the command palette (⇧ Ctrl/⌘ P) and write Simple Browser: Show. 🎯 When should I use it? When you don't need debugging or the browser's DevTools. Want more? Click here and subscribe to VS Code's Newsletter...
Web Dev for 2022 🧑‍💻
Переглядів 1182 роки тому
Web Dev for 2022 🧑‍💻 Here's the roadmap Basics of the internet: The OSI model The HTTP Protocol The DNS Protocol HTML (developer.mozilla.org/en-US/docs/Web/HTML/Element): Tags, attributes and values Main html tag The head tag and document metadata The body tag Content sectioning Text content Inline text semantics Image and multimedia Embedded content SVG and MathML Scripting Table content Forms...
Organization for Students
Переглядів 402 роки тому
Organization for Students Click here to buy the course: www.andrecasal.com/organization-for-students/
How to avoid PAIN in communication
Переглядів 952 роки тому
I just felt the urge to talk about my own NVC model of communication. This is my take on a few improvements to the traditional NVC model. The traditional Nonviolent Communication (NVC) model: 1. Observations 2. Feelings 3. Needs 4. Requests New model: 1. Observations 2. Interpretations 3. Feelings 4. Declaration I hope you've enjoyed this video, like and subscribe for more videos like this!
Housekeeping update: Launch of the Master VS Code course, focus on JS, and price decrease
Переглядів 1073 роки тому
Housekeeping update: Launch of the Master VS Code course, focus on JS, and price decrease
VS Code Setting: editor.tabSize
Переглядів 1,1 тис.3 роки тому
VS Code Setting: editor.tabSize
VS Code Setting: editor.fontFamily
Переглядів 4633 роки тому
VS Code Setting: editor.fontFamily
VS Code Setting: editor.fontSize
Переглядів 803 роки тому
VS Code Setting: editor.fontSize
VS Code Setting: files.autoSave
Переглядів 1283 роки тому
VS Code Setting: files.autoSave
Deno: All You Need To Know
Переглядів 1484 роки тому
Deno: All You Need To Know
Channel update 2020-04-29
Переглядів 2114 роки тому
Channel update 2020-04-29
Quick update on channel direction
Переглядів 1954 роки тому
Quick update on channel direction
VS Code Setting: typescript.reportStyleChecksAsWarnings
Переглядів 1174 роки тому
VS Code Setting: typescript.reportStyleChecksAsWarnings
Master VS Code: Workspaces: Recommended Extensions
Переглядів 9814 роки тому
Master VS Code: Workspaces: Recommended Extensions
Master VS Code: Workspaces
Переглядів 17 тис.4 роки тому
Master VS Code: Workspaces
VS Code Setting: terminal.integrated.allowChords
Переглядів 5554 роки тому
VS Code Setting: terminal.integrated.allowChords
VS Code Setting: markdown.trace
Переглядів 1074 роки тому
VS Code Setting: markdown.trace
VS Code Setting: debug.enableAllHovers
Переглядів 1804 роки тому
VS Code Setting: debug.enableAllHovers
VS Code Setting: terminal.integrated.rightClickBehavior
Переглядів 1464 роки тому
VS Code Setting: terminal.integrated.rightClickBehavior

КОМЕНТАРІ

  • @AbraKadabra000
    @AbraKadabra000 12 днів тому

    you won't be able to see the difference in font smoothing if you just zoom in vscode, you need to take a screenshot and zoom it

  • @JohnSmithZen
    @JohnSmithZen 14 днів тому

    what's the difference between "editor.colorDecorators" vs. "editor.defaultColorDecorators"

  • @MaryMcGowan-kj1gb
    @MaryMcGowan-kj1gb 26 днів тому

    Thank you for explaining this concept so clearly - loved how you demonstrated the differences in a practical way.

  • @renanmalato
    @renanmalato Місяць тому

    Hi, I'm trying to make break lines on props like style={} onPress={} , like your code is on 0:38 how can I manipulate that on prettier? thank you tried a bunch of things nothing worked

  • @ramonjales9941
    @ramonjales9941 2 місяці тому

    in my vscode the file or folder does not desapear. Why?

    •  2 місяці тому

      There could be settings in your .vscode folder overwriting your user settings. You could also have an extension messing with that. Run 'code --disable-extensions' to start VS Code without extensions to check that out.

  • @nixes1636
    @nixes1636 2 місяці тому

    Nice video. Video could be a bit louder though.

    •  2 місяці тому

      Yeah, sorry about the mic, I've upgraded since :D

  • @kungfooman
    @kungfooman 3 місяці тому

    It used to work, but now happens nothing, does it still work for you?

    •  2 місяці тому

      Yes it does. Maybe you have an extension interfering with that? Also make sure you're testing it on a place where you are sure a suggestion should appear.

  • @user-yl7iz4qt4j
    @user-yl7iz4qt4j 3 місяці тому

    Where to enable that, you did not cover that where is the settings.json file

    •  2 місяці тому

      Here it is: Shift+Cmd/Ctrl+P to open the command palette. Write "user settings" and choose the option that includes "(JSON)". This will open this file, but it will be (mostly) empty. I added all the settings to my settings.json file so I could explore them all and make these videos.

  • @user-lv9vv8rm4j
    @user-lv9vv8rm4j 3 місяці тому

    Even after 4 years i found this tutorial extremely usefull. I don't know if something has changed in its functionality but thank you very much ❤

    •  2 місяці тому

      You're very welcome mate!

  • @karthicragunath7460
    @karthicragunath7460 4 місяці тому

    Very simple and the best explanation I found so far, thanks.

    •  2 місяці тому

      Thank you so much! :D

  • @erickrh
    @erickrh 5 місяців тому

    Thanks!

    •  2 місяці тому

      You're welcome! :)

  • @Bang2Highlights
    @Bang2Highlights 5 місяців тому

    I think this setting, doesn't allow for accepting suggestions, at least on text, with Enter key, just by tab.

    •  2 місяці тому

      This setting depends on the "acceptSuggestionOnEnter" setting below it.

  • @Bang2Highlights
    @Bang2Highlights 5 місяців тому

    This has changed to "matchingDocuments" as the default key, so propose suggestions based on open files of same language.

    •  2 місяці тому

      Thanks for the update mate 👍

  • @Bang2Highlights
    @Bang2Highlights 5 місяців тому

    This was changed to editor.guides.highlightActiveIndentation for anyone watching in the future.

  • @Bang2Highlights
    @Bang2Highlights 5 місяців тому

    You can use a low "editor.mouseWheelScrollSensitivity" something like 0.5 and place "editor.fastScrollSensitivity" to something like 5 or 8 like a big number, this way normal scroll will be slow and holding alt will make it X (whatever you set it) times faster. Giving you a way to alternate between slow and fast scrolling.

    •  2 місяці тому

      Nice tip, thanks mate! 🫡

  • @theonewhowas7709
    @theonewhowas7709 6 місяців тому

    for me mine is enabled.. but still isnt showing

    •  2 місяці тому

      It only shows up if there's something to suggest.

  • @aleksandrkravtsov8727
    @aleksandrkravtsov8727 7 місяців тому

    explained nothing

  • @johntavolt7027
    @johntavolt7027 7 місяців тому

    Hey. What are your thoughts on MonoLisa, Gintronic and Codelia fonts ? Would appreciate it .

    • @Yesterday_i_ate_rat
      @Yesterday_i_ate_rat 7 місяців тому

      Can you name some free fonts exactly similar to Monolisa

    • @johntavolt7027
      @johntavolt7027 7 місяців тому

      @@Yesterday_i_ate_rat I have used Source Code Pro which is free and is 88 percent like MonoLisa (excluding the gothics like monolisa). Another free font is Maple Mono. Also if you like Fira Code then there is Commit Mono.

    •  2 місяці тому

      Hey John! Between the 3, I prefer MonoLisa, seems the easiest to read 👌

    • @johntavolt7027
      @johntavolt7027 2 місяці тому

      @ Thanks man

    •  2 місяці тому

      @@johntavolt7027 You're very welcome :)

  • @antonnelly
    @antonnelly 9 місяців тому

    That was the most simplest, directly and easy to understand explanation I’ve ever found. Thank you very much!

    •  2 місяці тому

      Wow, thank you so much Antonelly! :D

  • @brookster7772
    @brookster7772 9 місяців тому

    As a Visual Studio (not code) user I have also been struggling with this "little" issue for years now. Visual Studio has a "Solution" concept that does the job. And What about "Profiles" we need to fit that into the picture. Would love if you can do an update video. keep up the great work your doing for the community! Cheers Mate.

    •  2 місяці тому

      Thanks mate! Frankly, I've just given up trying to use codespaces at all. I just keep independent VS Code windows opened, one for each repo.

    • @brookster7772
      @brookster7772 2 місяці тому

      @ Yup me too.. thanks man!

  • @hedgehogform
    @hedgehogform 9 місяців тому

    Do you know how to enable html.customData for django-html templates?

    •  2 місяці тому

      I'm sorry I do not 😅

  • @randyv744
    @randyv744 10 місяців тому

    Thanks for sharing!

    •  2 місяці тому

      You're very welcome! :)

  • @gustavovasquezveliz7046
    @gustavovasquezveliz7046 10 місяців тому

    doesn't work on php, I set the value to false and the popup still appearing

    •  2 місяці тому

      You might have a PHP extension interfering with that.

  • @rsvaibhavchandra45
    @rsvaibhavchandra45 10 місяців тому

    how can i remove any wrapping

    •  2 місяці тому

      That depends if you're using Prettier or not. If you are, give the "print width" option a big value like 999 and the lines will not wrap.

  • @healthyhater
    @healthyhater 11 місяців тому

    and the spacing between words?

    •  2 місяці тому

      VS Code doesn't have a word-spacing option unfortunately.

  • @raqifmahat
    @raqifmahat 11 місяців тому

    thanks for not showing where to open this file. great.

    •  2 місяці тому

      You mean the settings file? Open the command palette (Shift+Cmd/Ctrl+P) and write User Settings. Select the option that says "JSON".

  • @bbnoWhat
    @bbnoWhat 11 місяців тому

    thank u

    •  2 місяці тому

      You're very welcome!

  • @bartek4210
    @bartek4210 11 місяців тому

    Setting "files.maxMemoryForLargeFilesMB" is not available anymore. While the editor is very slow at opening even 2-4 MB files when merging conflicts.

    • @ishitapramanick6445
      @ishitapramanick6445 6 місяців тому

      Yes, couldn't see it in the settings. Searching for some alternative

    •  2 місяці тому

      Yeah, this setting has been deprecated.

  • @jimmyvo1667
    @jimmyvo1667 11 місяців тому

    Thanks for making these videos. I just discovered your channel this morning lol. Love the short and straight to the point format.

    •  2 місяці тому

      Amazing, you're very welcome Jimmy! :)

  • @JoseHernandez-qk5by
    @JoseHernandez-qk5by Рік тому

    Hi Andre I installed the vscode-icons but the icons shown are so different dont know if other icon theme could be interfering

    •  2 місяці тому

      Make sure you're installing this one: marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

  • @carlosmed_
    @carlosmed_ Рік тому

    This is now a unknown configuration setting

    •  2 місяці тому

      You're right, this setting has been deprecated.

  • @carlosmed_
    @carlosmed_ Рік тому

    Seems as this no longer used. Couldn't find anything regarding this.

    •  2 місяці тому

      Yeah, this setting was deprecated.

  • @carlosmed_
    @carlosmed_ Рік тому

    This is now deprecated: This setting is deprecated. Use extensions.ignoreRecommendations setting to control recommendation notifications. Use Extensions view's visibility actions to hide Recommended view by default.

    •  2 місяці тому

      Yes indeed, thanks Carlos!

  • @carlosmed_
    @carlosmed_ Рік тому

    This is now deprecated it seems.

    •  2 місяці тому

      Seems like it!

  • @itzvoko1
    @itzvoko1 Рік тому

    Thank you for the explanation!

    •  2 місяці тому

      You're very welcome!

  • @Arul0114106
    @Arul0114106 Рік тому

    This is deprecated. Do you have the updated video?

    •  2 місяці тому

      I tried searching for it, but couldn't find the updated setting 🤔

  • @ofresh333
    @ofresh333 Рік тому

    Anyway to set the code folding by braces only?

    •  2 місяці тому

      Hey 👋 Unfortunately not!

  • @OlegLKurnyavko
    @OlegLKurnyavko Рік тому

    Thanks! It was really useful.)))

    •  2 місяці тому

      Awesome, you're very welcome! :)

  • @FaeTools
    @FaeTools Рік тому

    Amazing! I'm super happy for you that you are now launching your Mastery for VS Code course! - Mark R

  • @ImpostorModanica
    @ImpostorModanica Рік тому

    Is there a setting so that the diff editor open centered/full width even if you have more than one editor groups/panels active?

    •  2 місяці тому

      Not that I'm aware :/

    • @ImpostorModanica
      @ImpostorModanica 2 місяці тому

      @ They improved it since by having the diff open in a single panel by default when more than one group is displayed, with diff sections appearing one beneath the other, instead of side by side in two split panels

    •  2 місяці тому

      @@ImpostorModanica Ah that's great! Thanks for the heads up!

    • @ImpostorModanica
      @ImpostorModanica 2 місяці тому

      @ no worries

  • @keklamo1485
    @keklamo1485 Рік тому

    i cant find these settings with prettier width where do i find it? its not in my settings.json

    •  2 місяці тому

      Hey there 👋 These settings are not there by default, you'd have to install the Prettier extension: marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode You can copy+paste these settings or press Ctrl+Space to activate autocompletion to see which ones you'd have.

  • @christianh.1160
    @christianh.1160 Рік тому

    sorry i was searching for an example.

    •  2 місяці тому

      Hey Christian, these settings aren't needed anymore. If you need a proxy, after you have configured your system with your proxy settings, start VS Code with --proxy-server=<scheme>=<uri>[:<port>][;...] | <uri>[:<port>] | "direct://" You can insert that into the VS Code link itself. Checkout the documentation on that: code.visualstudio.com/docs/setup/network

  • @pauliuskomolovas4079
    @pauliuskomolovas4079 Рік тому

    I want in windows open node terminal but have no option to.

    •  2 місяці тому

      You mean you'd want to run node? 🤔 For that you'd have to write "node" on the command line to execute it.

  • @brinker50
    @brinker50 Рік тому

    I like 'Courier New', monospace font with comments in italics

    •  2 місяці тому

      It doesn't have ligatures though, does it?

  • @davidpaez_co
    @davidpaez_co Рік тому

    Thank you André

    •  2 місяці тому

      You're welcome David :)

  • @danielkim1255
    @danielkim1255 Рік тому

    Yo, thank you for this!

    •  2 місяці тому

      You're very welcome! :)

  • @1MyWarface1
    @1MyWarface1 Рік тому

    thx

    •  2 місяці тому

      You're very welcome :)

  • @olegshubaly3423
    @olegshubaly3423 Рік тому

    But if you need more than 1 browser tab, I recommend the "VS Browser" extension for VS Code. (A new tab is created by clicking on "VS Browser" in the right corner of the status bar).

  • @olegshubaly3423
    @olegshubaly3423 Рік тому

    Thank you

    •  2 місяці тому

      You're very welcome!

  • @n1ka_
    @n1ka_ Рік тому

    please let me know which font are u using

    •  2 місяці тому

      I think I was using Operator Mono (with ligatures) in this video.