I used this extension before. Every single time i opened the vs code . There is a pop up. And It asked for Upgrade to pro version. that's why i uninstalled it.
Hi Kyle, that O in the name is pronounced like an A. So you end up closer to Kwa-ka, like the Australian pronunciation for the friendliest animal on the continent.
Yes, but this is usefull with static code in Js. What about React code, that need to be compiled? I think Quokka will be blind with outputs of states and bunch of react "compile then run" things...
Love Quokka, but unfortunately it's not *really* a one-time payment. You do get a perpetual license but only for the current version and versions released within 12 months of your license. You need to re-purchase every year (i.e. subscription) to keep using the current version if you don't want to be stuck on an old version with vscode complaining about an outdated extension all the time.
I just asked this question. I think Quokka will be blind with "compile then run" things in Frameworks and libs like Angular, Vue, React, that for sure wont work. Btw, i don't need it, however. I don't even need console log. I know in the future what output will be. After you become a master, you don't need even internet to code. 😁
So it's basically a JS REPL with a couple nifty features like hot-swapping modules without changing your builds. I suppose it's good if you need a 'scratchpad' to do some quick tests but I can't see myself using it that much, though it sure could come in handy when you do need it. Every toolbox has that one tool that sits at the bottom scarcely used, but when you need it; it saves you a lot of time.
@ 0:48 seconds you say, "By coming in here" and type into a field that I see nowhere in my own Visual Studio Code window. Can you specify exactly where it is you are typing? I can't really follow anything else you're saying in this video after this point. Thank you.
It's called the "Command Palette", and if it disappears in your session of Visual Studio, as it did in mine, you have to ctrl shift P or find it on the View menu at the top of the screen.
Great job on all the content! Do u have a running list or video that lists all the extensions u use? If not, would like to see a video where u go over ur setup.
For Python you may want to take a look at Wolf and AREPL Personally I don't think I'd use these extensions during actual development, but it definitely would have saved me a lot of time when I was first starting out. And maybe for minor scripting.
How separate your javascript code accordingly throughout different pages without using a third party library(babel) or copying the same into different JS files? Thanks for the update about Quokka!
It is named after the friendliest animal on the Continent (of Australia), and it is pronounced with an A instead of an O. If pronounced in the proper Australian way, it sounds more like Kwa-ka.
Hello sir! How are you? I am from india working on web development fields as a beginner. So I faced a problem on making a website, the problem is I can't create related videos section in my website, means I want when I click a video than shows releted videos under the video. Can you please help me?🙏
Damn I heard about this extension before but didn't look much into it...can't believe I've been working with javascript for over a year without using it and doing all this console logs and going in the browser to check the result...damn ha ha
Just go 'here' Clicks some hotkey, no mouse-movement, never explains how he got that input bar or what it's called so one can google Tutorial lives and dies by 0:51 for beginners
Hi there, I would like to introduce library called FormJS. Kyle you make a video on it. So the library straight forward and creates form on your webpage. Their are 2 versions available at the moment : 0.1.3(beta) and 0.2.0, I would prefer using 0.2.0 version. So let's see its functionality. const Form = new FormJS.Form(); // creates Form Object Form.init({action: "", method: "get", label: "FormJS Form"}) // init's it Form.fields(["text", "password", ":date", ":time"]); // Creates fields in the form and fields beginning with a ":" are marked optional. Form.setFetchTags(["name", "pwd", "date"]); // Url search tags. Form.setPlaceholder(["Username", "Password"]) // Placeholders Form.configButton("Login Button!"); // Makes form button and also handle callback const Design = new FormJS.FormDesignController(); // Designs Any form Design.init(Form.form); // you need to pass in the form. ex Form.form Design.design(); // Start design process const classesList = new FormJS.classList(Form.form).classList({Form: "form", Submit: "btn", TextBox: "inp"}); // sets Custom Classes
POST requests are not allowed. So you can change the get to Post requests. Let me show you. Form was the variable I used to create form object. I am passing a callback to this function. Form.Form.configButton("Login Button!", (btn) => { btn.addEventListener("click", (e) => { e.preventDefault(); console.log(Form.formData()); // It will return non-inerrable object and inerrable array Form.formData()[0] // for Object Form.formData()[1] // for Array ex : Form.formData()[0][0] // First field data }); }); Thanks!
This seems way more complicated than just using developers tool to do things. That way I have a lot of control of what I'm doing. I know what packages I have installed on my computer (even if just for one file) If you're doing a project you're most likely gonna go to dev tools anyway to see the html or CSS or other cool features browsers have now (especially Firefox) That node modules installation was quite scary to me. I felt like I lost a lot of control.
Typescript enforces your code, but it doesn't do a live run, real-time value printing or checking how much time your code takes to execute. This isn't about making sure you write your code correctly, this is about seeing what are the results of your code. There is no overlap with Typescript.
Hey Kyle, just want to let you know your online courses are amazing but people in my country cant understand them because they dont speak English. So i’m wondering if we could collaborate and I can help translate your courses into my native language and help you sell them in the local market? Lmk if you’re interested. Thanks!
I'm really glad you enjoy my courses. My email is available on the about page of my TH-cam channel. Currently I am not really planning to do translations for my course but it may be something I am open to in the future.
I understand you TH-camrs still gotta get money somehow, but how can you really say "this video is sponsored by the creators of Quokka" and "everything here is my true, honest opinion" without including a single negative comment on Quokka... That reminds me more of an ad than an extension review.
I honestly really like this tool. I wouldn't do a sponsored video of a tool or product I didn't really like. I get hundreds of requests for sponsored videos and turn down 99% of them since they are bad, stuff I wouldn't use, or just not something I like.
@@sadhlife most of the features are what you can already do with typescript. However, the only thing I can see in the paid version is the benchmark but, if you ever feeling like you need benchmark your js code then you prob doing something wrong. There is still jest tho.
@@realgoogleuser yea I'm not saying quokka is worth paying for, but quokka can run tests for you, logical stuff, like showing if the function gives you an error with certain parameters. typescript can't do that, they're different things altogether.
Check out Quokka.js: quokkajs.com/?referrer=wds
Why dont you make reactjs project
❌ using debugger to find errors
✔️ spamming console.logs in your code
Yes.
you described 99.9% of javascript developers
Spammers: debugger..? What it is actually..? How it taste like..?😂🤣
Console-Log-Driven Development
When doing OOP, this becomes a way of life. The console is damn near useless for certain OOP bugs.
Favourite food*
Most people: pizza, burgers etc
Kyle: Rice
rice is pog
rice is bog
Rice is great for when you want two thousand of something
I used this extension before. Every single time i opened the vs code . There is a pop up. And It asked for Upgrade to pro version. that's why i uninstalled it.
I thought this was a cool extension until you pointed that out.
@@muzosh It also not let you to run quokka on the current file. Every time you have to create a new file, which was very annoying to me. #uninstalled
Thank you for not making me waste my time on dowloading this
to be honest the extension is not amazing either, I couldn't think of many use cases that I'd use this. Let alone buying pro version..
@@ilkrsrc081 yeah, they also keep asking to purchase the pro version, every time I launch vscode. #uninstalled_again
at 0:49 he uses Ctrl+Shift+P for people like me that didn't know
Or f1
You are a the bomb! Thank you for fixing that miss on his part.
Try using this extension with create-react-app or Vue, etc. It's basically useless if you're using anything other than plain JS
agreed
I'm looking for a better way to debug Node.js, and I'm kinda frustrated I can't use this. I tried other tools, but I'm still stuck on console.logs :(
It can help if you factor your business logic outside of your components
Hi Kyle, that O in the name is pronounced like an A. So you end up closer to Kwa-ka, like the Australian pronunciation for the friendliest animal on the continent.
Agree, with the first syllable rhyming with "crock"
You probably felt slightly irritated each time he said it wrong :D
Yes, but this is usefull with static code in Js. What about React code, that need to be compiled? I think Quokka will be blind with outputs of states and bunch of react "compile then run" things...
Love Quokka, but unfortunately it's not *really* a one-time payment. You do get a perpetual license but only for the current version and versions released within 12 months of your license. You need to re-purchase every year (i.e. subscription) to keep using the current version if you don't want to be stuck on an old version with vscode complaining about an outdated extension all the time.
Holy crap I am subscribing to this channel
the quick import feature is pretty cool
How does quakka helps with real life projects bigger than 10 lines of console logs or basic if elses? Too many js libraries with any purpose
It might help when creating mock data or tests. Not sure how helpful it can be when you have large projects that deal with external data
Simple & Effective as always
Now i'll install This Quokka.js extension. Thanks for the video Kyle Sir
Great tour of Quokka. Thanks Kyle :)
Does it play well with Angular, Vue, React code?
Would you really need it, honestly?
I just asked this question. I think Quokka will be blind with "compile then run" things in Frameworks and libs like Angular, Vue, React, that for sure wont work. Btw, i don't need it, however. I don't even need console log. I know in the future what output will be. After you become a master, you don't need even internet to code. 😁
@@zlackbiro I code without a computer sometimes
@@stolensentience I code and compile it in my head sometimes
@@venity7 often I’ll compile my rna while asleep
So it's basically a JS REPL with a couple nifty features like hot-swapping modules without changing your builds. I suppose it's good if you need a 'scratchpad' to do some quick tests but I can't see myself using it that much, though it sure could come in handy when you do need it. Every toolbox has that one tool that sits at the bottom scarcely used, but when you need it; it saves you a lot of time.
HELP! when installing quokka from VSCODE it just installing forever and when im installing it from a browser it doesnt install too.
@ 0:48 seconds you say, "By coming in here" and type into a field that I see nowhere in my own Visual Studio Code window. Can you specify exactly where it is you are typing? I can't really follow anything else you're saying in this video after this point.
Thank you.
It's called the "Command Palette", and if it disappears in your session of Visual Studio, as it did in mine, you have to ctrl shift P or find it on the View menu at the top of the screen.
have been using it since several years, fun fun function made me know it
Kyle you are a wizard of magic code to simplify the dev 😍😍😍 thanks you so much for all these great tips for Quokka 🙏
Nice video, I got a problem when I use a (function (){}) () with jsdom plugin, it doesn't work (the plugin) someone know why?
Sweet! Gonna try it out
How do we use this in react app?
Great job on all the content! Do u have a running list or video that lists all the extensions u use? If not, would like to see a video where u go over ur setup.
Thank u for this extension is very helpful 😁
Does something like this exist for python?
How to open that search bar in which u typed quokka open new file ?
Can we use it with react js ?
No ig
For Python you may want to take a look at Wolf and AREPL
Personally I don't think I'd use these extensions during actual development, but it definitely would have saved me a lot of time when I was first starting out. And maybe for minor scripting.
This is amazing thanks.. I'll just get it installed in my editor
How to use it in react jsx files
I am curious if it is able to work with async code. cause most of the time I m fetching data from other servers 😑
It runs your code every time you type a single character, so it's not the best for networking. Also, this is built on Node.js, not any browser
Would you be able to use this with async code like fetch aswell? Im new to async code and it's giving me a headache
i cant hook up HTML with javascript with your method, i dont get the install plugin option in the output area, can you help?
But I never have bugs in my code
Does it work with JS frameworks like Vue?
Can i use quokka with vue js?
amazing! just in time because i was looking to up my debugging and testing skills
Is it works greatly with React Framework?
👀👀 Fantastic, I'll try this out
Definitely something I may buy. Are plugins also for PRO?
Does this work with Asynchrony and API responses?
This sounds like it's going to be very useful for me, I'm just starting to unskill in JS thanks a mil
First of all congratulations on your videos! They're helpful! Do you know of any visual studio code extension such as Quokka for TypeScript?
I’m pretty sure quokka works with typescript
Thanks Kyle
Thats great tool, will it work with react and typescript
both of those are javascript so
Compile then run, no! I will test it.
✅ Install quokka.js
✅ Write simple server using express
✅ Server Running on port 3000
✅ Modify
❌ Port in use, Port in use
How separate your javascript code accordingly throughout different pages without using a third party library(babel) or copying the same into different JS files? Thanks for the update about Quokka!
From programming TH-camrs I hear it called quokka (like Clock ka). Or like quote ka. I wonder which way is right?
I think the pronunciation is the same as that of the animal name "quokka"
It is named after the friendliest animal on the Continent (of Australia), and it is pronounced with an A instead of an O. If pronounced in the proper Australian way, it sounds more like Kwa-ka.
Hello sir! How are you? I am from india working on web development fields as a beginner. So I faced a problem on making a website, the problem is I can't create related videos section in my website, means I want when I click a video than shows releted videos under the video. Can you please help me?🙏
Hey first one here. Love your work Kyle
Does the quokka extension exists also for other languages?
Does it exist for IntelliJ?
Does it work with typescript?
Yep. It does.
@@WebDevSimplified Great! Thanks
2:05 This is what I'm loking for
Cough Typescript cough
@@vintagerealityvr My existing project don't use typescript
Is quokka work for typescript
sadly this doesnt work with ui5 controllers
did you speedup your video a lil bit ? 😅
And i watched his video in 1.25 speed😂
Was wondering if my speed setting was turned up. Seemed really fast
wanna this thing, but for java and python
Luckily I've already installed this before the vid via an extension pack!!!!!! (It had, like, 50 extensions in it.)
Does anyone know whether something like this exist for C++? It would be super helpful in CP for me.
Is this an editor or an extension to an editor? Does it work with/ replace Notepad++?
This is an extension for an editor. I am using VSCode in this video.
@@WebDevSimplified Thanks!
Damn I heard about this extension before but didn't look much into it...can't believe I've been working with javascript for over a year without using it and doing all this console logs and going in the browser to check the result...damn ha ha
Web dev simplified, I hope you're satisfied!
You should make that your jingle!
using it for a while :)
work with typescript?
Yes!
your favorite food is rice?
is your favorite color light tan?
Uninstalled it, everything you do, they ask for pro version. I'm good without it
But I use ms word to write code😭
nice vid, thanks :)
Just go 'here'
Clicks some hotkey, no mouse-movement, never explains how he got that input bar or what it's called so one can google
Tutorial lives and dies by 0:51 for beginners
or you could just live code, then you can do the same things, but also with function paramaters.
Hi there,
I would like to introduce library called FormJS. Kyle you make a video on it.
So the library straight forward and creates form on your webpage.
Their are 2 versions available at the moment : 0.1.3(beta) and 0.2.0,
I would prefer using 0.2.0 version. So let's see its functionality.
const Form = new FormJS.Form(); // creates Form Object
Form.init({action: "", method: "get", label: "FormJS Form"}) // init's it
Form.fields(["text", "password", ":date", ":time"]); // Creates fields in the form and fields beginning with a ":" are marked optional.
Form.setFetchTags(["name", "pwd", "date"]); // Url search tags.
Form.setPlaceholder(["Username", "Password"]) // Placeholders
Form.configButton("Login Button!"); // Makes form button and also handle callback
const Design = new FormJS.FormDesignController(); // Designs Any form
Design.init(Form.form); // you need to pass in the form. ex Form.form
Design.design(); // Start design process
const classesList = new FormJS.classList(Form.form).classList({Form: "form", Submit: "btn", TextBox: "inp"}); // sets Custom Classes
POST requests are not allowed. So you can change the get to Post requests. Let me show you.
Form was the variable I used to create form object.
I am passing a callback to this function.
Form.Form.configButton("Login Button!", (btn) => {
btn.addEventListener("click", (e) => {
e.preventDefault();
console.log(Form.formData()); // It will return non-inerrable object and inerrable array
Form.formData()[0] // for Object
Form.formData()[1] // for Array
ex : Form.formData()[0][0] // First field data
});
});
Thanks!
Sorry I forgot the link : get.cdn-mesh.ga/FormJS/0.2.0/Form.js
thats cool man thx
🔥
You look like a familiar actor from hollywood
This seems way more complicated than just using developers tool to do things.
That way I have a lot of control of what I'm doing. I know what packages I have installed on my computer (even if just for one file)
If you're doing a project you're most likely gonna go to dev tools anyway to see the html or CSS or other cool features browsers have now (especially Firefox)
That node modules installation was quite scary to me. I felt like I lost a lot of control.
Next time java script project ?😁
This extension is the truth
soooo... typescript?
Typescript enforces your code, but it doesn't do a live run, real-time value printing or checking how much time your code takes to execute.
This isn't about making sure you write your code correctly, this is about seeing what are the results of your code.
There is no overlap with Typescript.
Hey Kyle, just want to let you know your online courses are amazing but people in my country cant understand them because they dont speak English. So i’m wondering if we could collaborate and I can help translate your courses into my native language and help you sell them in the local market? Lmk if you’re interested. Thanks!
I'm really glad you enjoy my courses. My email is available on the about page of my TH-cam channel. Currently I am not really planning to do translations for my course but it may be something I am open to in the future.
npm i typescript -g
I understand you TH-camrs still gotta get money somehow, but how can you really say "this video is sponsored by the creators of Quokka" and "everything here is my true, honest opinion" without including a single negative comment on Quokka... That reminds me more of an ad than an extension review.
I honestly really like this tool. I wouldn't do a sponsored video of a tool or product I didn't really like. I get hundreds of requests for sponsored videos and turn down 99% of them since they are bad, stuff I wouldn't use, or just not something I like.
what a sellout. the link in the description is clearly a referral.
if only it's not that expensive...
cmd> npm i typescript
Have a good day
static types are not enough to replace tests tho, but yeah TypeScript is pog
@@sadhlife most of the features are what you can already do with typescript. However, the only thing I can see in the paid version is the benchmark but, if you ever feeling like you need benchmark your js code then you prob doing something wrong. There is still jest tho.
@@realgoogleuser yea I'm not saying quokka is worth paying for, but quokka can run tests for you, logical stuff, like showing if the function gives you an error with certain parameters. typescript can't do that, they're different things altogether.
It’s a great tool but I can’t seem to use it with react even using through their create-react-app repository
at th-cam.com/video/TQXUeGYs8u0/w-d-xo.html what is the shortcut did he use? is it "open file"?
F1 or ctrl shift p (command palette)
seriously? Rice is your favorite food?
Js superman
No more console logging for me!!!!!!
Doesn't seem that useful to me, since I'm working in a complicated framework.
True
Second
I was waondering, is this review paid?
No. But cool idea.
Probably pronounced Kwock-a...
Trust me use typescript ...you need no extension.. typescript is a blessing 🔥🔥
Man this was a heavy sell out cba
Hi Kyle
I need some help with a problem that I have in my JavaScript plz help me
I need to explain it so please give me your contact