Wednesday, December 9, 2020

Build Containers the Hard Way

https://containers.gitbook.io/build-containers-the-hard-way/ 

Improving performance of React applications

 https://nosleepjavascript.com/react-performance/

Responsive Navigation Bar With Html, CSS and Javascript - Responsive Sidebar Menu For Mobile

 

How to Code a Tetris Game using HTML and javascript

 

Adopting TypeScript Will Make You Suffer

 https://medium.com/swlh/typescript-will-make-you-suffer-7cc6ca4b1233

feasible-ui - a React UI Component Library

 https://aliakseiherman.github.io/feasible-ui/#/demo

Learn to write selectors for shadow DOM elements

 

Applying Textbook Data Structures for Real Life Wins

 https://heap.io/blog/engineering/applying-textbook-data-structures-for-real-life-wins

How to Build HTML Forms Right: Security

 https://austingil.com/how-to-build-html-forms-right-security/

Recursion Visualization

 https://quanticdev.com/algorithms/primitives/recursion-visualization/

Sunday, September 20, 2020

Systems Programming - Low-Level Academy

https://lowlvl.org

an explorable systems programming course that uses #rustlang and #webassembly for interactive playgrounds and visualisation. It starts with network programming, but it will be expanded to more topics! 

Tuesday, September 1, 2020

Url to get sample json data

Url to get sample json data - https://jsonplaceholder.typicode.com/posts

function getData() {
console.log('Fetching remote articles');
return fetch('https://jsonplaceholder.typicode.com/posts')
}

Saturday, August 29, 2020

Phoneix LiveView & iOS app

https://twitter.com/stevegraham/status/1264304523826216960?s=21

"The iOS part is a simple swift app that loads a webview with some simple code to pass messages between native and web lands. The webview is Phoenix LiveView, i.e. server side rendered HTML with events and DOM diffs going back and forth over the Phoenix websocket." 


Monday, August 24, 2020

React - Thought/Idea

 Look for a way to outline components created by developers of a team

i.e. differentiate between components given by a Framework (like Antd) and components added by a team's developers.

CSS Grid related

https://twitter.com/b0rk/status/1296872883642404865?s=21

 

Sunday, August 23, 2020

React Hooks - useSelector - useSelector hook first returns undefined state and after an action call returns the state correctly

https://stackoverflow.com/questions/61353697/useselector-hook-first-returns-undefined-state-and-after-an-action-call-returns

CSS - inline-block vs table-cell

https://stackoverflow.com/questions/15939896/css-inline-block-vs-table-cell

https://jsfiddle.net/g5bE8/

Excerpt 1:

You'll also find the gap between block when you apply display: inline-block;  

Re-size your window by pressing Ctrl key and scrolling with mouse scroll button to see differences.

Notice the vertical-align: middle; is not working as display: table-cell; in display: inline-block;.

 Exceprt 2:

Set line-height equal to element height and vertical-align will work for inline-block.

App for sketching UI & UX

https://twitter.com/hasankassem_/status/1296664902657089537?s=21

 

Saturday, July 25, 2020

Some pitfalls of SSR in React


MobX & React Hooks

Feb 2019 How to use Mobx with React Hooks
https://www.youtube.com/watch?v=oQiMXRsO4o4

Dec 2019 Intro to Mobx & React in 2020
https://www.youtube.com/watch?v=pnhIJA64ByY

Dec 2019 React Hooks + MobX TodoList
https://levelup.gitconnected.com/react-hooks-mobx-todolist-c138eb4f3d04

Dec 2019 Replacing Redux with Observables and React Hooks
https://blog.betomorrow.com/replacing-redux-with-observables-and-react-hooks-acdbbaf5ba80

Jan 2020 Using MobX with React Hooks
https://dev.to/ryands17/using-mobx-with-react-hooks-part---2-8ac

April 2020 MobX Strategies with React Hooks
https://medium.com/@suraj.kc/mobx-strategies-with-react-hooks-3de23932cb8c

June 2020 A State management comparison with React hooks, mobx and recoiljs
https://medium.com/@dbottiau/a-state-management-comparison-with-react-hooks-mobx-and-recoiljs-3b7e2f4cc6c3

June 2020 How to use React with MobX and Hooks - Note Taking App Tutorial
https://www.youtube.com/watch?v=MKNls_FReXI

useSelector or useContext

React & JS Cheatsheets by Reed Barger

Old links that are not working anymore:

New links:

How to center an element horizontally and vertically

Friday, July 24, 2020

VueJS Best Practices

Refactoring and the Art of Improvement

https://medium.com/young-coder/refactoring-and-the-art-of-improvement-19735563fbc2
Here are some common suggestions that sound reasonable, but set different thresholds:
  • Refactor when the cost of refactoring is less than the cost of not refactoring. (Sounds good, but how can you make that calculation?)
  • Refactor before adding new features if it will make it easier to add those features.
  • Ignore ugly code once. But refactor if you stumble over the same pain point twice.
  • Refactor opportunistically. Clean things up whenever and wherever you get the chance.
  • Refactor if you can make the change quickly (say, within a day).
  • Only refactor when the pain of leaving it exceeds the pain of fixing it.
  • Refactor immediately after shipping. (A great idea with very little likelihood of actually being followed.)

Why does Rails 6 include both Webpacker and Sprockets?

Wednesday, July 22, 2020

Advice from Marcelo Bielsa

"- Do not allow failure to deteriorate your self-esteem. When you win, the message of admiration is so confusing, it stimulates you so much your love for yourself and that deforms so much. And when you lose, the opposite happens, there is a morbid tendency to discredit you , to offend you, just because you lost. In any task you can win or lose, the important thing is the nobility of the resources used. " - Marcelo Bielsa

Friday, July 10, 2020

The myth of NoSQL (vs. RDBMS) “joins dont scale”

An Intro to JavaScript Modules

CRDTs: The Hard Parts


The Auth Bottleneck Pattern

Javascript Testing - React, Jest, React Testing Library, Cypress




Beeswarm chart with D3.js

The Difference Between HTTP Auth, API Keys, and OAuth

International Institute of Software Management, iiSM.ORG

Linux - Splitting & Joining a file

https://www.ibm.com/support/pages/how-use-split-and-cat-commands-split-large-file-smaller-pieces-and-then-restore-pieces-single-file

Splitting:
split -l 1000000 full_file.dat

Output is - xaa, xab, xac

Joining:
cat xab >> xaa
cat xac >> xaa

Note: At the lines where the files are joining, the ending line of part1 and 1st line of part 2 will be concatenated on the same line. We'll have to open the file in vi and just enter a newline in those places.

Sunday, June 28, 2020

Good Haskell books for beginners

Good Haskell books for beginners:
1) REAL WORLD HASKELL!
2) "Get programming with Haskell" by Will Kurt

Saturday, June 27, 2020

elm-ui Intro

How to try out new stuff


Flatten a Javascript object

https://stackoverflow.com/questions/19098797/fastest-way-to-flatten-un-flatten-nested-json-objects
https://www.npmjs.com/package/flat

Take a nested Javascript object and flatten it, or unflatten an object with delimited keys.
var flatten = require('flat')
 
flatten({
    key1: {
        keyA: 'valueI'
    },
    key2: {
        keyB: 'valueII'
    },
    key3: { a: { b: { c: 2 } } }
})
 
// {
//   'key1.keyA': 'valueI',
//   'key2.keyB': 'valueII',
//   'key3.a.b.c': 2
// }

Lodash flatMap example

Monday, May 25, 2020

How to write Javascript in Rails 6 | Webpacker, Yarn and Sprockets

VUECONF US 2019 | Vue 3: What I'm Most Excited About with Chris Fritz





Below is a Youtube comment by: Prashanth Krishnamurthy 

Here's an outline of the video. Vue 3 - harder, better, faster, stronger.Trends - Simpler and more explicit. List of things that Chris Fritz is excited about: 1. Reactivity caveats are gone. You can do this now - arr[index] = newVal; 2. Multiple root nodes
3. Simpler transparent wrappers How do you write a custom component today for a 'super-powered' input box?
v-model="searchText" placeholder="Search" @keyup.enter="search" The actual component ..
{{ label }}
Compare this to a more concise component. {{ label }}

4. No more automatic attribute inheritance. Explicitly pass arguments using v-bind="$attrs" You don't have to use inheritAttrs: false (since it will never be true).

5. v-on will compile to attributes. E.g @keyup compiles to on-keyup. Just v-bind = "$attrs" ($attrs will incl. all non-emitted listeners) No more $listeners. No more .native modifier for v-on.

6. v-model will compile to attributes. Again, just v-bind = "$attrs". No more overriding the native input event. No more model option.

7. Smarter v-model on components If you want to move 'select' to a component. {{ choice }}

You will use -
The corresponding component code is simpler... {{ choice }}


8. Simpler render functions
render(h) { return h(BaseInput, { modelValue: this.searchText, onModelUpdate: newValue => { this.searchText=newValue; }, class: this.$style.searchInput, placeholder: 'Search' }) } Vue3 migration will be easier through automatic migrations (where the intent is clear).

Followers

Blog Archive