madbernard: a long angled pier (Default)
Two great tastes... ...Not so much.

One part of the Hack Reactor program that my developer friends say is really accurate, in terms of preparing you for the real world, is the "Legacy" project. For four days, you and a team of three to four other people get to build anything you like, using any techs you like. Then comes the "Legacy": for four days, your team picks up another team's project and builds cool stuff out from their starting point. How do they techs they chose work for different people going in a different direction?

In my case, not 100% perfectly. So there was this day that I wasn't sure about how to dynamically generate a dropdown menu with Angular... I tried various methods and they weren't working... Eventually I tried just a straight-up, bog-standard <select></select> tag... Even that didn't show up...!

As you can probably guess from the title, the answer is, MaterializeCSS was not the right fancy CSS framework to use with a constantly shifting thing like Angular. Here's the Stack Overflow answer where someone gives a proper sermon about how MaterializeCSS falls short.

CSS/front-end frameworks make it easier to build a website that shrinks and bends well on a mobile phone, and that looks fine without a lot of poking. In fact, often these days you can look at a website and tell what it was made with, because developers are pretty happy to leave it as it came out of the box. MaterializeCSS is an attempt to look like Google's "Material Design" styles... Same paper-airplane-looking arrow for Submit/Send, etc.

However, apparently, MaterialzeCSS does some of its magic by overwriting normal HTML tags with its own... And any of its own things that require JavaScript to open or drop down or pop up must be initialized when the page loads... And anything that changes after the page loads LIKE SAY when a call to a database returns and populates a dropdown menu with options... Just doesn't happen.

Good times, good times.

You can see the website we worked on here: http://teslalegacy.herokuapp.com/ (If it takes many seconds to load, that's just because we're hosting it for free, and Heroku takes awhile to find it if no one has been there for half an hour). To see the glorious hand-crafted pop-up-div-full-of-checkboxes that I used instead of a drop down menu, you have to log in with GitHub. (Setting up a GitHub account will be worthwhile for you, anyway, but that's a story for another day.)
madbernard: a long angled pier (Default)
We got January 1st off, and after some computer erroring I was in the Stack Overflow network of sites, having actually asked a question about where Chrome stored its user data. Which inspired me to go find something to try to get enough points to be able to upvote all the people who had been so helpful to me over the last year.

I found a guy who had a question that almost boiled down to "Angular, how does it work". The literal day before I'd watched a lecture on that subject--I still had the tab open--so I took a crack at it, over the next few hours. You can see the results here.

I then started trying to implement his beautiful boxes website, using my own advice, to see if it was any good, so I could go back and actually truly help him. Making projects and studying in Hack Reactor kept me away from it, though. This is a note to self that I'd like to come back someday.

I did, at least, collect two people who thought the explanation was good enough for a vote... So now I can really be a part of the S.O. community. At last!

EDIT: Dave and I were chatting about this, and he was curious what the deal was with points on Stack Overflow. I wanted the points so that I could give props to all the people who have made my life better by writing great answers. You need 15 points to upvote, and each upvote you get gives you 10 points. At the very peak, aside from feeling somewhat good about themselves, the good answerers get to become mods if they choose.
madbernard: a long angled pier (Default)
I made a presentation on Basics of Web Accessibility to give to the 70-some people currently studying at Hack Reactor Remote with me! You can look at the slides here: http://slides.com/madelinebernard/webaccessibility/#/

The presentation went well, and I hope I left people with some good thoughts about the wealth of different people out there who could use our things on the web, and how to build for those people.

The next day, coding away on a bit.ly clone, my pair and I came to the point where we had to build a login form, and I realized that since I had literally just given the talk, I would have to walk the walk... I say on the slides, "Labels: if you do them right, clicking the word will tick the box (or whatever)". There are two ways to do this right, and over last week and next I've used both of them. Here they are:
<label for="login">Type your handle here!</login>
<input id="login" type="text"></input>

<label>Type your handle here!<input type="text"></input></label>
In the first, you have an "id" attribute on the labelled element, and the label's "for" attribute points to it. In the second, the <label> and </label> tags wrap the input element. I like the first better, since I can then lay out my code however I like; but the second is still there, for cases where everything's all in one place and it won't be messy to nest the tags but it would be messy to have a bunch of attributes.

The result, though, where you wave your hand, vaguely clicking in the area, and you get the cursor focused in the box... That's what the web oughtta be!
madbernard: a long angled pier (Default)
You probably know that when you have a URL like this, https://frontendmasters.com/hi/courses/crash-course?utm_source=bsa&utm_medium=ppc&utm_term=2015-12&utm_content=why-not-xmas&utm_campaign=crash-course, the weird mangled bit is not necessary for loading the page. I just learned why that is: the ? in the URL signifies that that's where the URL is starting to pass along info to receiving programs, and the info references something set up on the receiving end. And there's more to learn from the structure:
https://frontendmasters.com/hi/courses/crash-course?
utm_source=bsa&
utm_medium=ppc&
utm_term=2015-12&
utm_content=why-not-xmas&
utm_campaign=crash-course
those '&' are joining different references. The stuff before the equals sign references already-built containers to catch the possibly-varying info that is to the right of the equals sign. This is what I saw when rolling my own:

The guy I was paired with and I were having a time of it, figuring out how to tell a Parse server (https://parse.com/docs/rest/guide#queries-query-constraints) how to sort and shape the data we wanted it to return to us. It turns out that we could do it by sending our request to a URL different than the usual URL, which was https://api.parse.com/1/classes/. We instead sent a GET request (the normal "bring me a website, please") request to https://api.parse.com/1/classes/?order=-createdAt&limit=1000. Parse's documentation points out that it will accept parameters like "order" and "limit" and those take values like "field to sort by" and "number up to 1000", so with this URL we're telling Parse that we wanted the 1000 most recently created things... And it worked.

That was pretty great! It turns out that we were supposed to be using jQuery to make things tidier, though, so in the end we went with http://api.jquery.com/jquery.ajax/, filling the data: part of that with "data: {'order':'-createdAt', 'limit':'1000'},".
madbernard: a long angled pier (Default)
Woop! I've been silent because, some months back, I got into Hack Reactor Remote. It started Monday, and now I have a better sense of what they mean by their "please don't leak our secrets" note in their initial communications... They even suggested some things that make for possibly good blog posts.

Sidenote: I take paper notes because they served me well in college, and I've got vague impressions of research that indicates that things you hand write are things you remember better. (I should buy myself a notebook instead of doing archaeologically interesting things ie reusing paper that only has one side printed on.)

Next to me is a note of something Robin Kim, our technical mentor, said offhandedly (not his exact words):
When you have a bunch of console.log() reporters in your code to help debug it, include in them some indication of where they're coming from. So, like,
console.log('line 233', thing)
The comma is the separator to use in this instance.
He didn't say what made comma the best.

So this is neat because 1. obviously smart and useful idea and 2. wooo, even advanced coders still use console.log to debug! Putting break points in to the Chrome Dev Tools console has been great, also, but nice to know that Chrome Dev Tools are not necessarily the Only True Path.

May 2016

S M T W T F S
1234567
8910 11121314
15161718192021
22232425262728
293031    

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Sep. 22nd, 2017 06:59 pm
Powered by Dreamwidth Studios