18 ms·
30-Day Vanilla JavaScript Coding Challenge
- reimertz 10y agoSuch a neat idea to introduce web technologies(or anything). 1. hand people an idea that is easy and funny yet complex. 2. give them the tools to be able to do it. 3. make them do it 4. repeat 1-3 thirty times This is how I learn things and argue that it is the most efficient way to learn something for certain people.
- jagermo 10y agoFor me as well. I get bored pretty quickly if it is just theory. I look forward to these courses over the holidays.
- pvdebbe 10y agoNightmare level: code should be compatible with both IE6 and Firefox 50
- egeozcan 10y agoLike doing the impossible? Create a responsive layout with 3 sections (header, content, sidebar) that will look exactly the same in the given browsers (at the same resolution) while still looking great on mobile, without any JavaScript or even server-side feature detection. Bonus points for minimal number of CSS hacks. Seriously, remembering the stuff I had to deal with, in today's world of the "modern browsers", I feel like I changed my profession completely. In other words, I'm afraid that me from 10 years ago wouldn't be able to understand so much from the front-end code I write these days and I'm also not sure about the vice versa. The opposite are, although that I don't enjoy the language too much, my Java projects which feel like they are immortal. I wonder if and when JavaScript will be that mature.
- mikekchar 10y agoNot really an apples to apples comparison. With JS and the browser, you are distributing the runtime libraries separately from the application. Imagine having to write a GUI app in Java that would work with every JRE version. The other thing is that Sun owned the standard. So even if you were IBM and were making your own runtime environment, you couldn't call it Java unless Sun agreed. Imagine if you had multiple vendors supplying a JRE and several of them were intentionally breaking their versions to lock users into their implementation. Lately the browser vendors have started to work a little bit better with each other, but I doubt it will ever be like Java.
- egeozcan 10y agoYes, you are right. I wasn't complaining though, as I understand the reason behind the current state of things. It was more of a wish, to be clear. However, in the end, we are still getting something close to Java with Web Assembly (Stable byte-code-like platform and potentially many languages targeting it).
- pvg 10y agoImagine having to write a GUI app in Java that would work with every JRE version. You don't have to imagine. Just tried it: http://i.imgur.com/zBNkKTu.png http://i.imgur.com/zBNkKTu.png Netscape IFC, 1996-1997 vintage. Compiles and runs like a champ on JDK 8, current OS X. Just like it did on JDK 1.
- lojack 10y agoI could do it if there was reasonable limits on the viewport size of IE browsers. For instance, if the IE6 window will always be at least 1024px wide. Once you need to give IE6 responsiveness, the only way I could imagine doing it would rely almost exclusively on CSS hacks.
- opvasger 10y agoApplied tool - Babel?
- userbinator 10y agoThat reminds me of how the demoscene has a JavaScript demo category now, which usually targets the latest browser(s) with all the new JS features. It also has the usual native demos on the latest PC, and retro demos on platforms like the Atari, C64, and ZX Spectrum. Perhaps it should also have a "retro browser" category for IE6, Firefox 2.x, and the like. ...but I feel that someone would just find an exploit in JS, break out of the sandbox, and use that to run a native demo instead.
- deleted 10y ago[deleted]
- skrebbel 10y agothe common demoscene platforms and filesize limits bring limits that make the coding fun, exciting, challenging. IE6 seems to me like an arbitrary limit that just makes life horrible without much gain. i don't think sceners are going to target retro browsers soon.
- pvdebbe 10y ago...or if they do target something retro, maybe Netscape Navigator or similar icon. IE6 is maybe infamous, not very nostalgic in any way.
- tripzilch 10y agothe retro categories are because sceners also enjoyed and used to code demos for the C64 and Amiga platforms when they were popular back in the day. While you could do some funky stuff with IE6 JS, you also couldn't really do anything. Don't forget how utterly slow JS was back then, not because the computers were slower, but because it was interpreted and run token-by-token in a very inefficient manner. This, and nobody took it seriously then as a language to write actual applications in. If a scener had to do something splashy in the browser, they'd go for Flash (and still groan about its lack of performance). If you told someone back then about "asm.js", they'd think you were making a joke, and a pretty funny one at that (like if you told them Microsoft would become a platinum member of the Linux Foundation kind of joke back then). > ...but I feel that someone would just find an exploit in JS, break out of the sandbox, and use that to run a native demo instead. Well, there's rules. There always have been rules. You can't read out default icons, themes, desktop background images from the system folder to obtain some nice stock graphics for use in a 4096 byte demo, either. If your entry hacks the compo machine and doesn't do it with an extreme amount of grace and style, expect to be booed off stage. With sufficient style and awesomeness, you might just get disqualified :)
- shakna 10y agocry On a website I maintain, almost 70% of users use IE7. We tried to get them to update, but no results.
- the_cat_kittles 10y agoi guess that is how i learned javascript too, except those projects were paid sunglasses guy emoji
- johnomarkid 10y agoNo frameworks, no boilerplate - this is a great idea. I've seen too many junior developers go straight into learning React/Redux, or using bootstrap, or plugging in some library like velocity.js. It's often easier, more efficient, and more maintainable to use plain javascript with web APIs.
- globuous 10y agoVery true. I remember wanting to throw my computer out the window when I had errors relative to this, pass by ref, or when a callback gets called when learning js through react/redux. But I think react is what motivated me to learn js in the first place, so it goes both ways. Indeed, I think the best way to learn a coding is motivation. And the best motivation is making something you cherish. To me, it was a music web app I'm still working on. I had tried to learn JS many times in the past and had never succeeded. React allowed me to structure my code (the wrong way at first, I had everything in react components not just view logic, but gave me structure none the less) and think about my UI in an object manner. Moreover, this way, I ran into problems, looked for solutions and learned this way. As opposed to learning solutions and finding problems they solve. Little by little I got to see why I might need react-router and redux. Redux made my life so much easier (no need to pass state in a hierarchical way anymore, any component can read and modify state of other components regardless of relative tree position, and in a safe explicit way). After a year of having learned frontend this way, I consider myself a js coder. I made a fairly simple website the other day (just django + jquery) I'm kinda proud of. This web app was the first and only web project I had ever done, and this jquery website was done in a couple days. My third ever project (I'm working on it as I'm writing this) is a cfd solver in js using web workers and SIMD for the solver and react/redux/d3 for the frontend. I've tried to learn to code so many time to be able to spin up projects like this (in this case, to review and practice my cfd, not build airplanes), and I was never able to because I never had the motivation to finish learning about ifs and loops of whatever language whenever I started reading a book about it. The hardest thing about learning js through react is that a js beginner wants to user JSX. I came from HTML (a whiiiile ago), so it made (and still makes) sense for me to use JSX (and it made zero sense to me not to use it). The problem of course, is that I had to introduce myself with babel and browserify (because even the latest Safari doesn't understand JSX). But once that's set up, you've already understood about npm and compilation. So you pretty much already know how to use ES# or SASS if you want to use it. And minifying is just a few lines of code and SO answers away. I guess this has become the story of "how I learned to code", but I wanted to share how starting with a "it's too complex for a beginner" project and jumping straight into react/redux and skipping over vanilla could be beneficial if one has the motivation to finish the project but not the attention span to go through vanilla beforehand. Because one will have to learn vanilla to succeed at anything anyway, but by making stuff you really care about at the same time in this case. Btw, I think what got me to say "fuck it, I'll jump straight into react and build shit, fuck all these tutorials" was that I read a while ago a quote about the tumblr guy saying something along the lines of "the only way to learn to code is to make a project you care about" and my older brother telling me "learn django, you'll be able to make websites and you'll have learned some python at the same time" (he's an experienced coder knowing I was not).
- acrynx 10y agoThis is just awesome, thanks a lot to the author! Doing it right now. Great selection of exercises, great videos and it's loads of fun! What's the name of the song playing in the beginning of each video? EDIT: This made me realize how much browsers have improved over the years and how much you can actually do with just HTML5, CSS3, ES6 and browser APIs today. Really helps you take a step back and see your daily use of frameworks and libraries like React, Redux etc. in a different light. I definitely learned something from this.
- felixthehat 10y agoThe music is by The Divided, he mentioned it in this tweet https://twitter.com/wesbos/status/806925026377207808 https://twitter.com/wesbos/status/806925026377207808
- rendall 10y agoI attempted to sign up using Internet Explorer 11 and got a bug that prevented it. Furthermore, the submit button says [Join 19,175]. LOL.
- agumonkey 10y agoWho else really only strive on challenge of this sort ?
- kasparsklavins 10y agoObligatory http://youmightnotneedjquery.com/ http://youmightnotneedjquery.com/ Although its more aimed at library devs.
- lobo_tuerto 10y agoOn the same vein: https://news.ycombinator.com/item?id=13136751 https://news.ycombinator.com/item?id=13136751
- eswat 10y agoand https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore https://github.com/you-dont-need/You-Dont-Need-Lodash-Unders...
- singularity2001 10y agoDoesn't work in Firefox with FB... blocked
- TimMeade 10y agoAs ones who has done Wes's React and Redux course, we have found him to be one of the best instructors out there. He seems to grasp how to teach and not just show by example. All levels seems to get a lot form his work. Funny also... Kudos and highly recommended.
- wesbos 10y agoThanks Tim - glad you have been enjoying my teaching style - means a lot to me!
- tjbarbour 10y agoHaving fun with this, day 1 http://htmlpreview.github.io/?https://github.com/tjbarbour/JavaScript30/blob/master/01%20-%20JavaScript%20Drum%20Kit/index-START.html http://htmlpreview.github.io/?https://github.com/tjbarbour/J...
- wesbos 10y agoBest one yet!
- tjbarbour 10y agoThanks wes! You're a great course creator & fun to follow!
- nkozyra 10y agoProbably just the drummer in me, but it's driving me nuts that there isn't something like this: <audio class="closedhihate" data-key="83" data-stop="audio.openhihat" src="sounds/hihat.wav"></audio>
- tjbarbour 10y agohaha! Fork it ;)
- toxican 10y agoHoping this is just a one time issue, but in the first tutorial: >const keys = document.querySelectorAll('.key'); is provided, but it will trigger an error in the console. As far as the video is concerned this is part of the final code. However, if you look at the starter files, there's a final version of the the code and that line has changed to: >const keys = Array.from(document.querySelectorAll('.key')); Which of course works fine. Kind of inconvenient to have to turn to the the source files to learn how to do it right from a video. It may be possible that I just missed a video annotation, which is completely possible given my approach to these kinds of things (code while I watch).
- sscotth 10y agoBrowsers recently added `forEach` methods to NodeLists. Make sure you are using the latest version of your browser. Array.from(...) may make it work with somewhat older browsers. https://developer.mozilla.org/en-US/docs/Web/API/NodeList https://developer.mozilla.org/en-US/docs/Web/API/NodeList
- clifanatic 10y agoNext month - 30 days of web coding using only vanilla C! Day 1: write a web browser! (I kid, this is awesome)
- a12k 10y agoThis is great! Some of the frameworks/libraries are great, but not always. I've been systematically pulling unnecessary libraries out of plugins for use in my own projects. Here's one I just did, where I pulled jQuery out of the plugin: https://a12k.io/reallysimpleweather https://a12k.io/reallysimpleweather
- joeax 10y agoEvery junior developer should start out learning nothing but HTML+CSS+JS. It's so beneficial to understand the quirks and gotchas of these three and how they interact, to really appreciate how these technologies evolved. I have a young son who's coding on code.org and Scratch, and I'd love to get him into pure web development. Kudos to Wes Bos for setting this up.
- vegabook 10y agoThis scientific programmer (python/R/C) thanks you for an amazing resource. I have been looking to augment my Python knowledge with a new, faster scripting language. Lua(jit) was my first choice, but JS is so fast these days, and is so strong on visualization, that it is now supplanting Lua for me as first choice. But the JS ecosystem is so vast, so full of "offshoot dialects" (jquery, coffeescript, ES6, Typescript, not to mention all the frameworks) that it is quite daunting for a beginner. This therefore is exactly what I was looking for. You've just spoken for my Christmas break!
- alexhakawy 10y agowow love it
- pkkim 10y agoGreat course! I'm using it right now and it's some nice hands-on practice. One nitpick: In video 14 about references vs copies, around 2:20, you say, "`team` is not the array, `team` is just a reference to the original array, which is `players`." It's a little ambiguous but to me it sounds like you're saying that the variable `players` is somehow special and different from the variable `team`, as if it's not just another reference to an underlying array. This seems like it could confuse newbies.