My adventures learning web development after being a WPF dev
I only blog about topics I feel remotely qualified to talk about. And there’s no subject I feel more qualified talking about than “impostor syndrome.”
I don’t remember when I first heard “impostor syndrome.” You’d think I would remember such a significant event. Perhaps I can’t remember because my brain was too busy rewiring itself with this new perspective that maybe, just maybe, I haven’t been a fraud this entire time.
One of the worst mistakes I’ve ever made was back in 2007 when I felt too intimidated to jump into web development (I only had client app experience.) I actually told my manager at the time, “I don’t want to grow technically,” when I was secretly screaming inside, “Please grow me technically. I’m just scared I’ll be ridiculed along the way.” Back in 2007 I looked at all the people who never went to college for programming (unlike me who got a CS degree) and were solid web developers. Yet here I was - the PM who didn’t even know how to start a local server. I thought the programming ship had sailed and it was too late for me to jump back into coding. 10 years later, I look back and ask myself angrily, “so, Sara, how’s that plan working out?”
I’ve learned the best way to fight impostor syndrome is through transparency. I will face my fear by sharing all the embarrassing tech questions I’ve had to learn each week, so I can enjoy a happier tech life, instead of mentally cowering in a corner hoping no one discovers my lack of knowledge and fraud-ness.
And with that… here we go!
This week in tech I admit to learning…
Basic, basic web stuff, and did I mention basic?
What’s a localhost?
Did I mention I will face my fear? Yeah, we’re at this level, but we all start somewhere!
Starting a http://localhost is conceptually the same as building and running a client app on your local machine (e.g. it is conceptually the same as hitting “F5” in Visual Studio in some Windows app project. Of course there’s is no “F5” in my new scary world of “This laptop only has one big button!?” but the idea is “let’s get things going…”).
I did not know was that all of these things are the same:
Yep, i’m sure there are reasons why they are different, but I haven’t discovered that yet. How do you move Mt. Fuji? One shovel at a time.
What’s a port?
In the case you have multiple websites running on your local machine (e.g. like you could have multiple instances of VS running different client apps at same time), you have to specify the port to identify which website you want to visit locally.
I was first shown this using python. If you install python (at least on Mac), you get SimpleHTTPServer as part of the default install. Yeah, my brain takes a step back that installing a language gives you the ability to run a website! Didn’t see that one coming.
Say you have two folders on your computer: “Voltron” and “FinalFantasy”. Suppose both folders have only one file: index.html. Suppose you are in the Voltron folder and run the command:
python -m SimpleHTTPServer 3000If you go to http://localhost:3000 in Terminal (i.e. the console window from my past Windows lfie) you’ll see your “Hello From Voltron Folder” text in your index.html file. Leave all that running.
Now cd into your FinalFantasy folder and run
python -m SimpleHTTPServer 4000You’ll see your “Hello From Final Fantasy Folder” text displayed from your index.html file.
Yep, I admit I did not know this a week before I wrote this.
BTW, Port 8000 is the default port, so going to http://localhost:8000 is the same as http://localhost.
I’m guessing people use different ports locally to have multiple websites running. I know there’s been many times I’ve had multiple instances of VS running.
BTW, to stop the server, it’s Control-C (not Command-C). I don’t know why. I’m sure someone will explain here.
You don’t run a compiler for javascript or jquery.
I think I got this from Visual Studio, since 10 years ago with ASP.NET, you’d hit F5 to start the server… and that’s all I remember from back then.
It has taken me 2 weeks to break this habit of going to the Terminal to look for some sort of compiler. I kept wanting to restart the server (i.e. restart the python -m SimpleHTTPServer <port> command) Finally I’ve started just hitting reload in Google Chrome.
How to see stuff logged to the console in a http://localhost session?
I’m learning in Chrome, so you right click in the browser, and select “Inspect”, then select “Console” in the bottom tool window thingy.
How do I stop freaking out about all the } and ) everywhere in javascript / jquery code?
Chunk the }); as in group it as one big symbol versus 3 individual symbols }, ), and ; that you’d have to keep track of. You’ll get used to }); as being equivalent to }.
BTW, you can save a function as a variable. Don’t fight it. Just accept it.
How to add a simple functional button to a webpage?
You don’t need a rails application. HTML and Javascript will do. But I guess that depends on what you’re trying to do and I have no idea yet.
jQuery is a library for dealing with javascript. It’s funny. If only I had been paying attention all those years ago back in 2007 when I thought it was “too late.” And jQueryUI is a library for dealing with javascript that deals with UI on the page. But you need UI on the page first (i.e. must have a button in html) to interact with it using jQueryUI. I thought jQueryUI created the UI, but it doesn’t. More on that in a sec….
Why can’t I even follow the example at https://learn.jquery.com/jquery-ui/getting-started/!?!?!?
Apparently, you can’t just create a new example.js file with
Console.log(“foo);$( “#date” ).datepicker();
And it doesn’t help that the console.log happily displays to the Console window in Chrome, but ignores the 2nd line.
Seems that the jQuery has to be in some sort of function that the getting started docs assume you know. I know nothing! You have to wrap the examples in a function. And don’t freak out about the }); it’s just a glorified }.
$(function() {console.log(“Hello”);$( “#date” ).datepicker();});
Now https://learn.jquery.com/jquery-ui/getting-started/ will work.
Next week in impostor syndrome…
If I haven’t completely embarrassed myself (which I know I haven’t, because I still have pages left to share from my OneNote), I’ll talk about my adventures in hooking up jQueryUI to a button in HTML.
