The Journey of #100DaysOfCode (@henna_dev)

henna.s · March 22, 2022, 11:40am

I am not studying, I am practically doing… I feel like punching … sometimes… but then I decide to punch bags instead…

henna.s · March 22, 2022, 10:12pm

#Day44 of #100DaysOfCode

One of the meh days when I want myself to disappear Any advice on how to handle such days is appreciated. I may go ahead and poke needles in my cross-stitch project but I will briefly describe what I did today.

I continued further on the flexbox.io videos but could not finish a lot but did an exercise on applying a flexbox to a navigation layout which would change display as the size of the screen changes.

I learned flexbox-basis is an important property and the effect varies with available space. If you apply display as flex but don’t apply flex-wrap then it will have to adjust all flex-items in the main-axis from left to right as the effect is no-wrap by default. If flex-wrap: wrap is applied, then the defined value of flex-basis:400px to 6 flex-items will be applied appropriately.

A code-pen applying the same is as below:

A code-pen with flex-nav layout and media queries is as below:

That is all for today

henna.s · March 23, 2022, 11:31pm

#Day45 of #100DaysCodeOfCode

Today happened to be a great day… Had a slow start but ended on a high note… I ticked some tasks on my list… had an awesome dinner at my favorite cafe of amazing hosts and got a cappuccino discount as well

These people have come to know I am a coffee addict…

(please don’t judge me on the photo, I told my husband I look like a clown but he said I don’t )

So today I finally managed to create the Flashcard Project. It does look the way as asked but Jetbrains did not clear it as something according to them is missing but I am super happy it’s finally working.

As I mentioned before, the trick was absolutely using correct height and weight of the quizcards and the questions. For adding animations, there had to be 3 divs, with a card div sandwiched between a front and a back div. So a sample code for 2 cards would look like:

    <div class="card">

        <div class="questions front"><p>How many Realm SDKs are there?</p></div>
        <div class="questions back"><p>7: Java, Kotlin, .NET, Swift, Node, ReactNative, Dart</p></div>
    </div>

    <div class="card">
        <div class="questions front">What are different components of MongoDB Realm</div>
        <div class="questions back">3 components: Realm SDK, Realm Sync, Application Services</div>
    </div>

The transformation and transition code on these cards would look like (provided flex layout is applied to card and other divs) :

.card {
transition: 2s ease;
transform-style: preserve-3d;
}

.card:hover {
transform: rotateY(180deg);

}

.front, .back {
  position: absolute;
backface-visibility: hidden;
}

.back {
transform: rotateY(180deg);
}

The complete project can be seen here:

https://hennasingh.github.io/RealmQuizCards/src/index.html

Did you know: I spent 15 minutes deciding the background

Things I need to fix:

Adjust the layout based on the screen size.

That is all for today…

henna.s · March 24, 2022, 4:14pm

G’Day, @Jason_Nutt ,

Apologies for the delay in replying =D.

Well if things are easy, everyone would do it, right That’s what makes us different , Hi

I struggled for weeks with the flexbox layout and applying animation but was finally able to do it by a lot of googling and reading so you can too… Feel free to use any of the forum channels for your MongoDB for Javascript questions… a lot of us here are happy to help

Please let me know what weekend will work for you and we will have a zoom chat…

Cheers,

henna.s · March 24, 2022, 11:32pm

#Day46 of #100DaysOfCode

Yikes!!! I am going through Mood Swings… My self-analysis for this week…

Now when and why do they happen? I don’t tend to research on it but I have a fair idea why am I going through it, so I will work on fixing this

Today started with a good note but had a wavy graph throughout the day. Mostly spending time in nature cures me… I had martial arts class today, so this was maybe 4th class and my colleagues are impressed by me how was I able to grasp the fighting stances so quickly… How do I tell them… I am a natural-born fighter hehehehhe…

Well, I was annoyed most part of my afternoon and I got some tasks out of the way… perhaps a good night’s sleep will fix me… I did a very basic and light reading on Javascript and below are a few notes:

Introduction to JavaScript

JavaScript is a fun and flexible programming language. It’s one of the core technologies of web development and can be used on both the front-end and the back-end. While HTML and CSS are languages that give structure and colors to web pages, JavaScript makes them interactive and come alive.

console.log() is used to log data/message to the console.
We can write single-line comments with // and multi-line comments between /* and */ .
There are 7 fundamental data types in JavaScript: strings, numbers, booleans, null, undefined, symbol, and object.
Numbers are any number without quotes: 23.8879
Strings are characters wrapped in single or double quotes: 'Sample String'
The built-in arithmetic operators include + , - , * , / , and % .
Objects, including instances of data types, can have properties, stored information. The properties are denoted with a . after the name of the object, for example: 'Hello'.length .
Objects, including instances of data types, can have methods that perform actions. Methods are called by appending the object or instance with a period, the method name. For example: 'hello'.toUpperCase() .
We can access properties and methods by using the . , dot operator.
Built-in objects, including Math, are collections of methods and properties that JavaScript provides.

This knowledge is from Codecademy, which seems to provide a good start to the language.

Until tomorrow, cheers

henna.s · March 26, 2022, 12:13am

#Day47 of 100daysofcode

Today was a day full of meetings and today is Happy Friday too… Fridays are my favorite because I talk to people I love to end my week…

Today I enjoyed a great dinner and my favorite cocktail and some music

I finished the Variables chapter in Javascript and some notes as below:

Variables hold reusable data in a program and associate it with a name.
Variables are stored in memory.
The var keyword is used in pre-ES6 versions of JS.
let is the preferred way to declare a variable when it can be reassigned, and const is the preferred way to declare a variable with a constant value.
Variables that have not been initialized store the primitive data type undefined .
Mathematical assignment operators make it easy to calculate a new value and assign it to the same variable.
The + operator is used to concatenate strings including string values held in variables
In ES6, template literals use backticks ``` and ${} to interpolate values into a string.
The typeof keyword returns the data type (as a string) of a value.

I also wrote a brief Realm Byte on Embedded Objects

Until Tomorrow, (I am going to trekk on SugarLoaf Mountains)

henna.s · March 27, 2022, 12:07am

#Day48 of #100DaysOfCode

Today had a lazy start to the day… Early Morning was our very first MongoDB Delhi User Group event, . Although I got late to the party, I heard a lot of people attended and learned about MongoDB Charts and had a good fun time as well.

If you are interested in being part of it , or hear more on user-group events, keep a watch of the Event Space on Forums

User Groups & Events

MongoDB User Groups bring people together to learn from and connect over their shared interest in MongoDB technologies.

Asia Pacific Middle East - Africa North America Central - South America Other Events Europe

Today I continued further on JavaScript, I studied conditionals topic and here are the notes below:

An if statement checks a condition and will execute a task if that condition evaluates to true .
if...else statements make binary decisions and execute different code blocks based on a provided condition.
We can add more conditions using else if statements.
Comparison operators, including < , > , <= , >= , === , and !== can compare two values.
The logical and operator, && , or “and”, checks if both provided expressions are truthy.
The logical operator || , or “or”, checks if either provided expression is truthy.
The bang operator, ! , switches the truthiness and falsiness of a value.
The ternary operator is shorthand to simplify concise if...else statements.
A switch statement can be used to simplify the process of writing multiple else if statements. The break keyword stops the remaining case s from being checked and executed in a switch statement.

A Magic Eight Ball example

let userName ='Jane'

userName? console.log(`Hello ${userName}`): console.log('Hello!')

var userQuestion = 'How will be my day today?'

console.log(`The person named ${userName} asked magic ball ${userQuestion}`)

let randomNumber = Math.floor(Math.random() * 8)

let eightBall = ''

switch(randomNumber){
  case 0:
  eightBall = 'It is certain'
  break;
  case 1:
  eightBall = 'It is decidely so'
  break;
  case 2:
  eightBall = 'Reply hazy try again'
  break;
  case 3:
  eightBall = 'Cannot predict now'
  break;
  case 4:
  eightBall = 'Do not count on it'
  break;
  case 5:
  eightBall = 'My sources say no'
  break;
  case 6:
  eightBall = 'Outlook not so good'
  break;
  case 7:
  eightBall = 'Signs point to yes'
  break;
}
console.log(eightBall)

Falsy Values

0
Empty strings like "" or ''
null which represent when there is no value at all
undefined which represent when a declared variable lacks a value
NaN , or Not a Number

That is all today… Cheers

henna.s · March 27, 2022, 10:48pm

#Day49 of #100DaysOfCode

Today was a sunny day and good fun as well. We have a Sunday market close to where we live and we visited that. There was a lot of good food to eat and handmade crafts from local artists to buy I bought myself a pair of earrings

I studied JavaScript Functions today and coded a game and wrote after a long time.

Twitter: https://twitter.com/henna_dev/status/1508214207879204867

henna.s · March 28, 2022, 9:51pm

#Day50 of #100DaysOfCode

Today was a tiring day and a day of self-reflection I realized I have come a long way from where and how I began. There are always things I would like to go back to but that’s life, isn’t it… It goes On!

Today I was not able to do a lot as I got tired from the day’s work but I am soo happy I finished 50th day today and I kept the streak without breaking it I am proud of myself

I did another exercise and created a Sleep Debt Calculator using Arrow Functions…

Twitter: https://twitter.com/henna_dev/status/1508562292199370753

henna.s · March 29, 2022, 11:02pm

#Day51 of #100DaysOfCode

Today was an office day, and I had lunch with my favorite person She sets my head straight when I am exploding
We soon will organize our first in-person MongoDB user group event in this amazing space

Today I studied scope in javascript

Twitter: https://twitter.com/henna_dev/status/1508942714758443013

henna.s · March 30, 2022, 9:28pm

#Day52 of #100DaysOfCode

Today was a little stressful and unhappy day. I don’t tend to cling on such days but in the moment it does not feel so great and all energy is sucked out of the body… I usually handle such days by going for a swim or lying down on the grass in sunny weather. Well, this time I will blame Irish weather for being gloomy, windy, and cloudy A good night’s rest to the rescue

I gave a presentation on Realm to my community team. I do hope it was informational for them but it’s a huge topic so continuous byte size info should help

I studied Javascript Arrays, tomorrow will continue the same on Arrays and Functions and Nested Arrays.

Twitter: https://twitter.com/henna_dev/status/1509281441745715211

henna.s · March 31, 2022, 10:12pm

#Day53 of #100DaysOfCode

Today was a KungFu Day… I love sports, I used to be captain on my school Kho-Kho team back in the days when I was in India… I also won gold medal in 400m Relay Race, 200m race and a sack race… Those were good golden times…
I feel better now than I was yesterday… I have an amazing friend who never fails to keep his smile even in times of chaos and I absolutely love him for everything that he does I have soo much to learn

Today I finished Arrays and did an exercise to find a Secret Message. Updated the previous article and added Arrays and Functions and Nested Arrays but the exercise is below:

Can you define what each of the method does

let secretMessage = ['Learning', 'is', 'not', 'about', 'what', 'you', 'get',
 'easily', 'the', 'first', 'time,', 'it', 'is', 'about', 'what', 'you', 'can', 
'figure', 'out.', '-2015,', 'Chris', 'Pine,', 'Learn', 'JavaScript'];

console.log(secretMessage.length)
secretMessage.pop();
console.log(secretMessage.length)


secretMessage.push('to','program')

console.log(secretMessage)

secretMessage[7] = 'right'

secretMessage.shift()

secretMessage.unshift('Programming')

console.log(secretMessage)

secretMessage.splice(6,5, 'know')

console.log(secretMessage.join(' '))

Until Tomorrow…

henna.s · April 1, 2022, 11:34pm

#Day54 of #100DaysOfCode

Today was a long day… but I enjoyed it… I like Fridays I talk to my amazing friend to end my week… I can rather talk to him all day and bore him to death

Today I finished Studying Loops in Javascript and I am left with 2 topics: Iterators and Objects before I can move on to Intermediate JS … Some review notes below

Loops in JavaScript

Loops perform repetitive actions so we don’t have to code that process manually every time.
How to write for loops with an iterator variable that increments or decrements
How to use a for loop to iterate through an array
A nested for loop is a loop inside another loop
while loops allow for different types of stopping conditions
Stopping conditions are crucial for avoiding infinite loops.
do...while loops run code at least once— only checking the stopping condition after the first execution
The break keyword allows programs to leave a loop during the execution of its block

Also implemented a program ‘Whale Talk’. Did you know Whale talks only vowels

var input = "Turpentine and Turtles";

const vowels = ['a','e','i','o','u'];

var resultArray = []

for(let i =0; i< input.length; i ++){
  //console.log(i)
     if(input[i]=== 'e'|| input[i] === 'u'){
            resultArray.push(input[i])
          }
  for(let j=0; j < vowels.length; j++){
      if(input[i] === vowels[j]){
          resultArray.push(input[i]);
      }
  }
}

console.log(resultArray)

var resultString = resultArray.join(' ').toUpperCase()

console.log(resultString)

Until Tomorrow…

henna.s · April 2, 2022, 11:00pm

#Day55 of #100DaysOfCode

Today I went to town and I did some shopping and had a great Saturday dinner I also managed to publish the International Women’s Day event which I would be organizing in our very own MongoDB office

Today I studied Higher-Order Functions, I did these before and at that time they were hard to grasp but Codecademy lessons are great, I have started to get the hang of it. Some Notes below:

Introduction

Higher-Order Functions help add a level of abstraction to programming. These functions can accept other functions as arguments and/or return functions as output.

Functions as Data

In Javascript, functions are first class objects. This means, Javascript functions can have properties and methods. Since functions are a type of object, they have properties such as .length and .name , and methods such as .toString() .

Read more about the methods and properties of functions in the Mozilla documentation.

Functions are special because they can be invoked, but can also be treated like any other type of data.

const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => {
  for(let i = 1; i <= 1000000; i++) {
    if ( (2 + 2) != 4) {
      console.log('Something has gone very wrong :( ');
    }
  }
};

// Assigned a function with a longer name to a new variable 
const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes;

isTwoPlusTwo();

console.log(isTwoPlusTwo.name)

Functions as Parameters

Since functions can behave like any other type of data in JavaScript, it can accept other functions as parameters.
A higher-order function is a function that either accepts functions as parameters, returns a function, or both! Such functions that get passed in as parameters are called callback functions. Callback functions get invoked during the execution of the higher-order function.

const higherOrderFunc = param => {
  param();
  return `I just invoked ${param.name} as a callback function!`
}
 
const anotherFunc = () => {
  return 'I\'m being invoked by the higher-order function!';
}
 
higherOrderFunc(anotherFunc);

In the above function, highOrderFunc accepts a single parameter param. This function is invoked inside the body and also returns a string telling us the name of the callback function.

High-Order Functions can also have anonymous functions as arguments

higherOrderFunc(() => {
  for (let i = 0; i < 0; i++){
    console.log(i);
  }
});

Review

Abstraction allows writing complicated code in a way that’s easy to reuse, debug, and understand for human readers.
We can work with functions the same way we work with any other type of data, including reassigning them to new variables.
JavaScript functions are first-class objects, so they have properties and methods like any other object.
Functions can be passed into other functions as parameters.
A higher-order function is a function that either accepts functions as parameters, returns a function or both.

That is all for today…

henna.s · April 3, 2022, 9:34pm

#Day56 of #100DaysOfCode

Today is race against battery, so here I go

Jason_Nutt · April 4, 2022, 10:05pm

@henna.s I am learning from you’re posts also. Keep up the well documented journey. It’s an inspiration! Thanks for a refresher course on higher order functions. I need more javascript everyday so it is appreciated.

henna.s · April 4, 2022, 10:16pm

#Day57 of #100DaysOfCode

Today was a long and tiring day. I came to Copenhagen yesterday for Realm off-site and team bonding activities. It was a full day of knowledge, getting to know team members but equally tiring as well…

Some sneak peek

Today I did an exercise to verify my understanding of Higher-order functions and Iterator methods

let story = 'Last weekend, I took literally the most beautifull bike ride 
of my life. The route is called "The 9W to Nyack" and it stretches all 
the way from Riverside Park in Manhattan to South Nyack, 
New Jersey. It\'s really an adventure from beginning to end! 
It is a 48 mile loop and it literally took me an entire day. 
I stopped at Riverbank State Park to take some artsy photos. 
It was a short stop, though, because I had a freaking long way to go. 
After a quick photo op at the very popular Little Red Lighthouse
 I began my trek across the George Washington Bridge into New Jersey. 
The GW is a breathtaking 4,760 feet long! 
I was already very tired by the time I got to the other side. 
An hour later, I reached Greenbrook Nature Sanctuary, 
an extremely beautifull park along the coast of the Hudson. 
Something that was very surprising to me was that near 
the end of the route you literally cross back into New York! 
At this point, you are very close to the end.';

let storyWords = story.split(' ');
let unnecessaryWord = 'literally';
let misspelledWord = 'beautifull';
let badWord = 'freaking';


//1. Turn the story into an array using .split() method

//2. Use .join() to view edited array as a string

//3. Use a method to count words in the story.

//4. Use a method to remove the unnecessary word from the story.

//5. Use a method to correct misspelled word to correct spelling.

//6. Use method to find the index of the badWord in the story and then replace the word with 'really'

//7. Use a method to verify the number of characters in every word is less than 10.

//8. Use a method to change the word greater than 10 characters to a shorter word.

//9. Remove occurrence of 'very' from the story.

//10. Change the imperial units of measurement (feet and miles) to metric units (meters and kilometers)

That is all for today… a little tired to continue…

henna.s · April 5, 2022, 10:16pm

#Day58 of #100DaysOfCode

Another long day and it’s getting harder to maintain the streak… A day packed with a lot of informational sessions. I learned about Flexible Sync in Realm today and how it is different from Partition Sync.

I found out that when a client-device makes a write, a single connection can open multiple sync sessions, but there is a limit to the number of connections that can be opened and this limit is increased based on request.

The Atlas cluster that shows the number of connections (in metrics) is different from this. Those connections are opened if you open Data Explorer, shell, or terminal and Atlas Monitoring also used a lot of connections. These connections should get closed when not in use. There is also limit to number of connections that can be opened based on the chosen Tier.

Another interesting thing I found out was that oplog in an Atlas free tier cluster is shared across multiple tenants and that is why the error “Resume token fallen off the oplog” is common in them.

There was also a team dinner to end the day.

I also studied Objects in Javascript and how they are accessed and created. I don’t have a lot of strength to document what I learned so I will write a lengthy article maybe tomorrow and finish reading “Pass by reference” and advance objects topic as well.

Until I wake up next day…

henna.s · April 6, 2022, 10:18pm

#Day59 of #100DaysOfCode

Another long day and I am glad to finish the last offsite day. It was nice meeting everybody but being the only person from my own team dint feel too great and I cant wait to be back home tomorrow

Some sneak peek of the fun evening

Today I finished the Objects topic and some review notes as below:

Objects store collections of key-value pairs.
Each key-value pair is a property—when a property is a function it is known as a method.
An object literal is composed of comma-separated key-value pairs surrounded by curly braces.
You can access, add or edit a property within an object by using dot notation or bracket notation.
We can add methods to our object literals using key-value syntax with anonymous function expressions as values or by using the new ES6 method syntax.
We can navigate complex, nested objects by chaining operators.
Objects are mutable—we can change their properties even when they’re declared with const .
Objects are passed by reference— when we make changes to an object passed into a function, those changes are permanent.
We can iterate through objects using the For...in syntax.

Looping Through Nested Objects

let spaceship = {
  crew: {
    captain: { 
      name: 'Lily', 
      degree: 'Computer Engineering', 
      cheerTeam() { console.log('You got this!') } 
    },
    'chief officer': { 
      name: 'Dan', 
      degree: 'Aerospace Engineering', 
      agree() { console.log('I agree, captain!') } 
    },
    medic: { 
      name: 'Clementine', 
      degree: 'Physics', 
      announce() { console.log(`Jets on!`) } },
    translator: {
      name: 'Shauna', 
      degree: 'Conservation Science', 
      powerFuel() { console.log('The tank is full!') } 
    }
  }
}; 
 
// for...in
for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
}

henna.s · April 7, 2022, 11:55pm

#Day60 of #100DaysOfCode

Today I am back in Dublin and trying to settle in after a 4 day’s work trip to Copenhagen It was nice to meet my team and I bonded well with a lot of colleagues… Small Acts of happiness and laughter make a difference

I studied advanced concepts in JS Objects. Some notes below:

Using `this` keyword

Objects are collections of related data and functionality. We store that functionality in methods on our objects:

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  }
};

Now when makeSound is called it will print baaa on screen Now you if add another method as below, why does this give error?

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet() {
    console.log(dietType);
  }
};
goat.diet(); 
// Output will be "ReferenceError: dietType is not defined"

That’s because there is no automatic access to other properties of the goat object inside the scope of the .diet() method. This works if this keyword is used to refer the property as shown below:

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet() {
    console.log(this.dietType);
  }
};
 
goat.diet(); 
// Output: herbivore

The this keyword references the calling object which provides access to the calling object’s properties. In the example above, the calling object is goat and by using this we’re accessing the goat object itself, and then the dietType property of goat by using property dot notation.

Arrow Functions and `this`

Using this with Arrow functions is a bit complicated

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet: () => {
    console.log(this.dietType);
  }
};
 
goat.diet(); // Prints undefined

Arrow functions inherently bind , or tie, an already defined this value to the function itself that is NOT the calling object. In the code snippet above, the value of this is the global object , or an object that exists in the global scope, which doesn’t have a dietType property and therefore returns undefined .

One should avoid using this in a method with an arrow function.

I will write on Privacy, Getters/Setters, and Factory Functions tomorrow.

Until next time