Skip to content

Latest commit

 

History

History
640 lines (410 loc) · 37.4 KB

Logs.md

File metadata and controls

640 lines (410 loc) · 37.4 KB
Raw

Logs - 100DaysOfCode

  • My daily progress and content related to it can be found here.

Day 0 | 100 Days of Code

Github ReadMe.md Guide and Documentation

Documentaion of project are one of the most important part of project.

  • Learned how to document project with Header , Styles, Code Snippets, Images, Links, Recording Screens , Emoji, Gist and many other important components.
  • Setting Screen Gifs in readMe, Creating Team Sections, Link profiles.

Day 1 | 100 Days of Code

The principle objective of software testing is to give confidence in the software

Day 2 | 100 Days of Code

Ionic App Optimised File Structure

  • Learned about Shared Modules
  • Learned how to structure files in optimised manner in project with too many services, directives and components.
  • Folders-by-feature structure
  • Core Feature Module

Day 3 | 100 Days of Code

Gatsby Static Website Generator

  • Learned about Gastby Static Wwebsite
  • Fast, Secure, Better SEO, User Experience
  • Easy to set up
  • React Template ( best part for me)
  • but i ended up making .tsx file in project.

Day 4 | 100 Days of Code

Porting Create-react-app to Gatsby

  • Easy to convert
  • serves static content to client i.e pre-rendered
  • better user experience
  • better reach for slow internet devices | under powered devices

Day 5 | 100 Days of Code

Neomorphic UI

  • Learned some neomorphic UI
  • css tools
  • neomorphic component generator
  • styling with color contrast

Day 6 | 100 Days of Code

Learning some Minimalist Design Concepts. Goals :

  • Optimal layout view concept vulnerable to screen size
  • Using the key rules of Minimalist Graphic Design
  • Taking some tasks from https://frontendmentor.io for better challenges!

Day 7 | 100 Days of Code

Learned some CSS writing skills :

  • creating Gradients with linear and radial
  • Floating things
  • Positioning elements
  • Flex & Grid on items
  • Animation, Transform & Transitions (specially on hover)
  • SASS(SCSS)

Day 8 | 100 Days of Code

Lately i have been working on CSS properties and using many of them well in my projects like creating neomorphic UI and components, gradients and many others.

  • I added some gradient to my display picture border here today!

Day 9 | 100 Days of Code

Taking few tasks from http://frontendmentor.io

Working on single page game task

Learning outcome include css concepts and other things.

Day 10 | 100 Days of Code

Learned Making File Explorer in Ionic

  • Create New Folder
  • Create New File
  • Copy File/Folder
  • Move File/Folder

Day 11 | 100 Days of Code

Structuring Old Code

  • Strctured Code
  • made services
  • made utility functions
  • made components
  • made resuable functions

Day 12 | 100 Days of Code

Gatsby Lighthouse Score

  • Adding PWA
  • Optimising Images
  • SEO score
  • Performance Score
  • Accessibility
  • Offline Support

Day 13 | 100 Days of Code Day 14 | 100 Days of Code

  • Added some plugins for better performance :
  • @preactjs
  • reduce JS through Preact
  • yarn add gatsby-plugin-no-javascript

Changing the rendering engine from React to Preact can reduce up to 100kb (unzipped) in bundle size, making our sites faster

Day 15 | 100 Days of Code Day 16 | 100 Days of Code

  • Learned some Animations
  • Applied Animate.css to projects
  • Added illustrations and explored some of free resources
  • Added Free Resouces in repository
  • Content added in repo

Day 17 | 100 Days of Code

Learned Adding New Update Available or New Version Update available in PWA app. I have cached all the urls in my react app and wasn't able to give any update to it until cache is totally cleared. Writing newUpdateisAvaialble Function in serviceWorker.js that checks for internet and and falls for cache if found offline and fetches new updated data elsewise.

Working on reducing cache and better better performance for PWA, Worked on lighthouse score to better numbers.

Day 18 | 100 Days of Code

Made new portfolio in react js https://anshvarun.tech

Day 19 | 100 Days of Code

Day 20 | 100 Days of Code

  • Writting css modules
  • removing styled components
  • taking css tasks to master it

Day 21 | 100 Days of Code

Day 22 | 100 Days of Code

  • learnt writing media query
  • responsive of all screens

Day 23 | 100 Days of Code

Day 24 | 100 Days of Code

Day 25 | 100 Days of Code

Day 26 | 100 Days of Code

Day 27 | 100 Days of Code

Day 28 | 100 Days of Code

Day 29 | 100 Days of Code

Day 30 | 100 Days of Code

Day 31 | 100 Days of Code Day 32 | 100 Days of Code

Completed JS module from @freeCodeCamp

Made a PR too @hacktoberfest

#100daysOfCode and #Hacktoberfest came up with so much tasks!!!

Day 33 | 100 Days of Code Day 34 | 100 Days of Code

Day 35 | 100 Days of Code

Day 36 | 100 Days of Code Day 37 | 100 Days of Code Day 38 | 100 Days of Code

Day 39 | 100 Days of Code

Day 40 | 100 Days of Code

Day 41 | 100 Days of Code

  • DevFest India -> @gdg
  • The ever first edition of AWS Community Day India - 2020 virtual edition @AWSCommunity

Day 42 | 100 Days of Code

Completed algorithm part!

Day 43 | 100 Days of Code Day 44 | 100 Days of Code Day 45 | 100 Days of Code

  • Algorithm Certification completed

Day 46 | 100 Days of Code

  • Started - Front End Libraries Certification Sparkles
  • Completed Bootstrap

Day 47 | 100 Days of Code

  • Learned quiet few principles of async and await

  • Made Authentication With Route Guards to my project preventing myself checking for cache and routes on each page.Sparkles

Day 48 | 100 Days of Code

Day 49 | 100 Days of Code

SASS

  • nesting CSS
  • mixins
  • loops and condtions
  • mapping
  • importing and extending

Day 50 | 100 Days of Code Day 51 | 100 Days of Code Day 52 | 100 Days of Code

REACT

React Update ⚛️⚛️⚛️

Done with React! ⚛️ ✨✨✨✨✨ Learned quite few basic things in this module ✨✨✨

Day 53 | 100 Days of Code Day 54 | 100 Days of Code

Redux

Day 55 | 100 Days of Code Day 56 | 100 Days of Code

React + Redux

Day 57 | 100 Days of Code Day 58 | 100 Days of Code

  • Random Quote Generator
  • Markdown Preview

Day 59 | 100 Days of Code Day 60 | 100 Days of Code

FontEnd Libraries Project Completed

Day 61 | 100 Days of Code

Day 62 | 100 Days of Code

Day 63 | 100 Days of Code

Day 64 | 100 Days of Code

✨ Added capacitorjs to nuxt_js app and generated executable file using electron. ✨ Android app platform added. ✨ Windows application generated.

✨ Built web-app to cap initiated app using ✨ capacitor-community/electron

Day 65 | 100 Days of Code

✨ Nodejs and Express ✨ Serving data with GET-POST

Day 66 | 100 Days of CodeDay 67 | 100 Days of Code

  • ✨Spring-Boot environment set up.
  • ✨File structure and Architecture done.
  • ✨Creating REST APIs done.

Day 68 | 100 Days of Code Day 69 | 100 Days of Code

Projects with Data Visualization 50% completed

Day 70 | 100 Days of Code Day 71 | 100 Days of Code Day 72 | 100 Days of Code

Day 73 | 100 Days of Code

  • generated resources in nuxt app
  • sync resources in android platform
  • add resources for electron app
  • optimising images for best logo placements in splash screens

Day 74 | 100 Days of Code

✨ Nuxt-Capacitor-Integration Explained nuxt capacitor

✨ Generated resources for specific platforms and sync with scripts

✨ Packaging application to executable files with scripts

Blog check here

Day 75 | 100 Days of Code

  • Capacitor-Nuxt-integration explained
  • Checkout my article on integration

Capacitor Integration with Nuxt App for Electron, Android and iOS https://robomx.com/blog/2020-11-17-capacitor-integration-with-nuxt-app-for-electron-android-and-ios @nuxt_js

Day 76 | 100 Days of Code

  • UI generated using ionic native components and tailwind-CSS

  • Via CDN

  • with custom webpack with Angular 10 by PostCss methods

Day 77 | 100 Days of Code

✨ Security Alert ✨

✨ bcrypt implementation
✨ bcrypt uses blowfish algorithm to encrypt passwords
✨ generate salt and hash with passwords in middleware.
✨ bcrypt password is ready!

Day 78 | 100 Days of Code

✨ Security Alert ✨

✨ XSS attack
✨ iframes disable
✨ cookie hijacking

✨ sanitizing malicious inputs with client side
✨ sanitizing server side responses
✨ deny the X -frames in main file

Day 79 | 100 Days of Code

  • Learnt about JWT

  • package use : jsonwebtoken

  • If a callback is supplied, the callback is called with the err or the JWT

Day 80 | 100 Days of Code

  • Improvement on frontend skills

  • Made reusable components to be used in multiple pages of IONIC APP by making common component module.

  • Skipped writing media query and opted for @tailwindcss responsive classes.

Day 81 | 100 Days of Code

  • eslint config
  • file configuration
  • use eslin tags for disabling

Day 82 | 100 Days of Code

  • IONIC CSS UTILITIES
  • Add CSS in variable.scss of theme
  • Define Custom CSS in theme
  • Ionic grid done with breakpoints

Day 83 | 100 Days of Code

  • Learned CSS :nth-of-type() Selector Sparkles

  • Implemented responsive table with mobile as well as desktop and other views.Sparkles

  • Reference inspiration gif below.

Day 84 | 100 Days of Code

  • Learnt about wireframing UX

  • Good Wireframes are Skeletons for Powerful Prototypes & Delightful Designs

  • sWireframing is the Art of Efficiency

Day 85 | 100 Days of Code Day 86 | 100 Days of Code

  • Setting up prettier in Angular CLI

  • Create a .prettierrc

  • "editor.formatOnSave": true

  • Configure pre-commit hooks using #husky

  • Add script to for precommits

  • "precommit": "run-s format:fix lint"

Day 87 | 100 Days of Code

  • Used drag and drop with ionic 5

  • Learned about GestureController Element

  • Introduced to ion-reorder

Day 88 | 100 Days of Code

  • vue-good-table

  • customization

  • server-side-table

  • style classes

Day 89 | 100 Days of Code

Explored Nuxtjs

✨ Adding a Vue component

✨ Adding a Navbar to Nuxt Apps

✨ Build and Serve the Nuxt.js App

Day 90 | 100 Days of Code

  • Building Ionic Lib for Npm

  • Using Ionic Components inside the Library

  • Using Services from our Ionic Library

  • Using Pages and CSS Variables from our Ionic Library

Day 91 | 100 Days of Code

  • Nested Promises vs. Async / Await

  • async and await Promises

  • Handling Errors / Rejection

Day 92 | 100 Days of Code

  • Service and Resolve Function with best recommended way done

  • Generate data service

  • Generate resolver

  • Navigate by url with parameter

  • Add param in routing of page

  • Retrieve the data

Day 93 | 100 Days of CodeDay 94| 100 Days of CodeDay 95 | 100 Days of Code

Applied to application:

✨ Adaptive Styling

✨ Reusable components

✨ Services & Utility for best serve purpose

✨ Navigations with static routes and service based resolvers

✨ Role based authentications

✨ Capacitor Plugins

Day 96 | 100 Days of CodeDay 97 | 100 Days of Code

✨ Completed application using tailwind CSS in ionic 4

✨ Completed with Guards with specific token based as well as role based.

✨ APIs done with async/await promises

Day 98 | 100 Days of Code

✨ Generating resources for Ionic Framework using Capacitor

✨ Missed using cordova-resources which generates all sizes

✨ Used cordova-res

✨ Used script to add res to project.

Script Reference : https://gist.github.com/dalezak/a6b1de39091f4ace220695d72717ac71

Day 99| 100 Days of Code

✨ Implement GraphQL API using Apollo server

✨ Test GraphQL API using GraphiQL