Data over DOM: With a UI library like React or framework like Vue/Angular I don’t have to think of DOM and explicitly manipulate DOM or maintain a state to track changes of DOM, instead I will be seeing an application as state and develop a full application following it. A state of an application is a blueprint and we will be working on data over DOM which will be abstracted away from us by library/framework mentioned above.
** Productivity ** We don’t have to stuck on things which are already been solved with the best practice, fix bugs which already has been solved years ago, reinvent every chunk which has been already created, instead we can actually focus on application logic and deliver application faster.
I have worked with all three libraries mentioned above (React/Vue/Angular), I have listed below my experience with these libraries:
** Angular 1.x **: Started working with Angular 1.x from my first job, where I developed an application (CRM) where backend was on Nodejs and frontend AngularJS.It was a single page application.
** Vue **: Worked with Vue on my second job where I completely rewrote frontend of big CRM, where previously it was fully developed by jquery though less part was done on frontend most used to be handled by the backend (Laravel). I rewrote the whole application and converted it into a multi-single page application making it up to date with current trends and stacks maintaining company’s requirement. (agentcis.com)
** React **: I have worked with React for almost 2 years from pet project to professional project. Currently, I am working with React on 2 projects a plugin and realtime web app.
Q2. When is CORS needed and how does it work in the browser? permalink
We use CORS whenever we have to communicate from one origin to another origin.
Whenever we try to connect with any other host than we are served then browser first send a preflight request and check if the current requesting host is included in header tag `Access-Control-Allow-Origin` and if requesting host is mentioned or a wildcard(*) is in value then
A request is valid and it is dispatched to the target host.
Q3. What is an XSS attack? Explain what can lead to one and how can it be prevented? permalink
XSS attack is where a malicious user can run their malicious code and steal or access confidential data of the victim. On the Internet, we should never trust any input from a user which can lead us to XSS. If we don’t sanitize user input and
insert any raw input from the user into the output and if the input contains any scripts which can be executed on the user’s machine. So to prevent this we should always sanitize and escape
I have no latest “hard to debug” problem, maybe I haven't got a chance to work on that challenging project, but once I was in a situation when I was working on the module with multistep and I didn’t use state management well.
There I just distributed state on components and didn’t follow the single source of truth which took me in a very bad situation and caused a huge memory leak,
after a lot of debugging and breakpoints I came to know how badly I have structured my application state. After that, I understand the real world experience of following the single source of truth, (props down, events up). The stacks were Vue and later I added
Vuex for state management and re-architect my application to resolve it.
Recently I worked on an application (Frontend/Backend) where a user can transfer their web files to cloud storage(Google Drive), it can be multiple and while transferring file, the application need to show the progress of transfer, it can multiple so a page can have multiple progress of different file,
We get the progress of files from the server every second so if a user removes an item but the progress of that file is already dispatched and but when it goes for updating the item is already deleted which caused the massive error and sometimes it is used to display the progress of invalid file because of indexing.
Q5. Tell us about your most advanced/exciting/mind-blowing JS/CSS implementation permalink
I will say “domex”(https://github.com/samundrak/domex) its
a library where we can use the power of the routing feature of “ExpressJS”
On browser and have a route which we can call internally to make one-way data flow.
I extended it more and made “domex-redux” which help me work with redux
without writing actions/reducers instead I will just define a route where I will
hit whenever any event occurs in a page(click, hover’) with a
request body. (https://github.com/samundrak/domex-redux).
A full example of domex and domex-redux: https://github.com/samundrak/bhitte-patro