Skip to content

Instantly share code, notes, and snippets.

View SuryaSankar's full-sized avatar

Surya Sankar SuryaSankar

16 followers · 10 following
View GitHub Profile
@SuryaSankar
SuryaSankar / listree-webpack.config.js
Created April 3, 2021 08:00
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'mylistree.js',
path: path.resolve(__dirname, 'dist')
}
};
@SuryaSankar
SuryaSankar / listree-es6-js.js
Last active April 3, 2021 07:51
import listree from 'listree';
listree();
console.log("Initialized My Listree");
@SuryaSankar
SuryaSankar / listree-umd.html
Created April 3, 2021 07:49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./node_modules/listree/dist/listree.min.css"/>
<title>Listree Example</title>
</head>
<body>
<ul class="listree">
@SuryaSankar
SuryaSankar / listree-package-json-scripts.json
Created April 3, 2021 07:46
{
"scripts": {
"build": "rollup -c",
"watch": "rollup -c -w"
}
}
@SuryaSankar
SuryaSankar / listree-rollup-config.js
Created April 3, 2021 07:43
import { terser } from "rollup-plugin-terser";
import scss from 'rollup-plugin-scss'
import pkg from './package.json';
export default {
input: 'src/js/index.js',
plugins: [
terser(),
scss({
output: 'dist/listree.min.css',
@SuryaSankar
SuryaSankar / listree-package.json
Created April 3, 2021 07:41
{
"name": "listree",
"version": "0.0.6",
"description": "Package to convert a nested list into a tree menu",
"module": "dist/listree.esm.min.js",
"browser": "dist/listree.umd.min.js",
"main": "dist/listree.esm.min.js",
"repository": {
"type": "git",
"url": "git+https://github.com/suryasankar/listree.git"
@SuryaSankar
SuryaSankar / listree-lib.js
Created April 3, 2021 07:39
import '../styles/main.scss';
function listree() {
const subMenuHeadings = document.getElementsByClassName("listree-submenu-heading");
Array.from(subMenuHeadings).forEach(function(subMenuHeading){
subMenuHeading.classList.add("collapsed");
subMenuHeading.nextElementSibling.style.display = "none";
subMenuHeading.addEventListener('click', function(event){
event.preventDefault();
const subMenuList = event.target.nextElementSibling;
@SuryaSankar
SuryaSankar / listree-lib.scss
Created April 3, 2021 07:37
listree-lib-css
.listree-submenu-heading {
cursor: pointer;
}
ul.listree {
list-style: none;
}
ul.listree-submenu-items {
list-style: none;
border-left: 1px dashed black;
white-space: nowrap;
@SuryaSankar
SuryaSankar / understanding-joins.md
Last active March 18, 2021 16:37
Example to understand joins

Let's try to understand joins by trying to verbalize what 'question' each join is trying to answer.

We will try to frame the explanation in terms of a real world example. We will build a Jobs DB with two tables - job and candidate. The job table will have a city field representing where the job location is at. Similarly candidate table also has a city field representing the city which the candidate prefers. Our goal is to match candidates to jobs based on the city. We will try to answer different questions with different joins and subqueries.

This seemed like a better example than other examples based on primary keys because this particular example does the matching on a column which can allow duplicate values. So we can understand the general case of how joins work. The case where the join is on a primary key column or a col with unique constraint - will just be a special case of this general case.

Creation of tables




  


  




    


          
    

      

        
        

          

              @SuryaSankar
          

          

            
                SuryaSankar
                / listree-pkg.html
            
            

              Created
              March 13, 2021 20:51
            

          

        

      

        

  

    
    


        



  


  

        

          
          <!DOCTYPE html>
        

        

          
          <html>
        

        

          
            <head>
        

        

          
              <meta charset="utf-8">
        

        

          
              <meta name="viewport" content="width=device-width, initial-scale=1">
        

        

          
              <link rel="stylesheet" href="https://unpkg.com/listree/dist/listree.min.css"/>
        

        

          
              <title>Easy Tree</title>
        

        

          
            </head>
        

        

          
            <body>
        

        

          
              <ul class="listree">