BranchesTags

Repository files navigation

Simple Todo App Build Status

A simple todo app made using Incremental DOM and Redux.

Link : http://ayusharma.in/todo/dist/

Requirements

Please make sure that you have Node.js and npm installed on your system. This application is built with webpack, and without those two tools, you can't proceed.

  • Node.js (recommended: 4.x)
  • npm (recommended: 2.x or 3.x)

Installation

 npm install

Running Tests

 npm run test

Repo includes test cases for Redux's reducers with Jest.

Webpack dev server

It will start webpack dev server with Hot module replacement.

 npm run dev

Visit http://localhost:8080/webpack-dev-server/index.html in your browser to check application.

Build

It will create minified build in project's dist directory.

 npm run build

First Impression & Challenges

I found tasks quite interesting as I have to make end to end solution here. I found dependencies little bit outdated (Webpack 1.x, Babel 6.x etc) but It can be the constraint of the task to implement things in the current setup. So I kept the dependencies in provided versions. I also noticed all the dependencies in production state. So over the time I managed dependencies and devDependencies in package.json

Tasks

WEB-101: Support enter key for add todo field

I converted the input field to inside form tag. It gave me functionality submit form on enter key press. In later commits, I added return false on onsubmit and make a check to not to submit blank value in redux store.

Commits:

  • 3f33f62 WEB-101: Support enter key for add todo field
  • f9990b1 Fix: Stop user to submit blank value in list

WEB-102: Adding a new todo causes text field focus to be lost

I added focus property to add todo click listener. It is keep focusing on input element.

Commits:

  • 31029b7 WEB-102: Adding a new todo causes text field focus to be lost

WEB-103: Add status filtering test

On initial inspection, I identified Redux implementation. I did following:

  • tests using jest
  • combineReducer to combine todo and filter reducers.
  • action and listener for setFilter.
  • todo filtering for view according to filter.
  • filter template for #filter and conditional template.

Commits:

  • 5848dea WEB-103: Add status filtering test

WEB-120: Save users todo items

Added localstorage in subscribe and createStore. Later in redux implementation task, I added this by using applyMiddleware

Commits:

  • cfb0c5e WEB-120: Save users todo items

WEB-201: Extract CSS into separate file

I used extract-text-webpack-plugin in webpack and handled production and development scenario.

  • environments from package.json

Commits:

  • 0e6eb63 WEB-201: Extract CSS into separate file

WEB-303: Improve developer experience

Added webpack-dev-server with webpack-html-plugin to provide HMR.

Commits:

  • cba71f0 WEB-303: Improve developer experience

WEB-202: Optimized bundle generation

First of all I thought about webpack-bundle-analyser to inspect bundles. After that I have added following things:

  • webpack.optimize.AggressiveMergingPlugin
  • webpack.optimize.CommonsChunkPlugin
  • webpack.DefinePlugin
  • webpack.optimize.UglifyJsPlugin
  • devtool support - map files only in development mode.

Also added a commit later.

Commits:

  • f4a26f1 WEB-202: Optimized bundle generation
  • 8a2bcc6 RE:WEB-202: Optimized bundle generation

Reference https://webpack.github.io/docs/list-of-plugins.html

WEB-203: Replace lib/state.js

Implemented redux using createStore and applyMiddleware for localstorage.

Commit:

  • 434a2c1 WEB-203: Replace lib/state.js

WEB-110: Improve visual appearance && WEB-104: Change filter position test

Improved the visual experience, added scss, and implemented index.html#filter#renderBottom#filterTop. Later on, when things stared to work, I improved the UI again.

Commits:

  • 39ee90b WEB-110, WEB-104: Improve visual appearance, Change filter position test
  • 82bbc63 Improvement:WEB-110: Improve visual appearance
  • ebe0342 UI improvement - card layout
  • a0300d7 No tasks handler and UI fixes

WEB-302: Static feature compilation

I developed a find and replace loader for this. It is in loader directory.

Commit:

  • 91944cb WEB-302: Static feature compilation

WEB-301: Optimize the view rendering

For this I implemented rendering and markeup in 'incremental-dom'. I also tried some JSX libraries but could not implemented due to bugs.Some options I found on internet:

I found these very useful:

So in the end I wrote the markup using incremental-dom.

Other things:

  • Jest Fixup and setup a782097
  • Remove to do feature to show remove button on hover 42ce173

About

Simple To do app

ayusharma.in/todo/dist/

Topics

incremental-domreduxtodo

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Simple Todo App Build Status

A simple todo app made using
Incremental DOM and
Redux.
Link : http://ayusharma.in/todo/dist/
Requirements
Please make sure that you have Node.js and npm installed on your system. This
application is built with webpack, and without those two tools, you can't proceed.
  • Node.js (recommended: 4.x)
  • npm (recommended: 2.x or 3.x)
Installation
 npm install
Running Tests
 npm run test
Repo includes test cases for Redux's reducers with Jest.
Webpack dev server
It will start webpack dev server with Hot module replacement.
 npm run dev
Visit http://localhost:8080/webpack-dev-server/index.html in your browser to
check application.
Build
It will create minified build in project's dist directory.
 npm run build
First Impression & Challenges
I found tasks quite interesting as I have to make end to end solution here.
I found dependencies little bit outdated (Webpack 1.x, Babel 6.x etc) but It
can be the constraint of the task to implement things in the current setup. So I
kept the dependencies in provided versions. I also noticed all the dependencies
in production state. So over the time I managed dependencies and
devDependencies in package.json
Tasks
WEB-101: Support enter key for add todo field
I converted the input field to inside form tag. It gave me functionality
submit form on enter key press. In later commits, I added return false on onsubmit and
make a check to not to submit blank value in redux store.
Commits:
  • 3f33f62 WEB-101: Support enter key for add todo field
  • f9990b1 Fix: Stop user to submit blank value in list
WEB-102: Adding a new todo causes text field focus to be lost
I added focus property to add todo click listener. It is keep focusing on
input element.
Commits:
  • 31029b7 WEB-102: Adding a new todo causes text field focus to be lost
WEB-103: Add status filtering test
On initial inspection, I identified Redux implementation. I did following:
  • tests using jest
  • combineReducer to combine todo and filter reducers.
  • action and listener for setFilter.
  • todo filtering for view according to filter.
  • filter template for #filter and conditional template.
Commits:
  • 5848dea WEB-103: Add status filtering test
WEB-120: Save users todo items
Added localstorage in subscribe and createStore. Later in redux
implementation task, I added this by using applyMiddleware
Commits:
  • cfb0c5e WEB-120: Save users todo items
WEB-201: Extract CSS into separate file
I used extract-text-webpack-plugin in webpack and handled production and
development scenario.
  • environments from package.json
Commits:
  • 0e6eb63 WEB-201: Extract CSS into separate file
WEB-303: Improve developer experience
Added webpack-dev-server with webpack-html-plugin to provide HMR.
Commits:
  • cba71f0 WEB-303: Improve developer experience
WEB-202: Optimized bundle generation
First of all I thought about webpack-bundle-analyser to inspect bundles. After
that I have added following things:
  • webpack.optimize.AggressiveMergingPlugin
  • webpack.optimize.CommonsChunkPlugin
  • webpack.DefinePlugin
  • webpack.optimize.UglifyJsPlugin
  • devtool support - map files only in development mode.
Also added a commit later.
Commits:
  • f4a26f1 WEB-202: Optimized bundle generation
  • 8a2bcc6 RE:WEB-202: Optimized bundle generation
Reference https://webpack.github.io/docs/list-of-plugins.html
WEB-203: Replace lib/state.js
Implemented redux using createStore and applyMiddleware for localstorage.
Commit:
  • 434a2c1 WEB-203: Replace lib/state.js
WEB-110: Improve visual appearance && WEB-104: Change filter position test
Improved the visual experience, added scss, and implemented
index.html#filter#renderBottom#filterTop. Later on, when things stared to work,
I improved the UI again.
Commits:
  • 39ee90b WEB-110, WEB-104: Improve visual appearance, Change filter position test
  • 82bbc63 Improvement:WEB-110: Improve visual appearance
  • ebe0342 UI improvement - card layout
  • a0300d7 No tasks handler and UI fixes
WEB-302: Static feature compilation
I developed a find and replace loader for this. It is in loader directory.
Commit:
  • 91944cb WEB-302: Static feature compilation
WEB-301: Optimize the view rendering
For this I implemented rendering and markeup in 'incremental-dom'. I also tried
some JSX libraries but could not implemented due to bugs.Some options I found on
internet:
I found these very useful:
So in the end I wrote the markup using incremental-dom.
Other things:
  • Jest Fixup and setup a782097
  • Remove to do feature to show remove button on hover 42ce173
About
Simple To do app
ayusharma.in/todo/dist/
Topics
incremental-domreduxtodo
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Simple Todo App Build Status

A simple todo app made using
Incremental DOM and
Redux.
Link : http://ayusharma.in/todo/dist/
Requirements
Please make sure that you have Node.js and npm installed on your system. This
application is built with webpack, and without those two tools, you can't proceed.
  • Node.js (recommended: 4.x)
  • npm (recommended: 2.x or 3.x)
Installation
 npm install
Running Tests
 npm run test
Repo includes test cases for Redux's reducers with Jest.
Webpack dev server
It will start webpack dev server with Hot module replacement.
 npm run dev
Visit http://localhost:8080/webpack-dev-server/index.html in your browser to
check application.
Build
It will create minified build in project's dist directory.
 npm run build
First Impression & Challenges
I found tasks quite interesting as I have to make end to end solution here.
I found dependencies little bit outdated (Webpack 1.x, Babel 6.x etc) but It
can be the constraint of the task to implement things in the current setup. So I
kept the dependencies in provided versions. I also noticed all the dependencies
in production state. So over the time I managed dependencies and
devDependencies in package.json
Tasks
WEB-101: Support enter key for add todo field
I converted the input field to inside form tag. It gave me functionality
submit form on enter key press. In later commits, I added return false on onsubmit and
make a check to not to submit blank value in redux store.
Commits:
  • 3f33f62 WEB-101: Support enter key for add todo field
  • f9990b1 Fix: Stop user to submit blank value in list
WEB-102: Adding a new todo causes text field focus to be lost
I added focus property to add todo click listener. It is keep focusing on
input element.
Commits:
  • 31029b7 WEB-102: Adding a new todo causes text field focus to be lost
WEB-103: Add status filtering test
On initial inspection, I identified Redux implementation. I did following:
  • tests using jest
  • combineReducer to combine todo and filter reducers.
  • action and listener for setFilter.
  • todo filtering for view according to filter.
  • filter template for #filter and conditional template.
Commits:
  • 5848dea WEB-103: Add status filtering test
WEB-120: Save users todo items
Added localstorage in subscribe and createStore. Later in redux
implementation task, I added this by using applyMiddleware
Commits:
  • cfb0c5e WEB-120: Save users todo items
WEB-201: Extract CSS into separate file
I used extract-text-webpack-plugin in webpack and handled production and
development scenario.
  • environments from package.json
Commits:
  • 0e6eb63 WEB-201: Extract CSS into separate file
WEB-303: Improve developer experience
Added webpack-dev-server with webpack-html-plugin to provide HMR.
Commits:
  • cba71f0 WEB-303: Improve developer experience
WEB-202: Optimized bundle generation
First of all I thought about webpack-bundle-analyser to inspect bundles. After
that I have added following things:
  • webpack.optimize.AggressiveMergingPlugin
  • webpack.optimize.CommonsChunkPlugin
  • webpack.DefinePlugin
  • webpack.optimize.UglifyJsPlugin
  • devtool support - map files only in development mode.
Also added a commit later.
Commits:
  • f4a26f1 WEB-202: Optimized bundle generation
  • 8a2bcc6 RE:WEB-202: Optimized bundle generation
Reference https://webpack.github.io/docs/list-of-plugins.html
WEB-203: Replace lib/state.js
Implemented redux using createStore and applyMiddleware for localstorage.
Commit:
  • 434a2c1 WEB-203: Replace lib/state.js
WEB-110: Improve visual appearance && WEB-104: Change filter position test
Improved the visual experience, added scss, and implemented
index.html#filter#renderBottom#filterTop. Later on, when things stared to work,
I improved the UI again.
Commits:
  • 39ee90b WEB-110, WEB-104: Improve visual appearance, Change filter position test
  • 82bbc63 Improvement:WEB-110: Improve visual appearance
  • ebe0342 UI improvement - card layout
  • a0300d7 No tasks handler and UI fixes
WEB-302: Static feature compilation
I developed a find and replace loader for this. It is in loader directory.
Commit:
  • 91944cb WEB-302: Static feature compilation
WEB-301: Optimize the view rendering
For this I implemented rendering and markeup in 'incremental-dom'. I also tried
some JSX libraries but could not implemented due to bugs.Some options I found on
internet:
I found these very useful:
So in the end I wrote the markup using incremental-dom.
Other things:
  • Jest Fixup and setup a782097
  • Remove to do feature to show remove button on hover 42ce173
About
Simple To do app
ayusharma.in/todo/dist/
Topics
incremental-domreduxtodo
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Simple Todo App Build Status

A simple todo app made using
Incremental DOM and
Redux.
Link : http://ayusharma.in/todo/dist/
Requirements
Please make sure that you have Node.js and npm installed on your system. This
application is built with webpack, and without those two tools, you can't proceed.
  • Node.js (recommended: 4.x)
  • npm (recommended: 2.x or 3.x)
Installation
 npm install
Running Tests
 npm run test
Repo includes test cases for Redux's reducers with Jest.
Webpack dev server
It will start webpack dev server with Hot module replacement.
 npm run dev
Visit http://localhost:8080/webpack-dev-server/index.html in your browser to
check application.
Build
It will create minified build in project's dist directory.
 npm run build
First Impression & Challenges
I found tasks quite interesting as I have to make end to end solution here.
I found dependencies little bit outdated (Webpack 1.x, Babel 6.x etc) but It
can be the constraint of the task to implement things in the current setup. So I
kept the dependencies in provided versions. I also noticed all the dependencies
in production state. So over the time I managed dependencies and
devDependencies in package.json
Tasks
WEB-101: Support enter key for add todo field
I converted the input field to inside form tag. It gave me functionality
submit form on enter key press. In later commits, I added return false on onsubmit and
make a check to not to submit blank value in redux store.
Commits:
  • 3f33f62 WEB-101: Support enter key for add todo field
  • f9990b1 Fix: Stop user to submit blank value in list
WEB-102: Adding a new todo causes text field focus to be lost
I added focus property to add todo click listener. It is keep focusing on
input element.
Commits:
  • 31029b7 WEB-102: Adding a new todo causes text field focus to be lost
WEB-103: Add status filtering test
On initial inspection, I identified Redux implementation. I did following:
  • tests using jest
  • combineReducer to combine todo and filter reducers.
  • action and listener for setFilter.
  • todo filtering for view according to filter.
  • filter template for #filter and conditional template.
Commits:
  • 5848dea WEB-103: Add status filtering test
WEB-120: Save users todo items
Added localstorage in subscribe and createStore. Later in redux
implementation task, I added this by using applyMiddleware
Commits:
  • cfb0c5e WEB-120: Save users todo items
WEB-201: Extract CSS into separate file
I used extract-text-webpack-plugin in webpack and handled production and
development scenario.
  • environments from package.json
Commits:
  • 0e6eb63 WEB-201: Extract CSS into separate file
WEB-303: Improve developer experience
Added webpack-dev-server with webpack-html-plugin to provide HMR.
Commits:
  • cba71f0 WEB-303: Improve developer experience
WEB-202: Optimized bundle generation
First of all I thought about webpack-bundle-analyser to inspect bundles. After
that I have added following things:
  • webpack.optimize.AggressiveMergingPlugin
  • webpack.optimize.CommonsChunkPlugin
  • webpack.DefinePlugin
  • webpack.optimize.UglifyJsPlugin
  • devtool support - map files only in development mode.
Also added a commit later.
Commits:
  • f4a26f1 WEB-202: Optimized bundle generation
  • 8a2bcc6 RE:WEB-202: Optimized bundle generation
Reference https://webpack.github.io/docs/list-of-plugins.html
WEB-203: Replace lib/state.js
Implemented redux using createStore and applyMiddleware for localstorage.
Commit:
  • 434a2c1 WEB-203: Replace lib/state.js
WEB-110: Improve visual appearance && WEB-104: Change filter position test
Improved the visual experience, added scss, and implemented
index.html#filter#renderBottom#filterTop. Later on, when things stared to work,
I improved the UI again.
Commits:
  • 39ee90b WEB-110, WEB-104: Improve visual appearance, Change filter position test
  • 82bbc63 Improvement:WEB-110: Improve visual appearance
  • ebe0342 UI improvement - card layout
  • a0300d7 No tasks handler and UI fixes
WEB-302: Static feature compilation
I developed a find and replace loader for this. It is in loader directory.
Commit:
  • 91944cb WEB-302: Static feature compilation
WEB-301: Optimize the view rendering
For this I implemented rendering and markeup in 'incremental-dom'. I also tried
some JSX libraries but could not implemented due to bugs.Some options I found on
internet:
I found these very useful:
So in the end I wrote the markup using incremental-dom.
Other things:
  • Jest Fixup and setup a782097
  • Remove to do feature to show remove button on hover 42ce173
About
Simple To do app
ayusharma.in/todo/dist/
Topics
incremental-domreduxtodo
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Simple Todo App Build Status

A simple todo app made using
Incremental DOM and
Redux.
Link : http://ayusharma.in/todo/dist/
Requirements
Please make sure that you have Node.js and npm installed on your system. This
application is built with webpack, and without those two tools, you can't proceed.
  • Node.js (recommended: 4.x)
  • npm (recommended: 2.x or 3.x)
Installation
 npm install
Running Tests
 npm run test
Repo includes test cases for Redux's reducers with Jest.
Webpack dev server
It will start webpack dev server with Hot module replacement.
 npm run dev
Visit http://localhost:8080/webpack-dev-server/index.html in your browser to
check application.
Build
It will create minified build in project's dist directory.
 npm run build
First Impression & Challenges
I found tasks quite interesting as I have to make end to end solution here.
I found dependencies little bit outdated (Webpack 1.x, Babel 6.x etc) but It
can be the constraint of the task to implement things in the current setup. So I
kept the dependencies in provided versions. I also noticed all the dependencies
in production state. So over the time I managed dependencies and
devDependencies in package.json
Tasks
WEB-101: Support enter key for add todo field
I converted the input field to inside form tag. It gave me functionality
submit form on enter key press. In later commits, I added return false on onsubmit and
make a check to not to submit blank value in redux store.
Commits:
  • 3f33f62 WEB-101: Support enter key for add todo field
  • f9990b1 Fix: Stop user to submit blank value in list
WEB-102: Adding a new todo causes text field focus to be lost
I added focus property to add todo click listener. It is keep focusing on
input element.
Commits:
  • 31029b7 WEB-102: Adding a new todo causes text field focus to be lost
WEB-103: Add status filtering test
On initial inspection, I identified Redux implementation. I did following:
  • tests using jest
  • combineReducer to combine todo and filter reducers.
  • action and listener for setFilter.
  • todo filtering for view according to filter.
  • filter template for #filter and conditional template.
Commits:
  • 5848dea WEB-103: Add status filtering test
WEB-120: Save users todo items
Added localstorage in subscribe and createStore. Later in redux
implementation task, I added this by using applyMiddleware
Commits:
  • cfb0c5e WEB-120: Save users todo items
WEB-201: Extract CSS into separate file
I used extract-text-webpack-plugin in webpack and handled production and
development scenario.
  • environments from package.json
Commits:
  • 0e6eb63 WEB-201: Extract CSS into separate file
WEB-303: Improve developer experience
Added webpack-dev-server with webpack-html-plugin to provide HMR.
Commits:
  • cba71f0 WEB-303: Improve developer experience
WEB-202: Optimized bundle generation
First of all I thought about webpack-bundle-analyser to inspect bundles. After
that I have added following things:
  • webpack.optimize.AggressiveMergingPlugin
  • webpack.optimize.CommonsChunkPlugin
  • webpack.DefinePlugin
  • webpack.optimize.UglifyJsPlugin
  • devtool support - map files only in development mode.
Also added a commit later.
Commits:
  • f4a26f1 WEB-202: Optimized bundle generation
  • 8a2bcc6 RE:WEB-202: Optimized bundle generation
Reference https://webpack.github.io/docs/list-of-plugins.html
WEB-203: Replace lib/state.js
Implemented redux using createStore and applyMiddleware for localstorage.
Commit:
  • 434a2c1 WEB-203: Replace lib/state.js
WEB-110: Improve visual appearance && WEB-104: Change filter position test
Improved the visual experience, added scss, and implemented
index.html#filter#renderBottom#filterTop. Later on, when things stared to work,
I improved the UI again.
Commits:
  • 39ee90b WEB-110, WEB-104: Improve visual appearance, Change filter position test
  • 82bbc63 Improvement:WEB-110: Improve visual appearance
  • ebe0342 UI improvement - card layout
  • a0300d7 No tasks handler and UI fixes
WEB-302: Static feature compilation
I developed a find and replace loader for this. It is in loader directory.
Commit:
  • 91944cb WEB-302: Static feature compilation
WEB-301: Optimize the view rendering
For this I implemented rendering and markeup in 'incremental-dom'. I also tried
some JSX libraries but could not implemented due to bugs.Some options I found on
internet:
I found these very useful:
So in the end I wrote the markup using incremental-dom.
Other things:
  • Jest Fixup and setup a782097
  • Remove to do feature to show remove button on hover 42ce173
About
Simple To do app
ayusharma.in/todo/dist/
Topics
incremental-domreduxtodo
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Simple Todo App Build Status

A simple todo app made using
Incremental DOM and
Redux.
Link : http://ayusharma.in/todo/dist/
Requirements
Please make sure that you have Node.js and npm installed on your system. This
application is built with webpack, and without those two tools, you can't proceed.
  • Node.js (recommended: 4.x)
  • npm (recommended: 2.x or 3.x)
Installation
 npm install
Running Tests
 npm run test
Repo includes test cases for Redux's reducers with Jest.
Webpack dev server
It will start webpack dev server with Hot module replacement.
 npm run dev
Visit http://localhost:8080/webpack-dev-server/index.html in your browser to
check application.
Build
It will create minified build in project's dist directory.
 npm run build
First Impression & Challenges
I found tasks quite interesting as I have to make end to end solution here.
I found dependencies little bit outdated (Webpack 1.x, Babel 6.x etc) but It
can be the constraint of the task to implement things in the current setup. So I
kept the dependencies in provided versions. I also noticed all the dependencies
in production state. So over the time I managed dependencies and
devDependencies in package.json
Tasks
WEB-101: Support enter key for add todo field
I converted the input field to inside form tag. It gave me functionality
submit form on enter key press. In later commits, I added return false on onsubmit and
make a check to not to submit blank value in redux store.
Commits:
  • 3f33f62 WEB-101: Support enter key for add todo field
  • f9990b1 Fix: Stop user to submit blank value in list
WEB-102: Adding a new todo causes text field focus to be lost
I added focus property to add todo click listener. It is keep focusing on
input element.
Commits:
  • 31029b7 WEB-102: Adding a new todo causes text field focus to be lost
WEB-103: Add status filtering test
On initial inspection, I identified Redux implementation. I did following:
  • tests using jest
  • combineReducer to combine todo and filter reducers.
  • action and listener for setFilter.
  • todo filtering for view according to filter.
  • filter template for #filter and conditional template.
Commits:
  • 5848dea WEB-103: Add status filtering test
WEB-120: Save users todo items
Added localstorage in subscribe and createStore. Later in redux
implementation task, I added this by using applyMiddleware
Commits:
  • cfb0c5e WEB-120: Save users todo items
WEB-201: Extract CSS into separate file
I used extract-text-webpack-plugin in webpack and handled production and
development scenario.
  • environments from package.json
Commits:
  • 0e6eb63 WEB-201: Extract CSS into separate file
WEB-303: Improve developer experience
Added webpack-dev-server with webpack-html-plugin to provide HMR.
Commits:
  • cba71f0 WEB-303: Improve developer experience
WEB-202: Optimized bundle generation
First of all I thought about webpack-bundle-analyser to inspect bundles. After
that I have added following things:
  • webpack.optimize.AggressiveMergingPlugin
  • webpack.optimize.CommonsChunkPlugin
  • webpack.DefinePlugin
  • webpack.optimize.UglifyJsPlugin
  • devtool support - map files only in development mode.
Also added a commit later.
Commits:
  • f4a26f1 WEB-202: Optimized bundle generation
  • 8a2bcc6 RE:WEB-202: Optimized bundle generation
Reference https://webpack.github.io/docs/list-of-plugins.html
WEB-203: Replace lib/state.js
Implemented redux using createStore and applyMiddleware for localstorage.
Commit:
  • 434a2c1 WEB-203: Replace lib/state.js
WEB-110: Improve visual appearance && WEB-104: Change filter position test
Improved the visual experience, added scss, and implemented
index.html#filter#renderBottom#filterTop. Later on, when things stared to work,
I improved the UI again.
Commits:
  • 39ee90b WEB-110, WEB-104: Improve visual appearance, Change filter position test
  • 82bbc63 Improvement:WEB-110: Improve visual appearance
  • ebe0342 UI improvement - card layout
  • a0300d7 No tasks handler and UI fixes
WEB-302: Static feature compilation
I developed a find and replace loader for this. It is in loader directory.
Commit:
  • 91944cb WEB-302: Static feature compilation
WEB-301: Optimize the view rendering
For this I implemented rendering and markeup in 'incremental-dom'. I also tried
some JSX libraries but could not implemented due to bugs.Some options I found on
internet:
I found these very useful:
So in the end I wrote the markup using incremental-dom.
Other things:
  • Jest Fixup and setup a782097
  • Remove to do feature to show remove button on hover 42ce173
About
Simple To do app
ayusharma.in/todo/dist/
Topics
incremental-domreduxtodo
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Simple Todo App Build Status

A simple todo app made using
Incremental DOM and
Redux.
Link : http://ayusharma.in/todo/dist/
Requirements
Please make sure that you have Node.js and npm installed on your system. This
application is built with webpack, and without those two tools, you can't proceed.
  • Node.js (recommended: 4.x)
  • npm (recommended: 2.x or 3.x)
Installation
 npm install
Running Tests
 npm run test
Repo includes test cases for Redux's reducers with Jest.
Webpack dev server
It will start webpack dev server with Hot module replacement.
 npm run dev
Visit http://localhost:8080/webpack-dev-server/index.html in your browser to
check application.
Build
It will create minified build in project's dist directory.
 npm run build
First Impression & Challenges
I found tasks quite interesting as I have to make end to end solution here.
I found dependencies little bit outdated (Webpack 1.x, Babel 6.x etc) but It
can be the constraint of the task to implement things in the current setup. So I
kept the dependencies in provided versions. I also noticed all the dependencies
in production state. So over the time I managed dependencies and
devDependencies in package.json
Tasks
WEB-101: Support enter key for add todo field
I converted the input field to inside form tag. It gave me functionality
submit form on enter key press. In later commits, I added return false on onsubmit and
make a check to not to submit blank value in redux store.
Commits:
  • 3f33f62 WEB-101: Support enter key for add todo field
  • f9990b1 Fix: Stop user to submit blank value in list
WEB-102: Adding a new todo causes text field focus to be lost
I added focus property to add todo click listener. It is keep focusing on
input element.
Commits:
  • 31029b7 WEB-102: Adding a new todo causes text field focus to be lost
WEB-103: Add status filtering test
On initial inspection, I identified Redux implementation. I did following:
  • tests using jest
  • combineReducer to combine todo and filter reducers.
  • action and listener for setFilter.
  • todo filtering for view according to filter.
  • filter template for #filter and conditional template.
Commits:
  • 5848dea WEB-103: Add status filtering test
WEB-120: Save users todo items
Added localstorage in subscribe and createStore. Later in redux
implementation task, I added this by using applyMiddleware
Commits:
  • cfb0c5e WEB-120: Save users todo items
WEB-201: Extract CSS into separate file
I used extract-text-webpack-plugin in webpack and handled production and
development scenario.
  • environments from package.json
Commits:
  • 0e6eb63 WEB-201: Extract CSS into separate file
WEB-303: Improve developer experience
Added webpack-dev-server with webpack-html-plugin to provide HMR.
Commits:
  • cba71f0 WEB-303: Improve developer experience
WEB-202: Optimized bundle generation
First of all I thought about webpack-bundle-analyser to inspect bundles. After
that I have added following things:
  • webpack.optimize.AggressiveMergingPlugin
  • webpack.optimize.CommonsChunkPlugin
  • webpack.DefinePlugin
  • webpack.optimize.UglifyJsPlugin
  • devtool support - map files only in development mode.
Also added a commit later.
Commits:
  • f4a26f1 WEB-202: Optimized bundle generation
  • 8a2bcc6 RE:WEB-202: Optimized bundle generation
Reference https://webpack.github.io/docs/list-of-plugins.html
WEB-203: Replace lib/state.js
Implemented redux using createStore and applyMiddleware for localstorage.
Commit:
  • 434a2c1 WEB-203: Replace lib/state.js
WEB-110: Improve visual appearance && WEB-104: Change filter position test
Improved the visual experience, added scss, and implemented
index.html#filter#renderBottom#filterTop. Later on, when things stared to work,
I improved the UI again.
Commits:
  • 39ee90b WEB-110, WEB-104: Improve visual appearance, Change filter position test
  • 82bbc63 Improvement:WEB-110: Improve visual appearance
  • ebe0342 UI improvement - card layout
  • a0300d7 No tasks handler and UI fixes
WEB-302: Static feature compilation
I developed a find and replace loader for this. It is in loader directory.
Commit:
  • 91944cb WEB-302: Static feature compilation
WEB-301: Optimize the view rendering
For this I implemented rendering and markeup in 'incremental-dom'. I also tried
some JSX libraries but could not implemented due to bugs.Some options I found on
internet:
I found these very useful:
So in the end I wrote the markup using incremental-dom.
Other things:
  • Jest Fixup and setup a782097
  • Remove to do feature to show remove button on hover 42ce173
About
Simple To do app
ayusharma.in/todo/dist/
Topics
incremental-domreduxtodo
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Simple Todo App Build Status

A simple todo app made using
Incremental DOM and
Redux.
Link : http://ayusharma.in/todo/dist/
Requirements
Please make sure that you have Node.js and npm installed on your system. This
application is built with webpack, and without those two tools, you can't proceed.
  • Node.js (recommended: 4.x)
  • npm (recommended: 2.x or 3.x)
Installation
 npm install
Running Tests
 npm run test
Repo includes test cases for Redux's reducers with Jest.
Webpack dev server
It will start webpack dev server with Hot module replacement.
 npm run dev
Visit http://localhost:8080/webpack-dev-server/index.html in your browser to
check application.
Build
It will create minified build in project's dist directory.
 npm run build
First Impression & Challenges
I found tasks quite interesting as I have to make end to end solution here.
I found dependencies little bit outdated (Webpack 1.x, Babel 6.x etc) but It
can be the constraint of the task to implement things in the current setup. So I
kept the dependencies in provided versions. I also noticed all the dependencies
in production state. So over the time I managed dependencies and
devDependencies in package.json
Tasks
WEB-101: Support enter key for add todo field
I converted the input field to inside form tag. It gave me functionality
submit form on enter key press. In later commits, I added return false on onsubmit and
make a check to not to submit blank value in redux store.
Commits:
  • 3f33f62 WEB-101: Support enter key for add todo field
  • f9990b1 Fix: Stop user to submit blank value in list
WEB-102: Adding a new todo causes text field focus to be lost
I added focus property to add todo click listener. It is keep focusing on
input element.
Commits:
  • 31029b7 WEB-102: Adding a new todo causes text field focus to be lost
WEB-103: Add status filtering test
On initial inspection, I identified Redux implementation. I did following:
  • tests using jest
  • combineReducer to combine todo and filter reducers.
  • action and listener for setFilter.
  • todo filtering for view according to filter.
  • filter template for #filter and conditional template.
Commits:
  • 5848dea WEB-103: Add status filtering test
WEB-120: Save users todo items
Added localstorage in subscribe and createStore. Later in redux
implementation task, I added this by using applyMiddleware
Commits:
  • cfb0c5e WEB-120: Save users todo items
WEB-201: Extract CSS into separate file
I used extract-text-webpack-plugin in webpack and handled production and
development scenario.
  • environments from package.json
Commits:
  • 0e6eb63 WEB-201: Extract CSS into separate file
WEB-303: Improve developer experience
Added webpack-dev-server with webpack-html-plugin to provide HMR.
Commits:
  • cba71f0 WEB-303: Improve developer experience
WEB-202: Optimized bundle generation
First of all I thought about webpack-bundle-analyser to inspect bundles. After
that I have added following things:
  • webpack.optimize.AggressiveMergingPlugin
  • webpack.optimize.CommonsChunkPlugin
  • webpack.DefinePlugin
  • webpack.optimize.UglifyJsPlugin
  • devtool support - map files only in development mode.
Also added a commit later.
Commits:
  • f4a26f1 WEB-202: Optimized bundle generation
  • 8a2bcc6 RE:WEB-202: Optimized bundle generation
Reference https://webpack.github.io/docs/list-of-plugins.html
WEB-203: Replace lib/state.js
Implemented redux using createStore and applyMiddleware for localstorage.
Commit:
  • 434a2c1 WEB-203: Replace lib/state.js
WEB-110: Improve visual appearance && WEB-104: Change filter position test
Improved the visual experience, added scss, and implemented
index.html#filter#renderBottom#filterTop. Later on, when things stared to work,
I improved the UI again.
Commits:
  • 39ee90b WEB-110, WEB-104: Improve visual appearance, Change filter position test
  • 82bbc63 Improvement:WEB-110: Improve visual appearance
  • ebe0342 UI improvement - card layout
  • a0300d7 No tasks handler and UI fixes
WEB-302: Static feature compilation
I developed a find and replace loader for this. It is in loader directory.
Commit:
  • 91944cb WEB-302: Static feature compilation
WEB-301: Optimize the view rendering
For this I implemented rendering and markeup in 'incremental-dom'. I also tried
some JSX libraries but could not implemented due to bugs.Some options I found on
internet:
I found these very useful:
So in the end I wrote the markup using incremental-dom.
Other things:
  • Jest Fixup and setup a782097
  • Remove to do feature to show remove button on hover 42ce173
About
Simple To do app
ayusharma.in/todo/dist/
Topics
incremental-domreduxtodo
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages