Here is demo URL https://i5u7r.csb.app/ to play with and it looks like this
Building D3 chart requires width
and height
values upfront, this helps D3 to map data points to an x
, y
coordinate on the SVG canvas. In this post we’re creating a simple line chart with x-axis and y-axis and it resizes when the browser window is resized and axes ticks are updated based on the available width and height.
First, we need a way to get width
and height
values and it should update when the browser window is resized. For this, I’m creating a custom resize hook called useResize
, which returns the size of HTML element passed to it.
1 | function useResize(ref) { |
useResize
hook subscribes to resize
event and uses offsetWidth
, offsetHeight
properties on the HTML node to get width
and height
respectively.
Make sure
getSize
method is not called frequently to reduce the number of updates. Here, I’m usingdebounce
helper function fromlodash
.
In my chart component, ref
of my root element is passed to useResize
hook to get its size.
1 | const LineChart = props => { |
Once we have this in place, implementing a line chart is straight forward. However to make the axes responsive, i.e. change its tick based on the available size. Pass a ratio based on width
or height
to the ticks
method of both axes.
1 | const { width, height } = size; |
Here is the full working demo running in CodeSandbox
I hope you enjoyed this article, happy coding.
]]>is_map
, as the name suggests it check if the argument is map or not. Coming from a C# background I thought it is going to work, but it didn’t.In Elixir struct is a special kind of map, so is_map
function matches both. Then I went through some of the open source code bases and came across a way to do this(don’t remember from which project I saw this)
1 | # This match struct |
Very powerful pattern matching technique and elegant solution. Here if data
is a struct it matches first function and if it is map matches the second one.
is_map
, as the name suggests it check if the argument is map or not. Coming from a C# background I thought it is going to work, but it didn’t.In Elixir struct is a special kind of map, so is_map
function matches both. Then I went through some of the open source code bases and came across a way to do this(don’t remember from which project I saw this)
1 | # This match struct |
Very powerful pattern matching technique and elegant solution. Here if data
is a struct it matches first function and if it is map matches the second one.
PEG.js is a simple parser generator for JavaScript that produces fast parsers with excellent error reporting. You can use it to process complex data or computer languages and build transformers, interpreters, compilers and other tools easily.
In order to create a parser, provide a grammar as the input and PEG.js will build a parser for that grammar. Then that generated parser can be used to parse the content.
PEG.js grammar has a particular syntax, you can learn more about it from http://pegjs.org/documentation#grammar-syntax-and-semantics. If you are familiar with regular expression it will easy understand.
Take a simple example for writing grammar which will parse texts like “$100”, “$150” etc…
Example text follow a pattern where currency symbol i.e. “$” is followed by a number. Translating this into pEG.js grammar looks like this
1 | Text |
Every grammar has set of rules, in this case we have three rules. Every rule has a name that identify the rule and a parsing expression. Rule name is followed by “=” then parsing expression.
Hope you got basic idea how a grammar is created. PEG.js provides playground where you can try your grammar and see how it is working. To try this go to http://pegjs.org/online and copy paste the grammar we have created on text box 1 and enter “$100” on text box 2. Parsed result will be shown on the output section and it looks like this
1 | [ |
PEG.js was able to parse successfully, if you provide an invalid input like “$100$” it will show a parser error.
Note if you want to just get the value from that text (“100” from “$100”), the output that we got is not that useful. In order extract only the required values, parsing expression allows to write custom JavaScript expressions inside the curly braces (“{“ and “}”). Updating rule Text like below will return just the value “100”
1 | Text |
Two changes we have made to the previous rule
{ return n.join(""); }
join
method on the variable n. In this case variable n contains an array of characters, so calling join
on that will concatenate and produce a string which returned as the result of rule Text##Parsing Grocery List
Take some more complex example where you want to parse grocery list and return the result in a JSON format like below where quantity should be in grams
1 | [ |
Grocery list text will be in the following format - where the quantity can be in kg or gm
1 | Onion 1kg |
Please try for yourself and share your grammar.
Here is the grammar I have created to do this; Below JsFiddle is interactive you can change grammar and grocery list, clicking on Parse button will show the result.
Hope this article was helpful. Please share your thoughts and comments.
]]>PEG.js is a simple parser generator for JavaScript that produces fast parsers with excellent error reporting. You can use it to process complex data or computer languages and build transformers, interpreters, compilers and other tools easily.
In order to create a parser, provide a grammar as the input and PEG.js will build a parser for that grammar. Then that generated parser can be used to parse the content.
PEG.js grammar has a particular syntax, you can learn more about it from http://pegjs.org/documentation#grammar-syntax-and-semantics. If you are familiar with regular expression it will easy understand.
Take a simple example for writing grammar which will parse texts like “$100”, “$150” etc…
Example text follow a pattern where currency symbol i.e. “$” is followed by a number. Translating this into pEG.js grammar looks like this
1 | Text |
Every grammar has set of rules, in this case we have three rules. Every rule has a name that identify the rule and a parsing expression. Rule name is followed by “=” then parsing expression.
Hope you got basic idea how a grammar is created. PEG.js provides playground where you can try your grammar and see how it is working. To try this go to http://pegjs.org/online and copy paste the grammar we have created on text box 1 and enter “$100” on text box 2. Parsed result will be shown on the output section and it looks like this
1 | [ |
PEG.js was able to parse successfully, if you provide an invalid input like “$100$” it will show a parser error.
Note if you want to just get the value from that text (“100” from “$100”), the output that we got is not that useful. In order extract only the required values, parsing expression allows to write custom JavaScript expressions inside the curly braces (“{“ and “}”). Updating rule Text like below will return just the value “100”
1 | Text |
Two changes we have made to the previous rule
{ return n.join(""); }
join
method on the variable n. In this case variable n contains an array of characters, so calling join
on that will concatenate and produce a string which returned as the result of rule Text##Parsing Grocery List
Take some more complex example where you want to parse grocery list and return the result in a JSON format like below where quantity should be in grams
1 | [ |
Grocery list text will be in the following format - where the quantity can be in kg or gm
1 | Onion 1kg |
Please try for yourself and share your grammar.
Here is the grammar I have created to do this; Below JsFiddle is interactive you can change grammar and grocery list, clicking on Parse button will show the result.
Hope this article was helpful. Please share your thoughts and comments.
]]>Organizing JavaScripts in a server side application is entirely different from SPA, most of the articles that I came across is suggesting to include page level script inside the server side page itself - e.g. in ASP.Net MVC you include common JavaScript files inside the layout file and views will include the scripts it required
Layout(_Layout.cshtml)
1 |
|
View(Index.cshml)
1 | ..... |
For large applications a page will have different components which requires it’s own set of JavaScript files in order work. Including and organizing these component level scripts and it’s dependencies can cause lot of issues.
So here I want explain a different approach which I am not going to claim is best optimal solution for all applications but I think it does work for majority of the applications.
In this article I am using TypeScript instead of JavaScript. If you don’t know about TypeScript it’s a typed superset of JavaScript, learn more about it from http://www.typescriptlang.org
##Application Class
Application is a TypeScript class which is the main entry point to client side script, this class is responsible for initializing page component. This is done by reading data-js-component
attribute on body, then import the component dynamically and initialize.
1 | import { Component } from "Component" |
In order to load the component dynamically I am using a module loader called SystemJS, line 15 shows dynamically importing a page component. Once the component is imported it’s initialize()
method is called after creating an instance of that component. One of the main advantage of using a module loader here is it will manage the dependencies which means any dependent modules will be imported automatically.
Every page will have a corresponding page component, name of this page level component is set as a data-js-component
attribute on the body tag. Page component name is generated based on a convention - it will be same as the controller name. e.g. component name for CustomerController
will be Customer
. All page level components resides in a separate directory called Pages.
I have created a Html helper extension method which will return controller name, it also provide flexibility where an action method could change the page component name using a view data jsComponent
.
1 | <body data-js-component="@Html.JsPage()"> |
Helper extension
1 | public static MvcHtmlString JsPage(this HtmlHelper helper) |
##Component
All page level components derive from a base class Component
, this base class implements the core initialization logic. Component can have child components as well, so initializing parent component will initialize child components as well. When Application
class initializes page component, then any child components will also get initialized. OnReady
method on the component is called after initialization is completed.
Component
is associated with an HTML element on which the component is going to act up on. This container element is passed as a constructor argument. Page level component is initialized with body as associated element.
Component Class
1 | export class Component { |
Home page component
1 | import { Component } from "Component"; |
##Child Components
A page will have many child components as well. To create these child component element associated with that component should have a data-js-component
attribute.
Below code shows Popover
component which initializes the bootstrap popover
1 | import { Component } from "Component" |
In order apply this in the razor view, I will be setting data-js-component
attribute like below
1 | <a href="#" |
##Connecting the dots
Finally to wire up everything - Application
class needs to initialized. For that import Application
module in _Layout.cshtml and initialize it.
1 | <script src="~/Scripts/system.js"></script> |
Source code used in this article can be found here https://github.com/cvrajeesh/myblogsamples/tree/master/MVC/PageScripts
]]>This is the HTML I have, my requirement is child1
height will be auto(based on the content) and child2
will occupy the remaining height of the main-container.
1 | <div class="main-container"> |
First I thought this is easy and created the following styles
1 | .main-container { |
This produces a wrong result - if child1
takes 100px and I expected child2
to be 400px, but the child2
height is 500px.
Let’s see how to solve this problem.
Very easy to solve this using flexbox (display:flex
), most of the latest browsers supports it. Make container
a Flexbox with the direction set to column
, then allow child2
to grow using flex-grow:1
. This ensure second child height is automatically adjusted.
1 | .container { |
Here is the result using flexbox
Another option is to use display:table-row
. The below code shows how to use it.
1 | .main-container { |
see this in action below
]]>By default Gulp runs all the tasks at the same time, so after googling I saw this official article. In this approach every task will takes a callback function so that Gulp knows when that task is completed. Then other task add this as a dependency
E.g. from the official article
1 | var gulp = require('gulp'); |
Here task two
is depends on task one
, so Gulp ensures that task one
is completed before running task two
.One drawback with this approach is tasks are tightly coupled to each other which reduces the flexibility if you want to change the order.
So I came across a plugin called run-sequence, this plugin allows you to order the tasks much easy. We can re-write the first example like this
1 | var gulp = require('gulp'), |
Caution
Make sure each of the tasks returns a stream
run-sequence can do much more, like running in parallel
1 | gulp.task('default', function(){ |
The above one ensures that task-1
and task-2
will be running in series, after that task-3
, task-4
, task-5
will run in parallel, then task-7
and task-8
are run in parallel as well.
Main advantage I see when compared to official documentation is - tasks are independent and orchestration is done by someone else.
]]>By default Gulp runs all the tasks at the same time, so after googling I saw this official article. In this approach every task will takes a callback function so that Gulp knows when that task is completed. Then other task add this as a dependency
E.g. from the official article
1 | var gulp = require('gulp'); |
Here task two
is depends on task one
, so Gulp ensures that task one
is completed before running task two
.One drawback with this approach is tasks are tightly coupled to each other which reduces the flexibility if you want to change the order.
So I came across a plugin called run-sequence, this plugin allows you to order the tasks much easy. We can re-write the first example like this
1 | var gulp = require('gulp'), |
Caution
Make sure each of the tasks returns a stream
run-sequence can do much more, like running in parallel
1 | gulp.task('default', function(){ |
The above one ensures that task-1
and task-2
will be running in series, after that task-3
, task-4
, task-5
will run in parallel, then task-7
and task-8
are run in parallel as well.
Main advantage I see when compared to official documentation is - tasks are independent and orchestration is done by someone else.
]]>onerror
Here is a link to the official documentation - http://emberjs.com/guides/understanding-ember/debugging/#toc_implement-an-ember-onerror-hook-to-log-all-errors-in-production
Code sample from the documentation (v 1.5.1) look like this
1 | Ember.onerror = function(error) { |
What this piece of code does is, whenever an error occurs that stack trace is send to the server using an AJAX request. This will works great for most of the scenarios but….
Consider a situation where an error occurs inside a mouse move event handler. Then you will be trying to sending hundreds of requests to server in short interval. This can bring down your server if not handled properly, it’s like DDOS-ing your own server.
Good approach will be to control the rate at which errors are send to the server for logging. This can be done using a concept called Throttling - which ensures that the target method is never called more frequently than the specified period of time.
Google for JavaScript Throttling you can find lot different implementations. EmberJS also provide it’s own throttling function Ember.run.throttle
Here is the example from the official EmberJS website
1 | var myFunc = function() { console.log(this.name + ' ran.'); }; |
This throttling
function can be used for sending errors to the server. Here is a working demo which shows the throttled error logging -
http://cvrajeesh.github.io/emberjs/errorhandling.html
onerror
Here is a link to the official documentation - http://emberjs.com/guides/understanding-ember/debugging/#toc_implement-an-ember-onerror-hook-to-log-all-errors-in-production
Code sample from the documentation (v 1.5.1) look like this
1 | Ember.onerror = function(error) { |
What this piece of code does is, whenever an error occurs that stack trace is send to the server using an AJAX request. This will works great for most of the scenarios but….
Consider a situation where an error occurs inside a mouse move event handler. Then you will be trying to sending hundreds of requests to server in short interval. This can bring down your server if not handled properly, it’s like DDOS-ing your own server.
Good approach will be to control the rate at which errors are send to the server for logging. This can be done using a concept called Throttling - which ensures that the target method is never called more frequently than the specified period of time.
Google for JavaScript Throttling you can find lot different implementations. EmberJS also provide it’s own throttling function Ember.run.throttle
Here is the example from the official EmberJS website
1 | var myFunc = function() { console.log(this.name + ' ran.'); }; |
This throttling
function can be used for sending errors to the server. Here is a working demo which shows the throttled error logging -
http://cvrajeesh.github.io/emberjs/errorhandling.html
I am working on a web application that has a Single Page Application module which is built using EmberJS framework.
This EmberJS application is a page designer where user can drag and drop items to the design surface and change properties of these items. Finally when the page is ready, he can save the changes back to server.
Problem:
Whenever a user works on the page designer for long period of time without saving the changes in between - finally when he try to save all of his changes in one shot, server side session was already timed out.
Solution:
Implemented an API on the server side which can refresh the session if this API is invoked.
So on the EmberJS application side we had to calculate how long a user not active. Then we can check for this inactivity time periodically and decide whether to refresh session or not.
An easy way to do it in EmberJS is by hooking to the mousemove
, keydown
events of the ApplicationView
. Details can be found in the EmberJS documentation http://emberjs.com/api/classes/Ember.View.html#toc_responding-to-browser-events
Here is code sample which does this
First I am creating the application object with an additional property for tracking the last active time.
1 | var App = Ember.Application.create({ |
After that, hook the events in which you are interested in ApplicationView
, which will update the last active time defined in the application object.
1 | App.ApplicationView = Ember.View.extend({ |
In our case, I am interested on mouseMove
, touchStart
(for touch devices) and keyDown
events. When they are getting fired I will update the last active time with current time.
Now you can use the last active time property to find out how long the user is active.
This demo uses moment.js for calculating time difference as well as for formatting the time.
]]>I am working on a web application that has a Single Page Application module which is built using EmberJS framework.
This EmberJS application is a page designer where user can drag and drop items to the design surface and change properties of these items. Finally when the page is ready, he can save the changes back to server.
Problem:
Whenever a user works on the page designer for long period of time without saving the changes in between - finally when he try to save all of his changes in one shot, server side session was already timed out.
Solution:
Implemented an API on the server side which can refresh the session if this API is invoked.
So on the EmberJS application side we had to calculate how long a user not active. Then we can check for this inactivity time periodically and decide whether to refresh session or not.
An easy way to do it in EmberJS is by hooking to the mousemove
, keydown
events of the ApplicationView
. Details can be found in the EmberJS documentation http://emberjs.com/api/classes/Ember.View.html#toc_responding-to-browser-events
Here is code sample which does this
First I am creating the application object with an additional property for tracking the last active time.
1 | var App = Ember.Application.create({ |
After that, hook the events in which you are interested in ApplicationView
, which will update the last active time defined in the application object.
1 | App.ApplicationView = Ember.View.extend({ |
In our case, I am interested on mouseMove
, touchStart
(for touch devices) and keyDown
events. When they are getting fired I will update the last active time with current time.
Now you can use the last active time property to find out how long the user is active.
This demo uses moment.js for calculating time difference as well as for formatting the time.
]]>Google Chrome :
Here is screenshot from my machine
Mozilla Firefox :
Firefox has a slightly different approach
Here is the screenshot
Voila!!! now you are able to get the breakpoints in Visual Studio
]]>Google Chrome :
Here is screenshot from my machine
Mozilla Firefox :
Firefox has a slightly different approach
Here is the screenshot
Voila!!! now you are able to get the breakpoints in Visual Studio
]]>Oops!!! My password is in clear text.
I thought they might be generating the email during the registration process before it is stored in their database. Without bothering much, I ordered the item. Thought about investigating about the “clear text password” little bit, but somehow forgot it.
After few days when I got the product which I have ordered, it reminded me about this password incident. So in order see whether they are hashing my password or not, I used their Forgot my password option. It asked for my email address. After the submission got a message saying
We’ have sent you an e-mail at the submitted ID including instructions. You’ll be back to your shopping place in no matter of time.
As expected, got an email from them
It reads Here is your new Login and Password and surprisingly password they gave is same as my old password even though in the email it is mentioned that they are sending a new password. It confirmed that they are not hashing the passwords.
Will they be storing it in plain text? Who knows…
Did someone tell you internet is not a good place to store your secrets?
I tried to play a nice role, so sent them an email telling about about the password hashing problem. You know what happened… no reply from them till now.
If you are in the naaptol technical team, convince your boss about the importance of securing the password and push that functionality in the next release.
If you are a non-technical manager in naaptol, tell your developers to read this article from Jeff - You’re Probably Storing Passwords Incorrectly
]]>Oops!!! My password is in clear text.
I thought they might be generating the email during the registration process before it is stored in their database. Without bothering much, I ordered the item. Thought about investigating about the “clear text password” little bit, but somehow forgot it.
After few days when I got the product which I have ordered, it reminded me about this password incident. So in order see whether they are hashing my password or not, I used their Forgot my password option. It asked for my email address. After the submission got a message saying
We’ have sent you an e-mail at the submitted ID including instructions. You’ll be back to your shopping place in no matter of time.
As expected, got an email from them
It reads Here is your new Login and Password and surprisingly password they gave is same as my old password even though in the email it is mentioned that they are sending a new password. It confirmed that they are not hashing the passwords.
Will they be storing it in plain text? Who knows…
Did someone tell you internet is not a good place to store your secrets?
I tried to play a nice role, so sent them an email telling about about the password hashing problem. You know what happened… no reply from them till now.
If you are in the naaptol technical team, convince your boss about the importance of securing the password and push that functionality in the next release.
If you are a non-technical manager in naaptol, tell your developers to read this article from Jeff - You’re Probably Storing Passwords Incorrectly
]]>The reason why it is hard because most of these editors create a new editable HTML document inside an iframe. There are two ways I aware that you can set text on these editors
Here is how I automated two WYSIWYG editors using selenium web driver.
###bootstrap-wysihtml5
Website: http://jhollingworth.github.io/bootstrap-wysihtml5/
1 | private void SetBootstrapWysihtml5Content(IWebElement textArea, string content) |
What this method does is, it accepts the TextArea
web element which you are converting to an editor and the actual content to be set. Then it executes a piece of JavaScript on the current WebDriver
context.
For e.g. if you have a TextArea element with id summary
then executing below JavaScript statement will insert a h1
tag with “Test” to the editor
$('#summary').data('wysihtml5').editor.setValue('<h1>Test</h1>');
###TinyMCE
Website: http://www.tinymce.com/
1 | private void SetTinyMCEContent(IWebElement textArea, string content) |
This method also accepts the TextArea
web element which you are converting to an editor and the actual content to be set. Then it finds the corresponding iframe
and set the innerHTML
by executing a JavaScript statement.
The reason why it is hard because most of these editors create a new editable HTML document inside an iframe. There are two ways I aware that you can set text on these editors
Here is how I automated two WYSIWYG editors using selenium web driver.
###bootstrap-wysihtml5
Website: http://jhollingworth.github.io/bootstrap-wysihtml5/
1 | private void SetBootstrapWysihtml5Content(IWebElement textArea, string content) |
What this method does is, it accepts the TextArea
web element which you are converting to an editor and the actual content to be set. Then it executes a piece of JavaScript on the current WebDriver
context.
For e.g. if you have a TextArea element with id summary
then executing below JavaScript statement will insert a h1
tag with “Test” to the editor
$('#summary').data('wysihtml5').editor.setValue('<h1>Test</h1>');
###TinyMCE
Website: http://www.tinymce.com/
1 | private void SetTinyMCEContent(IWebElement textArea, string content) |
This method also accepts the TextArea
web element which you are converting to an editor and the actual content to be set. Then it finds the corresponding iframe
and set the innerHTML
by executing a JavaScript statement.
That’s how I do most of the time, till now I haven’t seen any up to date documentation which gives the clear understanding of how the code is implemented. In reality after a certain period during the development, documentation goes out of sync with the source code. So some one joins the project lately has only one way to understand the project Go through the source code
Sometimes I go through the open source projects hosted on either Github, Codeplex or Google code. All the hosting site provide you with a user interface for browsing through the source code with syntax highlighting support, which is nice. The problem I had with this is – if I see a object creation statement, method call there is no way for me to find out how it is implemented other than manually going through the files and finding it out.
Most of the full blown editors provide a feature where you can navigate to the implementation directly from where it is used for e.g. Microsoft Visual Studio provides Go To Definition feature. I find this feature very much useful for understanding the project. Only draw back with this approach is you have to completely get the latest version of source code to your local machine.
SourceCodeReader is trying solve this navigation problem on the web. With this application you can open a project and browse through the files with code navigation support.
Source code for this project can be found at https://github.com/cvrajeesh/SourceCodeReader
###How to use this application
Go to SourceCodeReader and enter the URL of a C# project on Github
Once you have entered a Github project link and open the project, it get the source code from the Github and present you with file browser.
When you navigate to a C# file you will be able to see clickable links for identifiers which takes you the file location where that is declared.
Sample projects :
Hope you liked this idea, please provide me with your valuable feedback.
]]>