Backend Knowledge Sharing #31
Generate Excel files in React.js, Vue Modal, Introduction to VIM and some bonus links.
Table Of Contents
- Generate Excel files in React.js
- Vue Modal — a single wrapper to make it work efficiently
- Introduction to VIM
Generate Excel files in React.js
We often required to export an excel file in our web application to generate reports. Most of the time, this task is done by server-side scripts. But with the advancement of the client-side languages, there may be the case where our application needs to generate on the client-side. Yes, of course, we could call the API in the background to the server requesting it to generate such files and return the link. If we don’t want that to happen, instead generate it in client-side itself, then there is a package in React.js, react-export-excel, which Akita Nakarmi shared this week to us.
Here is a basic implementation of react-export-excel package to generate an excel file.
import React from "react";
import ReactExport from "react-export-excel";
const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;
const dataSet1 = [
{
name: "Johson",
amount: 30000,
sex: 'M',
is_married: true
},
{
name: "Monika",
amount: 355000,
sex: 'F',
is_married: false
},
{
name: "John",
amount: 250000,
sex: 'M',
is_married: false
},
{
name: "Josef",
amount: 450500,
sex: 'M',
is_married: true
}
];
const dataSet2 = [
{
name: "Johnson",
total: 25,
remainig: 16
},
{
name: "Josef",
total: 25,
remainig: 7
}
];
class Download extends React.Component {
render() {
return (
<ExcelFile>
<ExcelSheet data={dataSet1} name="Employees">
<ExcelColumn label="Name" value="name"/>
<ExcelColumn label="Wallet Money" value="amount"/>
<ExcelColumn label="Gender" value="sex"/>
<ExcelColumn label="Marital Status"
value={(col) => col.is_married ? "Married" : "Single"}/>
</ExcelSheet>
<ExcelSheet data={dataSet2} name="Leaves">
<ExcelColumn label="Name" value="name"/>
<ExcelColumn label="Total Leaves" value="total"/>
<ExcelColumn label="Remaining Leaves" value="remaining"/>
</ExcelSheet>
</ExcelFile>
);
}
}This is an example of the package. As we can see here, the component is importing a component ExcelFile from the package which requires a prop, chidren that will be parsed to the excel file. There are other examples in the package to try and implement as per our requirement.
Besides, excel files, if we required to print a document, there is another awesome package, react-to-print. This package will print any component or dom. react-to-print is another package which is very lightweight and give us a component, Print. All the content inside this component will be visible in print view only. Also if we want to hide certain dom/components in the print view, we can use a component, NoPrint from the package. For more detail visit it’s Github repo.
Vue Modal — a single wrapper to make it work efficiently
This week Ashish Shakya shared his experience working with multiple modal components in Vue.js and what he did to manage it more efficiently.
Recently, he had to work with, literally tons of modal. Just like any other backend developer, he too copy-pasted the code from bootstrap for the modal. It was fine when he has got only one or two modal to use. Later when the requirement of multiple modal components came, he ended up constantly repeating the same code again and again. Later when he had to make a small change with modals, he had to visit every single code related to the modals. This is of course not as per what Do not repeat yourself (DRY).
As a refactoring, he then created a wrapper for the base modal which remains the same for all the modals and content was placed dynamically using Vue.js slots. This allows him to make changes that were general to all the modal simply by altering it in base modal components.
So how he did this, view it from the source code he shared in GitHub Gist.
Introduction to VIM
Vim is the editor of choice for many developers and power users. It’s a “modal” text editor based on the vi editor written by Bill Joy in the 1970s for a version of UNIX. It inherits the key bindings of vi, but also adds a great deal of functionality and extensibility that are missing from the original vi. This week Bikalpa Thapa shared his experience of using Vim and enlighten us with its keymap and features. Here is the gist from his sharing.
The basics of moving in Vim:
h moves the cursor one character to the left.j moves the cursor down one line.k moves the cursor up one line.l moves the cursor one character to the right.0 moves the cursor to the beginning of the line.$ moves the cursor to the end of the line.w move forward one word.b move backward one word.G move to the end of the file.gg move to the beginning of the file.
Basic editing:
d starts the delete operation.dw will delete a word.d0 will delete to the beginning of a line.d$ will delete to the end of a line.dgg will delete to the beginning of the file.dG will delete to the end of the file.u will undo the last operation.Ctrl-r will redo the last undo.
Search and Replace
/text search for text in the document, going forward.n move the cursor to the next instance of the text from the last search. This will wrap to the beginning of the document.N move the cursor to the previous instance of the text from the last search.?text Search for text in the document, going backward.:%s/text/replacement text/g Search through the entire document for text and replace it with the replacement text.:%s/text/replacement text/gc Search through the entire document and confirm before replacing the text.
Copy and pasting
v highlight one character at a time.V highlight one line at a time.Ctrl-v highlight by columns.p paste text after the current line.P paste text on the current line.y yank text into the copy buffer.
Saving and Quitting
:w write the current buffer to the file:q exit the current buffer:wq write and exit :q! quit without saving
Running commands
:!command to run a Unix command
And last one but not the least, If stuck there is always :help [word] 😉
For a more detailed guide, refer to this awesome site.
Bonus Links
- https://github.com/alexeymezenin/laravel-best-practices : The best practices in Laravel.
- https://github.com/forbesmyester/esqlate : eSQLate is an attempt to give small teams a quick and easy form of administration panel which is significantly more powerful than CRUD based systems but also as easy to set up.
- https://github.com/ryanmcdermott/clean-code-javascript : Clean Code concepts adapted for JavaScript.
- https://github.com/justjavac/awesome-node-utils : Some useful npm packages for Node.js itself.
- https://github.com/jlevy/the-art-of-command-line : Master the command line, on one page.
- https://github.com/justinamiller/SoftwareArchitect : Become a Better Software Architect. This repo gives an idea to become a Software Architect.
- https://github.com/ukncsc/zero-trust-architecture : Ten principles to help you design and deploy a zero trust architecture.
- https://github.com/google/trax : Trax — your path to advanced deep learning.
- https://github.com/erdavids/Birds-of-a-Feather : Inspired by these designs and worked to make a generative version that would create unique, random birds.
- https://github.com/danistefanovic/build-your-own-x : Build your own technology :D
- https://github.com/anvaka/city-roads : Render every single road in any city at once
- https://github.com/theonedev/onedev : Super Easy All-In-One DevOps Platform with Issue Tracking, Git Management, Pull Request, and Build Farm. Simple yet Powerful.
That’s all we have for this week. Read another blog by our Frontend Developers and our previous blog, if you have missed it last week :)
See ya’ in next week’s blog.
