Getting started with Javascript
I am currently learning responsive web design and "mobile-first" development, and it looks like I need to finally break down and learn Javascript.
My approach to learning new languages is to learn the pure language before getting off into the weeds learning frameworks and so on.
Is it possible to learn just Javascript?
And is there a certain version of Javascript I should learn? (Many years ago I recall there being a fork maybe between JavaScrpt II and JavaScript 6 or something like that and all I remember is that it mattered which path you took.
Right now I just need to learn enough JavaScript to help with mobile issues like hamburger menus, menus coming in from off screen, and other mobile "metaphors" that can't be done with just HTML and CSS.
P.S. I am new to Discord and not really familiar with how it works - I am an old dog used to online user forums and BBCode - so sorry if I'm not doing this correctly!
141 Replies
Is it possible to learn just Javascript?
=> totally !!! and i'll add : it's the correct approche when learning JS. "vanilla JS" then choose a framework
as for the versions : look for ES6 and higher
many modern features were added from there
and with es6, there was a HUGE set of changes
we got classes, fat arrow functions, await promises and so much more
just make sure you get familiar with how data types work and the basic javascript syntax
I am glad to hear that! (In the past some many strangers online have been trying to FORCE ME to learn frameworks and I don't understand why?!)
What version of raw Javascript is being used in 2024? (I thought ES6 was from like 10 years ago?)
I find how JavaScript is described as confusing... I am used to things like HTML5, CSS3 - although that is a bad example afte rthe fork, PHP5, and so on.
Okay, so another dumb question(s)... Is Javascript something I have to install, or is it just there? Like I was pondering this the other day... Where does HTML exist? Where does CSS exist? The best I can figure is that browsers come pre-loaded with things like HTML, CSS, and Javascript? I ask because since I know nothing about Javascript, and I want to learn pure Javascript, I need to know how to get it so I can start coding in it. As some background, I am a Mac guy, and in the past I used MAMP as my PHP and MySQL webserver for dev. I have been away from coding for like 10 years, and my dream is to build a mobile e-comemrce site - for my startup - and to code it in HTML5, CSS3, maybe a little Javascript, and maybe switch to Python. If I can keep using MAMP that would make my life much easier...
it's just there, in the browser
when you do
<script> or <script src="filename.js">, the code simply runs
what you may need, way later on, is node.js or bun, but that's WAAAAAAAAAAAAAAAAAY laterSo browsers know how to process HTML, CSS, and JS all by themselves?
So they have built in interpretors?
yup
and that has been the case for almost 30 years
A ha
That being said, then what version of Javascript would be built into Firefox and Chrome (and maybe Edge) in 2024?
i think they switched up the names, and im not sure about it
but you should learn es6 and newer
What would be newer?
Is there ES7? 🙂
(What does "ES6" stand for?
es6 means "ecmascript 6"
but you may see other names like "es2015"
you might also see "tc39"
Just search online for what you want your script to do and how to do that in javascript. If you find a recent answer, it probably uses recent features of javascript.
Isn't MAMP a php server? So.. I would probably advise you to determine what tech stack you want to use... the web world has changed a looooooot since > 10 years back. Do you want to use php, or do you maybe want to use serverless / edge functions for you backend. If you want php, maybe laravel would be better to learn than javascript.
If you just want to quickly setup a webshop, maybe something like Shopify would be better.
What version of Javascript would the latest version of Firefox and Chrome support? (Is there a way to find out?)
They all support the latest stuff
It's mostly css that has features not all browsers support
MAMP is like LAMP with M being Mac. Yes, it is a webserver that supports PHP and MySQL so when MAMp is installed, I can write code in NetBeans, and then press (?) Shift + F6 I think, and I have a live page served up in Firefox. No fiddling with Sys Admin stuff that id ont know
I am thinking of shifting to Pythin, but I need to do some more reseach - and get some reassurance that i wont regret that! 😉
Yeah, but Shopify is cheating. I want a home grown site that I build and can make it mine
If your goal is to have a succesful website for a successful business, then it isn't cheating. If learning how to build a website yourself is a higher priority, then maybe yes.
(Sorry for delay - at work!) 😉
So because I am old-school and like paper, what books could I read to learn the basics of Javascript. Just make sure the book is written about ES6?
I want both! LOL
I mean.. if your business isn't selling anything because you don't have a webshop and you need lots of time to learn to build an ecommerce site (with payment integrations, maybe also shipping etc..) than maybe it is better to quickly set up a shop in an easier tool like shopify. And if you really want to build your own site, you can do that while the shopify (or other simple storefront framework) shop is making your business money
No customer will care which technology you used to build your webshop. They care whether your shop works easy and whether they can easily find what they are looking for. That's the only thing that matters.
You are a wise man
Using node.js and an editor like VSCode (most used I believe), you can quickly setup a server as well. Also.. lots of tutorials for webshops built with nextjs or another js framework.. if you really want to use php, I could recommend laravel
currently, es2023
How much has JS changed between ES6 and ES2003?
because I like reading paper books, is there a publishing year that I should shoot for? I mean like, newer than 20xx
(I do refer to online sources like MDN and w3.org but I find reading EDITIED printed books works better for me)
2003 or 2023?
Oops. (I thought was old!)
Okay, let me re-phrase...
If I read a (paper) book on Javascript like from A Book Apart or O'Reilly or whatever, and it was from say 2014 - would that be a problem to learn the basics? Or is JS from 2014 out-of-date?
some syntax didnt exist then
for example,
for(let x of obj)I prefer published books first, because they have editors, and I always fear I'll get bad info online. Plus I find most printed books do a better job explaining things
be careful: some things added in 2014 have been deprecated
What year would be a good cutoff?
2024
no, wait, 2025
To be honest.. online other people can comment and vote what is the best answer like on stack overflow, so that may give you better solutions than something 1 guy wrote
A little extreme don't you think?
not at all
back then, you didn't had mutation observers, and had to rely in weird events
That's how fast the javascript world changes. At least the framework world.. it seems every week a new one arises
you didn't had intersection observers
you didn't had iterators
I agree, but I learn better reading books to start. (I read 4.5 books this weekend, and I guarantee that 3 of them were superior to most things I'd find online.)
or even async/await
Sounds like COVID... 😉
get a recent book for christmas
And find some good online tutorials and print them if you like reading from paper better
By the time a book comes out, it is almost already out of date if you want cutting edge stuff
I guess what I am saying in a nice way, is that geeks often don't explain things very well. (I'm going to use my CSS3 book as a door stop!)
Okay, here is a key point... I don't want cutting-edge. I want to gain knowledge of core JS
seriously, 2024
Then after I feel comfortable with that, I can go online and get the latest and greatest
there's plenty of basic things that didn't exist before but make you a much better dev
But back to the beginning of the converation, you agree learning pure JS would be a good place to start?
yes
Maybe not make you a better dev per se, but it does make your life easier as a dev
the example of the
for ... of loop is one that does make you a better developerIf you ask me.. you don't need to know every in and out of vanilla js to make a relatively simple website. Also, lots of stuff is made a lot easier by frameworks, like routing, signals for reactivity, making reusable components and so on. You don't need to know how to wash your cloths by hand if you have a washing machine at your disposal.. use the tools that can make your life easier
that is true, but learning how to walk before you face-plant yourself into being a mediocre react developer that doesn't know what a
.map does is very important
im not saying that that's what will happen, but ive seen thingsTrue, you need to know the basics, but you don't really need to read a complete book before actually start to work on something. Learning by doing often works the best is my own experience at least
true
But isn't that the exact opposite advice you gave earlier about learning pure JS first?
there are things you probably will never use, like prototype bs, symbols and things like that
I wouldn't choose react at all if you don't need it to find a job as a dev, but that aside..
And doesn't that prove my point about reading a good book from a good author (aka "teacher") about JavaScript would help me to get me bearings?
You need to know the basics, but you don't need every last function and weird thing javascript can do.
I agree, so shouldn't any book in the last decade address that? (I have no issue buying a JS 2024 book, but I am trying to find a coule of books from A Book Apart since I know they are high quality)
not really
No... since a lot of basic stuff is made much easier with new features
and depending on the year of the book, basic things may be completely outdated or deprecated or even removed
If you are game, maybe it would help to explain what I am trying to do?
That always helps
yeah, explain it
So I wrote a pretty elaborate website (~60,000 lines of code) and then the pandemic hit as I was finishing up he ecommerce module. All of it was handcoded - no frameworks
I was proud of the website, BUT it isnt responsive so basically useless in 2024
Since I have to start from scratch, I g=figure now would be a good time to learn to be a better coder and fill in gaps like learning JS
sounds reasonble and noble so far
I think what is a reasonable appraoch is to start off with a static website of HTML, CSS, and maybe some JS
Responsiveness is mostly css related though..
no no, it's 100%
now-a-days
My startup is an online newspaper, and to try and recode what I had will take a long time - mainly because I havent coded in like 8 years
So I feel I could code something with just those technologues to get my content out there and make a name for myself while i work on making it database driven
So your website could be made responsive, just by changing the css, maybe needing to add a div here and there
In theory, writing a responsive site shouldn't be too hard - since it won't be monetized in v1.0
No it couldn't. I know my code (and design) and it would be a nightmare. Classic "sunk cost" where you have to know when to cut your losses
sometimes, a re-write is better
specially an old brittle layout
My code ran well, but all of teh HTML and CSS and PHP were intermingled and even if I could snap my fingers and go 100% responsive tomorrow, it isn't manageable moving forward
I want to learn to be a better coder
Write good code, modular code, reusable code, easy to understand code
being a one-man show, being quick and agile is key to me succeeding
So me not going live may have been a blessing
Because this will fore me to get things right this time
So basically you want to split frontend and backend probably. That would make it easier to separate responsibility
And over my 4-day week and reading 4 1/2 books, I am 1000% certain - mostly die to Information Architecture - that now is the time to start over
Exactly
I bought digital subscriptions to the Wall Street Journal and Bllomberg this weekend. Whenever I take study breaks, I look at those papers on my iPhone and see how things work, what I like, what I could do better, and hope to use those as guides
For a static site, really all I need to start is a good home page and section pages and article template
Always good to check the competition, see what they do right and what you could improve.
That is enough to allow me to get publishing...
I report on privacy, security, and misinformation and everything going on in the world relates to what I do
Do you know how frustarting it was when I was out doing video interviews and went to show people my splash page - which used the same approach as my main site which I took down - and the had to scroll to the rigth on their phones to see a link to my YT channel?
I'm sure i lost 85% of potential followers
So I need a mobile-first solution that keeps peoples crolling and not leaving
And I think HTML, CSS, and a little JS is enough to get me started
with good css, you probably won't need javascript
And from a technology standpoint, I want to use JS as a last resort. I have seen demos on YT of a hamburger menu and slide out (name??) using pure CSS3 and it looked good
If it just needs to be a static site, so no user data like comments and user profiles and such, than I would recommend using Astro. It is a really easy framework for static (and dynamic if you like) website and the blog template you can use when you start a new astro project basically has all you need probably
I think I mainly need JS for some of the mobile stuff and maybe for client-side validation - even though I will do server-side once that part is hooked up
(Which is why i still feel like even a book from 2014 is likely good enough for now.)
But a coupel lines of pure JS would do the same for now, right?
Reading and tutorials is excellent but make sure you’re practicing the concepts during/right after too. Realized that I would read or watch a tutorial about a concept, think i get it and it’s clicked but when i actually sat down at the keyboard i don’t know where to start.
It’s also recommended to code along with a tutorial , then delete all the code and rebuild it from memory , scrub through to find the part you need if you get stuck; then delete and build again; then delete it and wait a few days; rebuild from memory in the following 3-5 days.
Repetition and practice is crucial to building the muscle memory. It took longer than I expected to wrap my brain around the syntax; I still remember being so defeated looking at a line of code like
All the symbols and opening and closing parentheses really didn’t make sense to my brain 😵💫
Why would you need js for the mobile stuff?
the menu
which can be done with pure html
Exactly
What I mean is for a mobile-first, responsive site, things like clicking on a hamburger menu and then a menu sliding out from the left could be done with JS. Or if I had a bottom nav and wanted it to hide when you scroll down to read an article but appear when you scroll up, that requires JS
It is not the 2000s anymore when you needed js for everything other than just showing pure text and images
I agree, if I can do all of it in HTML and CSS I will
But never having learned JS is a liability, and I might as well add it to my skills list. Plus for v2.0 when I need client-side validation and fancier stuff, then i will have that foundation
you should be able to do about 80-90% without javascript
Hopefully
as an exercise, you can implement html+css stuff in pure js
re-inventing the wheel isn't always bad
I was suppsoed to finish setting up my VOIP on my new laptop today, but alas I am loitering here! I have some administrative stuff I need to get done, but once I have my new laptop set up and I know if I can still use MAMP, then I hope to get back into coding mockups
Isn't that what the fancier frameworks do? (Forget the names)
not at all
I think marty means jsx
that's a hack on top of js to allow html items in it
If you only have a static page, you don't need Mamp, that's for running php
I meant the JS flavors that do backend - that can build "one page apps"
Touche
But I need to get MAMP set up on my new laptop to get my head back into what I did, and to see if I can maybe get Pythn served up in it
Ultimately I need to get a database driven website up soon, because the end goal is to make some $$$
But for me, I want to believe, that the frontend conversion to mobile-first will be the hard part
I guess I could just get NetBEans set up and use that if I am just doing HTML and CSS
Learn about the css features flexbox and grid. If you know those, responsiveness is way easier
I was jsut getting into Flexbox when the pandemic started. I was studying it this weekend in one of my new books. I ordered a book on Grid but alas it is stuck somewhere
I never heard of netbeans, but I am a windows guy. I use vscode, that seems the standard nowadays
Of course there is online resources and YT, but again, I find book provide better uality when you need a solid foundation.
Netbeans is an IDE originally desigend for Java, but Iyou can code PHP in it as well as C++, C#, and I thik Pythin
Honestly, don't read too much. Just use them. The only way you will learn.
It's a fine balancing act.
Where are you guys (or gals) located?
The Netherlands
cool
Have you seen or used hamburger menus and pop out menus that use jsut CSS3?
(What do you call the thing that slides out from the side what is like a full-screen menu?)
Sidebar i guess
Here is an example (haven't checked the code) https://codepen.io/erikterwan/pen/grOZxx
Erik Terwan
CodePen
Pure CSS Hamburger fold-out menu (right side)
I came up with this idea to use the :checked selector to activate a hamburger menu. This is it, no js to toggle a class....
How do I run that? I just see code
I see this when I open it
On my phone
Do I need an account?
No, I am not logged in
The message says the code has an issue with a href, have you accidentally changed something?
No, maybe a Firefox extension is causing an issue?
Do I have to allow ads?
Maybe. Anyway, you can just google pure html css hamburg menu sidebar and you will find examples
Don't think so. I use Brave as a browser and that aggressively blocks ads
I tried it in Chrome and see how it works. I assume that can be customized to go to other webpages and adjust how big the popout is
I have uMatric and NoScript in Firefox
To make the popout / sidebar full screen is just change the #menu part of the css. Change the max height, max width, width and height properties
So it is customizable
Why wouldn't it be, it is just html and css
And that is the whole idea of codepen.. to easily show other people examples of pages or components you made in html css and vanilla js
So you can view it logged out but to publish code you need an account?
Again, it is just html, change the url in the hrefs and it goes to a different page
Yes
Is CodePen free to sign up?
I think so
So I gues that would be good for me to have when I'm askingf or help?
Yes, sites like this (stackblitz, codesandbox) are mentioned in https://discord.com/channels/436251713830125568/1134496810354888836
This is really annoying that Codepen won't work in FF
Probably the noscript extension?
I approved everything including buysellads.com
Doesn't even work in a private FF window
It does work in FF mobile for me
I think that is a cue from the Heavens to get back to working onmy migration to my new laptop!
Thanks for the help today
Good luck with your endeavours
Hopefully you all will be around in the future because I certainly could use the help!
I use it in firefox every day
Well something is clearly broken
I have tried everything
you can use jsfiddle
the auto-complete is absolute shit, but it works
i just typed in the URL above on my brand new MacBook pro and same issue in Firefox
WTF?
In Firefox, I run uMatrix, NoScript, AdBlock Plus, Privacy Badger, and Decentralize.
Under FF Preferences > Privacy & Security > Enhanced Tracking Protection, I have "Strict" chosen, but I whitelisted "https://codepen.io"
codepen pages are executed from a different domain, if im not mistaken
@Sleep Twitch posted this URL yesterday... https://codepen.io/erikterwan/pen/grOZxx
Erik Terwan
CodePen
Pure CSS Hamburger fold-out menu (right side)
I came up with this idea to use the :checked selector to activate a hamburger menu. This is it, no js to toggle a class....
It works in Chrome on both my old and new MBP's, but I am getting no preview in Firefox on either laptop
Come to think of it, I recall during the pandemic that CodePen suddenly stopped working
Is this a Firefox issue or a Firefox extension issue?
(I hate Google, so it's Firefox or nothing, and I think having CodePen in my toolbelt would help a lot - especially getting help here!)
you can't just "ignore chrome"... numbers don't lie... a large audience use chrome...
=> you ca dev/test with firefox everyday. and once a feature is finished, test it with chrome
I didn't say that I don't test in Chrome... Just because I test for Chrome doesn't mean I have to user it!!
This CodePen thing is driving me crazy!! It has to be something obvious. Any ideas?