This blog is not dead!

Hello folks! Long time no see!

This long silence is due in part that I was not very well when school ended. A life-long friend of mine discovered she had cancer, and in two months, she was gone… This hit me hard because she was really like a second mother to me: after my parents, she was the first person to know that my mum was expecting not just one but two baby girls. My first memories are at her place. She loved us from the start and in a manner that was so respectful that to this day I am very moved that she was my friend. She just knew how I worked, she never pushed me to be more talkative or social or this or that, she was there even when I couldn’t talk or couldn’t eat, she simply was there in a nurturing way that didn’t need words to manifest itself. She was very supportive of everything I learned, be it literature analysis, music or programming, even though she didn’t understand anything of the latter.

So I was shaken to the core when she took ill and even more so when she died (mid July). Then school ended (end of July), and I missed my school friends a lot. I was also very tired from school so it took me a month to regain a decent level of energy (end of August). And I realized I hadn’t made the right choice concerning the internship that followed school. I had chosen a job as a data consultant, thinking I would like it as much as programming, but it wasn’t the case, even though my boss was satisfied with my work. So during the month of September I felt rather lost and empty. In addition, I had lost all ability to participate in the ongoing dev-discussion on Twitter so it was a very lonely time.

I had to do something so I decided to write a Twitter bot for the #100JoursDeCode. I did that, and afterward I started to resolve Codewars kata quite compulsively. (I was very bored.) In October, I started to follow Harvard-EdX CS50 course. I made a presentation about HacktoberFest at school for the new students. And I also prepared a demonstration of D3js for a JavaScript meetup in my hometown, which took place on November, 14th. Then I started learning C# and Angular for my future job, because, HURRAY! I had found a job as a developper. (More on that in a later post!)

My first 3 months at Wild Code School

Hello folks!

Well, it’s been long since my last post. These past 3 months have been INTENSE.

I’ve learned a lot! I did 4 group projects, 3 of them being Single Page Applications.

  • The first project was a simple HTML/CSS/Bootstrap site.
  • The second one was a Single Page Application developed in pure javascript, with a MySql database.
  • The third one was developed in hackathon, also in pure javascript, and the goal was to use an API.
  • The fourth one, also developed in hackathon and relying on fetching data from an API, was developed in React.

Although our campus manager has a lot of work, he is very attentive to our well-being. He also coaches for our job interviews, and he does it well! Our teacher is really, really cool. Besides teaching us JavaScript and React, if we’re still hungry for more, he can talk for hours about innovating web development strategies and cool things like functional programming.

We are now developing our final project, and this time things are getting real since we’re developing it for a company.  My team mates and I have the privilege of working with Black Moon Lab, a startup from Reims dedicated to provide apps that help build ephemeral communities (at events such as seminars, football matches, weddings and so on) Nicolas, the founder, has a very inspiring philosophy, both ambitous and humble. (He should do a TedTalk). So I’m thrilled to work for this company.

And we’re developing this project in Vue! 🙂 So I’m learning 2 libraries instead of one, which of course is challenging but also terribly satisfying. We are coached and supervised by Marie, an experienced developer at Black Moon Lab. I think she coud have used the facepalm emoji a few times when we started, but she is very kind and supportive. 😀

my team mates and me at a hackathon
Maxence, Florian, and me! (and Iggy our mascot)

My 2 team mates, Maxence and Florian, are totally adorable, witty and talented young men (I’m much older but they are kind enough to say it doesn’t show). When one of us spots a weakness in our coding/thinking style, we all look for a solution, find it, implement it, and we keep a checklist of common problems and their solutions. Working in this group gives me a kind a synergistic feeling, as if the three of us shared the same mind (and the same catastrophic humor!)

For example, last week, we swapped each other’s tasks because one of us was stuck on something, and the re-organization was very quick, fluid and efficient. I understand what each of my team mates need to function at their best, so I adapt my directives when I lead (and as a consequence, I don’t have the feeling I lead them. I just ignite the engine.) In some ways, each one of us brings something that helps the other two flourish. I’m very grateful to work with them.

Other things I did :

  • I delivered a presentation on quantic computers
  • I worked through a tons of codewars katas
  • I made a French translation of the #100DaysOfCode (I’ll make a special post about this)
  • I coded a pong and a snake games 😀

2 more months to go, and then, I’ll be working as an intern. This is all very exciting!

 

 

CSS Variables

CSS variables: they are very useful when you repeat the same value over and over in your style sheet.

Declare your variable once, and then call it as many times as you want. Where could this be more useful than in designing a color- theme?

For example you could use your variable for the border AND for the font color AND for the background.

This is how you declare your variable:

--myColor: blue;

And when you call it, you do it this way:

p {
color: var(--myColor);
}

You can even make a variable made of other variables! See this example from my demo:

--red: 125;
--green: 125;
--blue: 255;
--mainColor: var(--red), var(--green), var(--blue);
--secondaryColor: var(--blue), var(--red), var(--green);

(I used this in rgb format in the demo below)

You can say, well, we already have preprocessors variables. But what’s different and very interesting with CSS variables is that you can update it with css without having to reload the page!

animated gif of a project demonstrating CSS variables used for colors
animated gif of a project demonstrating CSS variables used for colors

To demonstrate this, I made this little demo for school. A big Thank you to Ohans Emmanuel who wrote a very complete introduction to CSS variables here.

Google Developer Nanodegree Scholarship and Impostor Syndrome: I got both! :)

Great news this morning: I got an email from Udacity saying that I was among the 1000 students selected from phase 1 to get a 6month Nanodegree scholarship!

Phase 1 was the Google Developer Challenge I completed this winter (a 3month program spanning from November to February).

I was somewhat convinced I wouldn’t make it to the 2nd selection and I even had my “anyway argument” ready: “anyway I would be at school at the time of the nanodegree, so it doesn’t matter”.

“It doesn’t matter” : remember that phrase, it’s almost always a lie. It DOES matter that my efforts are recognized by a once in a life-time opportunity.

“It doesn’t matter”: so I completed all the required exercises, sometimes twice, sometimes thrice, but I did not participate in the forum and slack space as much as I thought was required to get into the second phase. I didn’t give it my 100%. I gave it my 90% but not my 100%.

The distance between those 90% and 100% is full of impostor syndrome’s feelings and beliefs (aka: full of crap). Facing the complexity of some exercises, my confidence melted. I thought I wasn’t good enough to be in that program. I thought the questions I wanted to ask on the forum were not good enough. I thought that, being a fraud, I had no right to ask for help…

People with impostor syndrome are not objective at all about their accomplishment. They think it’s never enough (quantity) and never good enough (quality).

I don’t know how to deal with it. I know that it drives me to avoid interacting with people in my cohorts, to avoid asking for help, to feel guilty about taking a time out… All these being unbalanced and unhealthy things, the way out is probably to do the opposite, even if it’s scary: interact, ask for help, get enough rest.  Those must be my goals now.

That being said, I’ve just turned form “I’m concentrating on school” to “I’m doing both school AND the nanodegree”.  (I’m not turning the opportunity down.) So that was me today:

“Brain, Body, listen. I need your FULL collaboration.”

via GIPHY

Explaining functions

As a beginner, when you get to the point of learning functions, it may seem a bit difficult at first.
Why? Well, so far, you have worked with concrete things, like assigning value to a variable: age = 20, name = “Joanna” etc.
Loops and conditional statements are also concrete, up to that point.

But functions require you to rise to a new level of abstraction. It’s not much, really, but the jump itself may seem unusual and frightening.

I have found an example which may help you! Spoiler, it involves cakes! so I hope it will appeal both to your brain and your stomach.

****

Remember you have to do two things with a function: first, you define it. That is, you design your tool. But a tool is useless as long as you don’t use it, right? So the second thing is that you have to call the function: you’re now using it.

  1. Defining a yummy function

ok , so I’m not using any programming language here, just some kind of pseudocode vaguely inspired by JavaScript.

We’ll define a function that makes…cakes! 😀

function makeACake()

This function is like a recipe. You’re the Chef and you’re designing a recipe.
Now, see those parentheses after the name of your function?
This is where you’ll place your ingredients.
For the moment, we will only place generic ingredients, and we will see the specifics later:

function makeACake(flour, sugar, egg, fat)

Alright! Our intention is set: make a cake, and we have listed the ingredients that will be needed. Remember that at this point we are only imagining how to make cakes, we are not actually making a cake.

Now we need to describe the process and the steps to make a cake.

function makeACake(flour, sugar, egg, fat){
...
...
}

(sorry for the indentation that isn’t being displayed…)
Inside the curly brackets, we will put things you have already seen  like defining variables, giving them values, make operations with it etc..

function makeACake(flour, sugar, egg, fat){
var dough = flour + sugar + egg + fat;
}

Ok, we’ve got the dough! now let’s play a little and add a method to it, to cook that cake. So let’s say your programming language has a built-in function called .bake()

You see that .bake() has parentheses like functions have, and we will use them.

function makeACake(flour, sugar, egg, fat){
var dough = flour + sugar + egg + fat;
var cake = dough.bake(350F, 30min);
}

YEAH! At this point, the recipe is almost ready. But you need to include one more thing: when you bake a cake, you have to take it out of the oven before you can eat it. That’s what return does. (I very often forget to return the result of my functions…and then wonder why it doesn’t seem to work! :D)

function makeACake(flour, sugar, egg, fat){
var dough = flour + sugar + egg + fat;
var cake = dough.bake(350F, 30min);
return cake;
}

OK! Your recipe is complete. But we have designed a function, we haven’t made actual cakes with that function, right?

Before we dive in to the next step, let me explain a few things. The things you’ve listed in the function parentheses are called parameters. Parameters = placeholders. They are abstract notions.

Now when you will make actual cake, you will replace those parameters with real things. When you call a function (when you make a real thing) the parameters become arguments. To remember which is which: Argument : Actual, Parameter: Placeholder.

Let’s get into the kitchen and have fun with that function!

    1. Calling that function to get yummy results

Let’s say you have a friend coming over for tea, and your friend is vegan and allergic to gluten. Using your function, you’ll make a cake they can enjoy. This is how you do it:
var veganCake = makeACake(riceFlour, whiteSugar, veganEggReplacement, oil);

Now let’s say you’re helping a friend organizing a HUUUUUUUGE party. You need a huge cake!
var hugeCake = makeACake(whiteFlour, whiteSugar, autruchEgg, butter);

What if you have a friend who only eat organic, unrefined sugar and ghee in place of fat? Piece of cake! (yeah you waited for that one, right?:D)
var organicCake = makeACake(wholemealFlour, brownSugar, commonEgg, ghee);

So you see, you can make an infinite variety of cakes, using only one definition. The definition is abstract and uses placeholders to design the process, but the cakes are real and are made of real things.

A note concerning the parentheses of our .bake() method: we called .bake with actual arguments, right? We didn’t need to define the method with parameters, because it is built in the language. That means it is already defined, and the .bake method has already parameters. all this has been defined by the (imaginary) authors of our pseudolanguage. You can guess those parameters are:
.bake(temperature, time)

If you’re a beginner, I hope this helps. Sometimes documents and course materials are very abstract themselves and it’s not easy to…crack the code. But you’ll get there! At first reading MDN documents was a nightmare but now I get it. Just keep trying and remember to reach out when you’re stuck.

Now excuse me, a cake is waiting for me.

via GIPHY

CSS : calc()

The calc function is a great way to size your elements.

How it works:
Calc() operates with values of identical units, as well as with values of different units.
You can set calc() as a value of any sizing properties, and you can also use them for angles.

It can be a life-savior in situations where you need responsiveness.

For example, you can use it like this:


div {
height: calc(100vw / 10);
width: cacl(100vw / 10);
}

*NB: “vw” stands for Viewpot Width. 100vw = total width of your viewport.*

What this code does is that it gives you a responsive square div, the size of which is 1/10 of the viewport width. A square it is, a square it will be.

Here is an example of how I used it: a mosaic of the Eye of Sauron!

EDIT: Someone did it better than me, using several columns per row and Bootstrap4. See Jerome Legrand’s solution here.

a mosaic representation of the Eye of Sauron
an exercise: keep the aspect ratio of the image whatever the screen size

Webdesign integration

D-19 before school!

I really can’t wait!

I’m saying goodbye to roles and responsibilities I will no longer be able to take.  (I have been a volunteer secretary/community manager for a nonprofit organization for almost 5 years)

Saying goodbye properly and preparing the arrival of the person who will come after me is quite a lot of work in itself, and I feel a bit nostalgic, but also happy of what I achieved there. I was the youngest there and the most in tune with the tech world. So they were glad to have me. I implemented a newsletter with mailchimp, opened a facebook page with another volunteer, took care of the attendees’ questions, found solutions for various mailbox troubleshootings, managed attendees’ registration, organized carpools for the events…

It was multiskilled and I am grateful for this opportunity to discover how I could be useful. It was lots of fun.

So, I’m in that intermediary state, between the end of something and the beginning of another.  It’s kind of a weird feeling!

I’m focusing on integrating webdesigns I was given by the school. First creation : the Fruit Salad website, mobile version. I’ll add the media queries tomorrow.

You can see it here!

🙂

a webdesign example for a fruit salad website
Integrating the “Fruit Salad” design – mobile version

 

Preparing for webdev job interviews

I want to start a series of posts on how to prepare for job interviews as a junior webdeveloper.

This is something that seems way more mysterious to me than an algorithm… So that means: prepare, prepare, prepare!

I don’t knwo how I will organize this series yet. I might include posts like how to set up your LinkedIn profile, how to write your cv…

For now, I’ll share a link that I really like:

Felix Feng: I spent 3 months applying to jobs after a coding bootcamp. Here’s what I learned.

See you soon!

Google-Udacity Scholarship: Completed! What’s next?

Remember I won a Google Developer Challenge Scholarship?

I completed the course yesterday! I learned a lot, about ES6, Service Workers, IndexDB, caching… It was my first time using Udacity and I loved how clear it is. My only regret is that some lessons relied exclusively on videos and my learning type works best with text, that I can skim, skip or go back to. So a transcript would have been great in those cases.

The course was in fact so rich that I plan on doing it again soon. But for the moment, I’ll focus on honing my HTML + CSS skills and learning PHP and MySQL, in order to be ready for school. (D-35!!!)

I encourage anyone to submit an application to these Goodgle-Udacity scholarships, because you will greatly benefit from it.

I finished my second round of #100DaysofCode last week. I’ll start another one next monday! 🙂

It’s amazing to look back and see where I was 200 days ago. Of course, I have lots to learn, But I accomplished those first steps that are always huge, and sometimes stressful, when you begin something new. And I’m proud of what I achieved!

Accepted to Wild Code School

I am happy to share this good news: I have been accepted to Wild Code School!
It will start at the end of February 2018. I can’t wait to begin.  In the meantime, we have to practice CSS and solve more algorithms, so I’ll continue with Python, which I really like. And I will need python in the future, because I want to learn machine-learning, I’m very interested in working with AI.

So I have been practicing css and currently I’m learning flexbox, with David Geddes’ Flexbox Zombies, wich is the coolest course I’ve used so far. I also plan to learn Grid.

I’ve set up another blog, on a github page using Jekyll (part of my css-training program). The github blog will serve to log my #100daysofCode progress. And here I’ll speak about general coding topics.