JS101 session 9 May 2017 - DOM, Git, Review/planning for JS101 page

[katjad]

Things we did today:

• Introduction to DOM manipulation, using web dev tools in the browser. Thanks @gicela for spontaneously offering to do that (Created an html page in editor, opened in browser and in the console selected DOM Nodes, dynamcially assigning new styles, e.g. document.getElementsByClassName("js101")[0].styles.color = "gold"; in the end; in the end put working scripts in a script tag in the html page).

• Using Git to do a pull request Git and GitHub comes up frequently in our sessions, and is our way of collaborating. As we had some new people (welcome @hvarley and @jnoya!) we went through the process of doing a pull request. It is probably a good idea to use Github Desktop (on Mac and Windows) for that to start with, as it has proved quite time-consuming to go through the commandline process again each time. Anyway, if you want to practise a pull request and have not done so yet, add your name to our Git playground hall of fame! If you want to get started with the command line, checkout this page on using git written by @rinse0ut

• We discussed contents and to-dos for the JS101 site, with view of possibly setting it live around time of next session! At the same time we talked about approaches to learning JavaScript as that is what makes up a lot of the site.

Some points:

• JavaScript is a vast subject, think about what you want to use it for, also do you want to find work or is it just personal interest; that will influence what you learn, what projects you do
• While you cannot learn everything and there are different directions to go in, some things are essential to know (see below, understanding concepts). If you work through a course online, it is not immediately apparent what those things are, and that's where it is helpful to be in touch with more experienced people
• I find helpful to think of two things you need to develop in parallel, practical coding skills and understanding:
• Coding: Interactive tutorials -> then build own projects, collaborate -> frameworks, tooling, testing Start with Codecademy/Udacity then FreeCodeCamp or similar
• Understanding of concepts: Grasp underlying language constructs (e.g. callbacks, array methods (map, reduce etc.), scope. closures) A good source for that is a book like You don't know JS Another valuable thing, as @rinse0ut pointed out, is to do a foundations of computer science course (MIT, Stanford online etc) Also recommended reading: Apprenticeship patterns, which is about both philosophy and practical steps to take when you are serious about progressing with programming
• It will be good to develop in this group an understanding of the concrete skills that are valuable to get you into employment, as that is an aim for some members, and it will be good to address those skills in particular

We will keep having little talks at the group about concepts, that will be good for everyone, whether newbie or with some experience.

Things we decided for JS101 site, and most immediate to-dos (btw If you have not done so yet, please fill in this UX review for the JS101 site https://docs.google.com/forms/d/e/1FAIpQLSfpLqKTh6d0Gdd7juB6o5q-0G7_vAttrQ_wXh-URrp7cU9c_Q/viewform)

• Condense the content on staging site, create a branch for the live site (@gicela)
• We want to put some kind of quiz/assessment on the site - homework for everybody, devise your own quiz questions, then we will compare/filter next time (btw. as @gicela pointed out, I once made a little quiz, try it out! http://codehuborg.github.io/quiz/)
• Layout mobile first, get rid of bootstrap. Would it be good to create some kind of template using new CSS techniques? (Flexbox, Grid) @trianah @rinse0ut?
• Think of personas/user stories - do a session on that next time (@hvarley)?
• Future development: Create a members section where people can register

Will write about JS101 app as well at a later point.

Add any comments/ links please if I forgot any, or you have something additional you found useful!

@CodeHubOrg/js2017

[trianah]

@katjad Sounds good, do you think we should swap from Bootstrap before the website goes live or later?

[paulfourniercarey]

Sounds interesting, what's the reason to move away from bootstrap? Fyi - bootstrap is mobile first and v4 uses flexbox and grids, the learning curve to v4 is very low too... if you don't know css very well I would recommend bootstrap, unless you want to learn another css framework of course...

---

Paul Fournier-Carey User Experience Interface Design Development Consultant

EPICreative Ltd

@twitpaul lnked.in/paulfc

On 14 May 2017, at 21:19, trianah notifications@github.com wrote:

@katjad Sounds good, do you think we should swap from Bootstrap before the website goes live or later?

— You are receiving this because you are on a team that was mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[katjad]

@trianah We would probably swap only after setting it live. I think the design is good as it is, will just be good to switch to using new layout techniques. @paulfourniercarey I do not have a very strong opinion on it. Personally, I have never used bootstrap for anything, when I tried it, I felt I had to override a lot of things, but it was also a while ago that I tried it. Once consideration is to keep everything as lightweight as possible (although it is not that big of course) And in theory, with the new grid layout it should be at some point redundant to use a framework, because unlike previous techniques it was made specifically for layout. It is also an opportunity to learn those new techniques I guess. - But it is not set in stone, maybe those people most interested in working on the layout should decide!