aditodkar

# Sample Nginx config with sane caching settings for modern web development
#
# Motivation: 
# Modern web development often happens with developer tools open, e. g. the Chrome Dev Tools. 
# These tools automatically deactivate all sorts of caching for you, so you always have a fresh 
# and juicy version of your assets available.
# At some point, however, you want to show your work to testers, your boss or your client. 
# After you implemented and deployed their feedback, they reload the testing page – and report 
# the exact same issues as before! What happened? Of course, they did not have developer tools 
# open, and of course, they did not empty their caches before navigating to your site. 

aditodkar

import { BrowserRouter, Route, Link, Routes } from "react-router-dom";
import Welcome from "./Welcome";
import Secured from "./Secured";
import RenderAnonymous from "./RenderAnonymous";
import RenderOnAuthenticated from "./RenderOnAuthenticated";
import UserService from "./UserService";
import "./App.css";

function App() {
  return (

aditodkar

Stop using JWTs!

TLDR: JWTs should not be used for keeping your user logged in. They are not designed for this purpose, they are not secure, and there is a much better tool which is designed for it: regular cookie sessions.

If you've got a bit of time to watch a presentation on it, I highly recommend this talk: https://www.youtube.com/watch?v=pYeekwv3vC4 (Note that other topics are largely skimmed over, such as CSRF protection. You should learn about other topics from other sources. Also note that "valid" usecases for JWTs at the end of the video can also be easily handled by other, better, and more secure tools. Specifically, PASETO.)

A related topic: Don't use localStorage (or sessionStorage) for authentication credentials, including JWT tokens: https://www.rdegges.com/2018/please-stop-using-local-storage/

The reason to avoid JWTs comes down to a couple different points:

• The JWT specification is specifically designed only for very short-live tokens (~5 minute or less). Sessions

aditodkar

Create-React-App Production build Optimizataion

Svg-Url-Loader

Requirement

Instead moving .svg files from src/assets/ to build/static/media/ during npm run build. .svg files have to be bundled into build/static/js/main.js

Steps

aditodkar

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

aditodkar

RN < 0.50 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
RN >= 0.50 -  watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache

npm >= 5 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache

Windows - del %appdata%\Temp\react-native-* & cd android & gradlew clean & cd .. & del node_modules/ & npm cache clean --force & npm install & npm start -- --reset-cache

aditodkar

import React from 'react';
import {View} from 'react-native';
import RootNavigator from './src/navigation/navigation';

const App = () => {
  return (
    <View>
      <RootNavigator />
    </View>
  );

aditodkar

// =================== Scope ======================= //

for (var i = 1; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

for (var i = 1; i < 5; i++) {
  (function(j) {

aditodkar

constructor(props) {
        super(props);
        this.state = {
            BHKtype: []
        };
    }

filterItems = (value, type) => {
        console.log("Value: ", value);

aditodkar

 <View>
    <Video source={{uri: video}}   
    ref={(ref) => {
        this.player = ref
    }}                                      // Store reference
    onBuffer={this.onBuffer}                // Callback when remote video is buffering
    onEnd={this.onEnd}                      // Callback when playback finishes
    onError={this.videoError}               // Callback when video cannot be loaded
   style={styles.backgroundVideo} />
</View>