Blog

Round 3 100Days Of Code

January 04, 2020

Design Code

Day 19: January 04, 2020 - Saturday

Design Code

BRIEF DESCRIPTION:

REFERENCES:

Design

Day 18: January 03, 2020 - Friday

Figma Design

BRIEF DESCRIPTION:

  • After so many days set up 2 hours in my daily schedule to learn and improve my skill on Design aswell.
  • Started of with Figma with its own Learn Design course tools.

REFERENCES:

Javascript Info Cont.

Day 17: January 02, 2020 - Thursday

JS Info

BRIEF DESCRIPTION:

  • Continue reading Javascript Info in the free time.
  • Side by side practised in the Dev Tools on how JS works.

REFERENCES:

Javascript Info & CSS Visual Dictionary Grammar

Day 16: January 01, 2020 - Wednesday 🍾 💖

Snap of CSS Visual Dictionary

BRIEF DESCRIPTION:

  • Started learning JS from scratch from Javascript Info to fill the gap in Vanilla JS.
  • Much needed one.
  • Also finished half of CSS Visual Dictionary by Javascript Teacher.
  • Started this CSS Book earlier in 2019 but never finished it, but this time I am going to complete it.

REFERENCES:

CSS Animation ✨

Day 15: December 31, 2019 - Tuesday

Codepen Experiments

BRIEF DESCRIPTION:

  • Spent some time experimenting with CSS Animation on Codepen.

REFERENCES:

Gistpad 💟

Day 14: December 30, 2019 - Monday

Snap of Gistpad in my VSCode

BRIEF DESCRIPTION:

REFERENCES:

Youtube Videos and Bookmarks Organized

Day 13: December 29, 2019 - Sunday

Bookmarks with fancy icons

BRIEF DESCRIPTION:

REFERENCES:

Vue Instance

Day 12: December 28, 2019 - Saturday

Complete section 5

BRIEF DESCRIPTION:

REFERENCES:

Monster Slaying Project

Day 11: December 27, 2019 - Friday

Excercise for the section 4

BRIEF DESCRIPTION:

REFERENCES:

Conditionals and Rendering Lists

Day 10: December 26, 2019 - Thursday

Excercise for the section 3

BRIEF DESCRIPTION:

REFERENCES:

Statecharts & StateMachines

Day 9: December 25, 2019 - Wednesday

Whatsapp Fingerprint Animation GIF

BRIEF DESCRIPTION:

  • Started of with Whatsapp Fingerprint Unlock codepen to make a replica.
  • Learned how it works and recoded them to know how exactly it works.
  • Improved the JS code to have two states like lock and unlock to fix the bug in animation from the previous implements.
  • Learned about SVG’s stroke-dashArray and stroke-dashOffset.
  • MDN becomes the go to place directly from VSCode.
  • Spent the evening watching videos about State Machines by David K Piano and others explaining Xstate.
  • Read some intro on Statecharts.
  • Got an overview of how the state machines work.
  • Better way to code without too many booleans in the code.

REFERENCES:

Shed some light on CSS Clip-path

Day 8: December 24, 2019 - Tuesday

HTML 5 Shape Animation GIF

BRIEF DESCRIPTION:

REFERENCES:

Mozilla Developer Edition DevTools

Day 7: December 23, 2019 - Monday

Mozilla Developer watched video screenshot

BRIEF DESCRIPTION:

  • Continued watching the Mozilla Developer youtube videos.
  • Learned about the inbuilt screenshot feature, Font Editor & Color Picker.
  • Also, just to explore the Edge Chromium, I installed the Dev Edition and tested out for sometime.
  • First impression, seems more like Chrome with some improvements.
  • Interface is good, icons are bright but will give it a try for some days.

REFERENCES:

Mozilla Developers YT

Day 6: December 22, 2019 - Sunday

Mozilla Developer watched video screenshot

BRIEF DESCRIPTION:

REFERENCES:

CURLEYWEBDEV CSS Animation

Day 5: December 21, 2019 - Saturday

Love Smiley Animation

BRIEF DESCRIPTION:

  • Completed Section 2 in Vue JS - course by Maximilian
  • Learning to do Pure CSS Animation in the side.
  • I have always insipired from CurleyWebDev’s FB group, so starting with his creations in Codepen.
  • Replicated two of his creations - Sleeping Smiley & Love Smiley.
  • For a day, switched to Firefox Developer Edition for seeing the animation values within the dev tools and loved it.
  • Hope we can get something similer to Chrome as well.
  • Firefox shows unused CSS, changed CSS and lets you copy them.
  • Visually see the Grid, Flex and animation, lot more to it. Need to explore more on this.

REFERENCES:

VS Code Tasks

Day 4: December 20, 2019 - Friday

Image about VSCode tasks

BRIEF DESCRIPTION:

  • Completed Section 1 in Vue JS - course by Maximilian
  • Spent most of my time trying to figure out how tasks work in VSCode and learned them.
  • Created a macro with keybindings to save, add, commit, pull and push the changes to the github via tasks in background.
  • This is super awesome with to possibilities I can do much more.

REFERENCES:

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Day 3: December 19, 2019 - Thursday

Image about the things thought in Vue JS Course

BRIEF DESCRIPTION:

  • Started the Vue JS - course by Maximilian
  • Not much of learning today since took some time to decide on which & best course to start.
  • Also visited some of the Dev Discord servers which has a lot of unread messages.
  • Got interested in Google’s Quantum Supremacy and watching how they build it and how powerful it is.

REFERENCES:

MOARRR Extensions - VSCode

Day 2: December 18, 2019 - Wednesday

Image of JS helper function with JS Doc

BRIEF DESCRIPTION:

  • Completed 💯 VSCode Pro.
  • Best in this segment, I can see myself using the keyboard shortcuts all the time.
  • Also started thinking why not use snippets instead of typing out all these syntaxes again & again.
  • Learned about JSDoc for better understanding of the code I wrote.
  • Using Emoji log on my repo with Alfred Snippet Expansion

  • Awesome 🌟 videos I saw today

REFERENCES:

PHP setup in VSCode

Day 1: December 17, 2019 - Tuesday

Image of extensions installed for PHP Project

BRIEF DESCRIPTION:

REFERENCES:

Go to Round 2

Share on Twitter
Share on Facebook
Navin
Created by Navin. He loves to learn, blog and develop new applications.
Twitter LogoGithub LogoLinkedIn LogoFaceBook Logo