The morning started a little meh but cycling towards the sea coast. helped freshen up and then a scary turned awesome meeting added more color to my day 
One day I definitely will swim here 
I did a sample codepen to learn transitions, I learned to flip
I also updated the article with details on backface-visibility and added a codepen
Today was a productive day 
I manage to do lot of tasks 
I also enjoyed my second Martial Arts Class and it was sooo intensive but fun… I am absolutely in love 
Today I did 2 codepens and learned about z-index
Transition on a login card
Some theory on z-index is :
The z-index property can change the layer order of an element and change the position of an element on its z-axis.
The z-index property is defined by a positive or negative integer value, or by an auto value. An auto value gives the element the same layer order as its parent’s.
The
z-indexproperty will only work on elements whose position has been defined asabsolute,fixed, orrelative.
Twitter: https://twitter.com/henna_dev/status/1504237152674238469
Noice! Great job being consistent. The all powerful z-index is now yours to keep! It has served me well in many animation projects. Hooray for you my friend 
Thank you sooo much @Jason_Nutt
Animations are pretty exciting only if I could do better designing as well… In another world, I may want to be a designer… 
Would love to see your animation projects How are you progressing with MongoDB? Any thoughts on recording your voice? Lets have a zoom sometime when you are available 
Cheers, 
Today I went to the city and enjoyed St.Patricks Day Parade… 
It was absolute fun and equally tiring…
Some Highlights:
I finally finished the remaining puzzle pieces of the BookLog Application and now it displays the list of books and authors.
In continuation from the Realm Bytes: BookLog Topic.
the code for retrieving the booklist in the booklist fragment is all below:
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
listBinding?.rvBookList?.layoutManager = LinearLayoutManager(context)
setUpRecyclerView()
}
private fun setUpRecyclerView() {
adapter = BookListAdapter(realmList.where(BookRealm::class.java).sort("name").findAll())
listBinding?.rvBookList?.adapter = adapter
}
The Recycler View is used to display the list, the setup is called once the activity view is created, otherwise it throws error. Realm provides Realm Adapter to use with Recycler View to display the list.
The Recycler Adapter code is as follows:
class BookListAdapter(books: OrderedRealmCollection<BookRealm>): RealmRecyclerViewAdapter<BookRealm, BookListHolder>(books, true) {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BookListHolder {
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.booklist_item_layout, parent, false)
return BookListHolder(view)
}
override fun onBindViewHolder(holder: BookListHolder, position: Int) {
val book = getItem(position)
holder.bindValues(book)
}
}
The Holder code is as below:
class BookListHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
private val bookName = itemView.bookName
private val authorName = itemView.authorName
val stringBuilder = StringBuilder("")
fun bindValues(book: BookRealm?){
bookName.text = book?.name
book?.authors?.forEach{
stringBuilder.append(it.name).append(" ")
}
authorName.text = stringBuilder
}
}
If you fancy read Realm Recycler Adapter in detail.
So, the list is displayed as:
Until tomorrow…
Well to be honest @henna.s I am struggling to understand somethings but that is part of growth. I only have so much time to spend trying to figure something out per night so it is going slow. I am excited that I started the MongoDB for javascript developers, but not so excited to realize that means I have to face the fact that I have to go back and re-learn or re-iterate through asnyc/await and callbacks and the first ticket in the course has me at a standstill already but there is no giving up this time… Oh and I would love to share the few animated projects I’ve built with you any time. I appreciate the interest and we will make some time to zoom for sure soon. Maybe on a Saturday or something. Thanks for the accountability my friend!
I am in Edinburgh for the extended weekend and it has been a good fun day… I dint do a lot except publish the realm bytes and upload the app on the Github
Some highlights of me being crazy (Pro Tip: If you don’t have a good height, get a good mirror )
Twitter: https://twitter.com/henna_dev/status/1504963199950536706
Today was a long and tiring day… 
We trekked to Arthur Seat which is 250.5m above ground level but not an easy path… its an upward slope that felt like ages to finish… 
Some highlights of another great day:
I studied a bit of basic of Git and set up and SSH Key on Github Account so that I can push code without entering username password every time
I noticed I already had git installed, verified version by running git --version and I have 2.24.0 installed.
linking local git user to Github account is important. This helps identify the person who is making changes when you are working in a team.
git config --global user.name "Your Name"
git config --global user.email "yourname@example.com"
To enable colorful output with git type
git config --global color.ui auto
The following commands can be used to verify details:
git config --get user.name
git config --get user.email
An SSH key is a cryptographically secure identifier. It’s like a really long password used to identify a machine. GitHub uses SSH keys to allow uploading to a repository without having to type in a username and password every time.
To check if the Ed25519 algorithm SSH key is already been installed., type following command into the terminal and check the output:
ls ~/.ssh/id_ed25519.pub
If the console message contains “No such file or directory”, then there is no Ed25519 SSH key and will need to be created.
To create a new SSH key, run the following command. The -C flag followed by your email address ensures that GitHub knows who you are.
Please note: <> brackets are only placeholder and not added
ssh-keygen -t ed25519 -C <youremail>
Enter.Github needs to know what the SSH key is so the code can be uploaded without needing the password. Log into GitHub and click on the profile picture in the top right corner. Then, click on Settings in the drop-down menu.
Next, on the left-hand side, click SSH and GPG keys . Then, click the green button in the top right corner that says New SSH Key. Give a descriptive name to the key.
Run the following command on terminal to get the public SSH Key:
cat ~/.ssh/id_ed25519.pub
Highlight and copy the output, which starts with ssh-ed25519 and ends with the email address. Now, add this key back to GitHub in your browser window into the key field. Then, click Add SSH key . You’re done! 
Follow the directions in the Github article to verify the SSH connection.
That is the end for today folks
Today was another long day . We visited Edinburgh Castle and also met @Mark_Smith, whom I had met in New York City, back in 2020 during our NHTT training It was a day spent well with late evening return to Dublin…
Some highlights of the day:
I struggled with my Flashcard project. Apparently, Flip Card Animation is not easy to apply when there are multiple cards… I followed this video for a single card flip animation which is still easy…
I think the trick is to set the correct height and width so that cards don’t overlap… Currently, the cards are overlapping and the look does not look so presentable 
I am not too satisfied with the content from the Jetbrains Academy course… I may have to parallelly study from a book or a different course as well…
I scrolled a bit of Odin Project but did not like the structure of re-directing to other blogposts or different videos. I started with Codecademy which I am really liking… It’s starting from very basic but I think I will be able to pick up speed easily…
For fixing Flashcard Project, I think I will have to re-do the Flexbox layout model, something I don’t like at all… 
A little tired to document, so I will collectively add the 2 day learning tomorrow 
Twitter: https://twitter.com/henna_dev/status/1505693866535567362
So great to see you again @henna_dev - I can’t believe it’s been two years!
Absolutely… It was a delightful Afternoon
You should come to forums more often… You are coming back after 8 months, thanks to me
Today was a recovery day from a 3 day of trekking weekend The morning went well but the evening was tiring… 
I did another Martial Arts class today and learn about different defense and attack stances… 
and I spent some evening playing Overcooked 2 on PS4 
Today I watched another video on Flexbox at Flexbox.io which is a 20-video course by Wesbos and I have heard that he explains well but lets see how this one goes… I finished 10 videos today and did a sample code-pen that covers Flexbox sizing but I revised more content:
flex-direction : default is row, other values include column, row-reverse and column-reverseflex-wrap : default is no-wrap, other values are wrap, wrap-reverseSome Flexbox alignment properties are:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyalign-items: flex-start | flex-end | center | stretch | baselinealign-content: flex-start | flex-end | center | stretch | space-between | space-aroundalign-self: flex-start | flex-end | center | stretch | baselineWill continue the same tomorrow and will make a mobile app layout. Hopefully this can guide me with my Flashcards project 
What martial art are you studying?
I am not studying, I am practically doing… I feel like punching … sometimes… but then I decide to punch bags instead…
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
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:
That is all for today…
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,
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:
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.// and multi-line comments between /* and */ .23.8879
'Sample String'
+ , - , * , / , and % .. after the name of the object, for example: 'Hello'.length .'hello'.toUpperCase() .. , dot operator.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
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)
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
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)
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