![André Casal](/img/default-banner.jpg)
- 561
- 242 126
André Casal
United States
Приєднався 15 чер 2013
📲 I create tools to empower full-stack web devs. 💻 I’ll show you how to build in 2 weeks what it would take you 6 months.
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/
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: typescript.reportStyleChecksAsWarnings
Переглядів 1174 роки тому
VS Code Setting: typescript.reportStyleChecksAsWarnings
Master VS Code: Workspaces: Recommended Extensions
Переглядів 9814 роки тому
Master VS Code: Workspaces: Recommended Extensions
VS Code Setting: terminal.integrated.allowChords
Переглядів 5554 роки тому
VS Code Setting: terminal.integrated.allowChords
VS Code Setting: debug.enableAllHovers
Переглядів 1804 роки тому
VS Code Setting: debug.enableAllHovers
VS Code Setting: terminal.integrated.rightClickBehavior
Переглядів 1464 роки тому
VS Code Setting: terminal.integrated.rightClickBehavior
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
what's the difference between "editor.colorDecorators" vs. "editor.defaultColorDecorators"
Thank you for explaining this concept so clearly - loved how you demonstrated the differences in a practical way.
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
in my vscode the file or folder does not desapear. Why?
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.
Nice video. Video could be a bit louder though.
Yeah, sorry about the mic, I've upgraded since :D
It used to work, but now happens nothing, does it still work for you?
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.
Where to enable that, you did not cover that where is the settings.json file
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.
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 ❤
You're very welcome mate!
Very simple and the best explanation I found so far, thanks.
Thank you so much! :D
Thanks!
You're welcome! :)
I think this setting, doesn't allow for accepting suggestions, at least on text, with Enter key, just by tab.
This setting depends on the "acceptSuggestionOnEnter" setting below it.
This has changed to "matchingDocuments" as the default key, so propose suggestions based on open files of same language.
Thanks for the update mate 👍
This was changed to editor.guides.highlightActiveIndentation for anyone watching in the future.
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.
Nice tip, thanks mate! 🫡
for me mine is enabled.. but still isnt showing
It only shows up if there's something to suggest.
explained nothing
Hey. What are your thoughts on MonoLisa, Gintronic and Codelia fonts ? Would appreciate it .
Can you name some free fonts exactly similar to Monolisa
@@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.
Hey John! Between the 3, I prefer MonoLisa, seems the easiest to read 👌
@ Thanks man
@@johntavolt7027 You're very welcome :)
That was the most simplest, directly and easy to understand explanation I’ve ever found. Thank you very much!
Wow, thank you so much Antonelly! :D
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.
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.
@ Yup me too.. thanks man!
Do you know how to enable html.customData for django-html templates?
I'm sorry I do not 😅
Thanks for sharing!
You're very welcome! :)
doesn't work on php, I set the value to false and the popup still appearing
You might have a PHP extension interfering with that.
how can i remove any wrapping
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.
and the spacing between words?
VS Code doesn't have a word-spacing option unfortunately.
thanks for not showing where to open this file. great.
You mean the settings file? Open the command palette (Shift+Cmd/Ctrl+P) and write User Settings. Select the option that says "JSON".
thank u
You're very welcome!
Setting "files.maxMemoryForLargeFilesMB" is not available anymore. While the editor is very slow at opening even 2-4 MB files when merging conflicts.
Yes, couldn't see it in the settings. Searching for some alternative
Yeah, this setting has been deprecated.
Thanks for making these videos. I just discovered your channel this morning lol. Love the short and straight to the point format.
Amazing, you're very welcome Jimmy! :)
Hi Andre I installed the vscode-icons but the icons shown are so different dont know if other icon theme could be interfering
Make sure you're installing this one: marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
This is now a unknown configuration setting
You're right, this setting has been deprecated.
Seems as this no longer used. Couldn't find anything regarding this.
Yeah, this setting was deprecated.
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.
Yes indeed, thanks Carlos!
This is now deprecated it seems.
Seems like it!
Thank you for the explanation!
You're very welcome!
This is deprecated. Do you have the updated video?
I tried searching for it, but couldn't find the updated setting 🤔
Anyway to set the code folding by braces only?
Hey 👋 Unfortunately not!
Thanks! It was really useful.)))
Awesome, you're very welcome! :)
Amazing! I'm super happy for you that you are now launching your Mastery for VS Code course! - Mark R
Is there a setting so that the diff editor open centered/full width even if you have more than one editor groups/panels active?
Not that I'm aware :/
@ 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
@@ImpostorModanica Ah that's great! Thanks for the heads up!
@ no worries
i cant find these settings with prettier width where do i find it? its not in my settings.json
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.
sorry i was searching for an example.
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
I want in windows open node terminal but have no option to.
You mean you'd want to run node? 🤔 For that you'd have to write "node" on the command line to execute it.
I like 'Courier New', monospace font with comments in italics
It doesn't have ligatures though, does it?
Thank you André
You're welcome David :)
Yo, thank you for this!
You're very welcome! :)
thx
You're very welcome :)
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).
Thank you
You're very welcome!
please let me know which font are u using
I think I was using Operator Mono (with ligatures) in this video.