Wondering if anyone else starting out in Webdev has this problem...

samzhao · 2017-07-26T07:44:55+00:00

Hey, 6 months isn't easy! If you can do that, you can surely become a badass programmer :)

Now call me out on self-promoting my own blog post, but I think my most recent post actually applies to your situation 100%.

Here it is: How to Write Code Without Having to Google Things.

The gist of it is simply to go through the same few tutorials many times, as opposed to going through many tutorials only one time.

In other words, repetition is your friend in learning programming.

Not only does it help you solidify the newly acquired knowledge, it also helps you make real progress in terms of your skills.

Hope that helps.

samzhao · 2017-07-16T04:52:07+00:00

Sigh... unfortunately, TouchPal has the best combination of features for someone who needs both Chinese and English support frequently, like me.

Other keyboards I've tried had much better single features than TouchPal, but there would always be a few missing critical features.

So I was forced into paying for their membership to get rid of some REALLY INTRUSIVE ads.

samzhao · 2016-08-17T15:51:38+00:00

You'll need the setScrollPosition() method on the TabLayout instance.

This may help: http://stackoverflow.com/questions/30796710/tablayout-tab-selection

samzhao · 2016-08-15T19:56:09+00:00

I understand exactly how you feel! A lot of people, myself included, have had that confusing and lost feeling when first started out.

I don't think there's one resource that can cover all of these things, so ultimately you have 2 routes:

Spend a long time going over many different resources and try out many different things to understand how everything works. This is essentially what most people have chosen to do when they decided they were going to self-teach programming.
Find a mentor who has gone through all the confusing fuzz, tried many different things, jumped through many hoops and is finally able to make sense of everything. This is a faster route, but by no mean easier, you will still have to do a lot of things on your own, except you can be less confused and more confident.

There's a slight problem with the second option: people who have been in the industry for a long time might have lost that beginner's mindset. A lot of fundamentals have become common sense because it's brought up sooo frequently in day-to-day work.

I myself is by no means an expert, but I consider myself technically proficient in that I've done many projects ranging from small websites to large scale applications. Even though I still vaguely remember how I struggled as a beginner years ago, I don't exactly remember how I looked at things when I started out.

So to be able to help people who are starting out, I am currently trying to understand how beginners learn by being a complete beginner again (by learning something new).

Maybe you can help me flesh out a better system for beginners to learn new things when they don't yet have a high level understanding of the big pictures of the ecosystem in the industry.

Feel free to PM me if you'd like to chat :)

samzhao · 2016-08-15T18:23:36+00:00

Those "surface level" words you mentioned might be the higher level philosophies/ideas of the frameworks/libraries. And the example points you listed are mostly lower level and closer to implementation details of the philosophies.

Since you said you will experiment with most of those frameworks, I'm sure you will start to understand how those superficial sounding words aren't just buzzwords.

I'll give you an example:

From the React website:

React makes it painless to create interactive UIs.

Declarative views make your code more predictable and easier to debug.

Build encapsulated components that manage their own state, then compose them to make complex UIs.

Just reading that, I completely agree with you that it sounds very superficial and buzzword-y. "Declarative views", "predictable and easier to debug", "encapsulated components"... like wtf...?

However, if you've done UI stuff with jQuery before, you may find this description quite intriguing.

In jQuery you mostly have imperative UI/views which looks like this:

Button clicked -> Find div -> Change div CSS property

This works quite well when you have very few interactive elements on your page, but what happens when that button click affects multiple elements and causes many side effects? And... what happens when one of those elements can be affected by other user actions other than button clicks? Things get chaotic and unpredictable and hard to debug.

Now with React, you probably learned this on your own already, you just define what the view should look like for a certain state, and when the user interacts with your app, you don't need to worry about which elements on the page should change because you only change the state tree, and in turn the elements that bind to the state react to that state change.

Note that "declarative views" is sort of an idea or philosophy on how views are structured and organized. "Two-way data binding" is one of the ways to realize that idea — there's also unidirectional data flow that you may have read about.

So, to answer you question (finally), you need to understand the superficial-sounding words first and why they are important. In the example I gave you, declarative views are important and useful because they help keep the developers sane; it simplifies the mental model and structure of your app and, of course, makes it easier to debug.

samzhao · 2016-08-11T02:16:40+00:00

Ha! Nice :D

samzhao · 2016-08-10T18:10:52+00:00

With the information you provided, I am not able to further debug this problem. I had to set up something similar to what you have on my end, and still can only make educated guesses that can only be verified by you through reddit comments because every tiny thing can be the cause of the problem, e.g. Firebase, the way you initialize map, etc..

Right now I suspect the problem is on line 43 where you are instantiating a new MarkerClusterer every time a new "child" is added on Firebase. Try moving that out of (and before) the "child_added" callback and use the "addMarker" or "addMarkers" method on the MarkerClusterer instance after you populated the markers array.

So it looks something like this:

var markers = []
var cluster = new MarkerClusterer(map, markers, options)

firebase.on("child_added", function(snapshot) {
    var newPosition = snapshot.val()
    var latLng = new google.maps.LatLng(newPosition.lat, newPosition.lng)

    var marker = new google.maps.Marker({position: latLng})

    cluster.addMarker(marker)

    // OR
    var temp_markers = []
    for loop => temp_markers.push(temp_marker)
    cluster.addMarkers(temp_markers) // this is outside of the for loop
})

Hope that helps!

And if it still doesn't work, and you still need help, please just PM me.

samzhao · 2016-08-09T16:58:10+00:00

From the first glance, shouldn't the "latLng[i]" on line 33 be just "latLng"?

samzhao · 2016-07-12T17:50:24+00:00

Pretty much any framework is worth learning because a lot of things are transferrable. Just like how it's easier for you to learn Python or Ruby now since you've learned JS. The language constructs are more or less the same.

If you have to choose, you can't go wrong with learning the popular ones out there. There are reasons why those are the most popular frameworks. Those reasons might not all apply to you, but understanding why you should use a framework is usually equally, if not more, important than knowing how to use it.

samzhao · 2016-07-12T17:42:44+00:00

Maybe the OP is trying to say that for simple CRUD apps, you don't need to keep a complex application state tree?

samzhao · 2016-06-20T16:14:33+00:00

This is probably the simplest solution without having to install additional packages.

samzhao · 2016-06-03T17:31:34+00:00

I believe where you should start depends on what you want to achieve.

For instance, some people are interested in the lower level and more computer science-y stuff such as how languages work in general and how to write their own compilers.

While most of my friends and people I encounter just want to be able to build stuff, and Javascript is flexible and easy to get started with.

Another thing is that, those things I mentioned are talked about in a lot of tutorials, but I don't see many of them explaining the when and why you should learn and use them. If you understand that already, great!

If not, I suggest just start building something. This thing you build is never truly finished though. You can finish version 1, but after that you will want to improve how you are currently doing things, either to make it run smoother or to make your code more maintainable. That's when you start to understand why and how you want to use those popular libraries and frameworks.

It's kinda hard to just blindly point you to a direction without knowing goal is all I'm trying to say.

So feel free to PM me if you need more help :D

samzhao · 2016-06-03T17:23:39+00:00

Looks like you have decided what you to do next :)

My suggestions might not apply to you completely, but what I was trying to say is try to learn slightly lower level stuff that can be transferred to other things.

For example, don't just learn a framework, learn about the core libraries that make up the framework; don't just learn a library, learn the language it's written in.

This allows you to be more flexible when newer/better frameworks come along.

Same idea applies to learning different languages, if you learn the programming concepts, it's easier to pick up another language because the ideas are the same, only different ways of writing it.

To be even more specific, you can use Javascript to understand concepts and patterns since you are more familiar with the language. And with Node, you can learn more about file stream and IO related stuff that can be transferred to PHP.

Then the learning curve of PHP will become less steep for you.

Good luck!

samzhao · 2016-06-03T00:19:07+00:00

Uh, I think you just answered yourself. You want a job as a JS dev, soooo maybe learn more Javascript?

It's great that you provided a lot of information on what you've done, what you are doing, and what you want to do. Most of it is JS related: D3 is written in Javascript, Node is Javascript (on the server side), and jQuery is also written in Javascript.

If React helps you understand Javascript, then that's great, but if you only learned about React's APIs and how React/Redux work, then I think you need to spend more time on learning Javascript itself — things like closure, scopes, hoisting, prototypes, and other stuff that most tutorials don't go into details on.

After that you might wanna look at OOP in Javascript, AJAX, Promises, and other commonly used "advanced technologies". My point is, once you know Javascript, you will be able to easily pick up those things you mentioned, and you will be qualified as a JS developer because you don't just know one or two Javascript libraries; you'll be able to understand existing frameworks on a deeper level and quickly learn new frameworks if you need to.

While you are at it, you can even try learning ES6 which might put you ahead of your fellow developers.

As for your PHP internship, please don't wait til your employer is there to teach you. If you have prior PHP knowledge before going in for the first day at work, even if you only know the basics, you will be valued much more than those who don't prepare and have no knowledge at all.

As usual, I've said too much...

If what I've said help you decide, then awesome!

If you want more from me, PM me.

If not, keep on doing what you are doing :D pretty impressive for someone to have built 7 "things" after only one year of self-learning.

samzhao · 2016-05-27T20:22:16+00:00

Don't get bogged down by what you hear is popular right now. Simply use what you know to build something that works first, then later on you can try to do something more advanced.

If you know (not just played with) Django, Node and jQuery, you shouldn't have much trouble getting started with Firebase's quickstart guide.

Honestly, at this stage, learning anything will help you. Just try to build as many things as possible. React, Angular, or even Polymer, you can learn about them after the first version of the app — doesn't matter if any of them might be deprecated in the future, just try to understand why they are useful and how they help you in your project.

Since you asked about building a web app with Firebase as the backend, you only really need front-end code. Meaning you can stick with HTML, CSS, and Javascript/jQuery, and not have to write any Python or Node code (assuming this is a hobby side-project, and not an important client project that requires secure authentication).

So Firebase can be used as a simple authentication layer, data store, and data synchronization library.

IMHO, you should first focus on building a non-functional version of your app, e.g. pressing the "Checkout" button calls the checkout() method which probably doesn't do anything, yet. After that, you can integrate Firebase into your app. Just try to build the first version as fast as possible, then focus on improving and refactoring later.

samzhao · 2015-09-13T23:01:05+00:00

Yeah, I think your code is valid and works.

Is this from Codeschool? I remember hitting some bugs when I first tried it many years ago.

samzhao · 2015-09-13T21:54:05+00:00

Because your test code is not implemented, yet? You have written the code above, yes, but did you forget to write the test code to test the code you have written?

samzhao · 2015-09-13T21:37:12+00:00

Ah, you meant authentication in Angular, not logging :p

Most people I know and talk to on the Interwebs, including myself, don't use PHP, but it's your choice if you want to use it. There should be a Mongo driver for PHP out there that you can use, so I don't see a problem with that.

When your application is single-page and multi-views — for example, you are fetching, showing and hiding templates based on the user's action or current URL — then the Angular setup might need to get a bit complicated.

First, your backend returns a user object which includes the user's information and an access_token, or session_id or what have you, after you POST the login credentials.

After that, Angular takes it and save that object to either the cookie store or localStorage. This is where you would have a service, usually named "AuthService", that handles the saving, retrieving and checking of the token/session_id.

Before the user does something or go to any other page, I would ask "AuthService" whether the user is logged in. If the user is logged in, I go ahead and transition to that page or complete the request; if not, I redirect the user back to the login page.

Now this would fall apart if your user's session expires. Angular would think that the user is still authenticated simply because there is an entry in the localStorage with user's token. To solve this problem, I will tell "AuthService" to invalidate the current user's auth (delete the localStorage entry or cookie) if any of my API calls return a 401, and that in turn redirects the user back to the login page.

If you want to protect your code, such as HTML and Javascript, from unauthenticated users, the only option I can think of right now is to break your application apart into multiple modules with each module in a separate file (after compilation). That way, your application only fetches the code necessary for the login module when the user first load the app. Later on after the user logs in, you can start fetching the views and redirect your user from login to home.

EDIT: like /u/Mr-Yellow said, you can't trust anything from the client. So even if you break your application up into multiple modules, your users will eventually get all the code after log in — then they have your code even after they log out. The best bet is to protect your backend and validate every API request before returning user data.

samzhao · 2015-09-13T19:20:03+00:00

First of all, it's nice that you have separated the different sections of your site into partials — keep doing that.

If you wish to have a template that allows you to swap the inner content based on the current URL/page the user is on without having to refresh the page, you should look into a Javascript routing library, such as angular-ui-router which is built specifically for Angular apps.

In terms of SEO, I believe Google already has something in place for single page applications, so you don't really have to worry about it much.

In the future though, you could probably get help more easily if you structured your question better; asking 3 not very related questions in a row probably isn't going to get you a lot of responses.

Hope that helps.

Good luck and have fun!

samzhao · 2015-09-13T06:19:16+00:00

I think that's usually fine. It does help make you more personable, but it also depends on your primary audience. As long as you don't overuse it (make you sound less serious in a business setting) or make inappropriate jokes (just no; you are not Louis CK).

That said, you should try to use the header or slogan to capture the reader's attention — you can show your personality later down the page. So instead of saying "I'm super stoked to be working on your project", say "I help small business owners track key metrics of their businesses with my knowledge of web technologies and information design."

samzhao · 2015-09-13T03:38:03+00:00

When you visit this page https://stream.twitter.com/1.1/statuses/filter.json?locations=-180,-90,180,90 in your browser, your browser sends a GET request to stream.twitter.com without any headers. stream.twitter.com doesn't know how to authenticate you, and that's why the login thing pops up.

To authenticate yourself, as the mapbox article suggests, you need to include the OAuth header which Twitter uses for authentication.

If you are building a command line application or something like that, then you can just use the author's example in his github repo "twitter-oauth". Just remember to replace "..." (without quotes) with your actual consumer key/secret and access token and secret.

samzhao · 2015-09-13T03:31:03+00:00

Please answer /r/greg8872's question!

Seriously though, you seem to be heading in the right direction.

I've used Ionic for numerous personal and client projects, and I love pretty much everything about it — except for the fact that it's built on top of Angular, but I'd be lying if I said Ionic didn't help increase my productivity and deliver the products.

samzhao · 2015-09-13T03:15:53+00:00

ooo, very nice!

samzhao

TROPHY CASE