manish srivastava
Posted on November 5, 2020
Imagine, an IT firm has opening for Junior Front-End developers, Back-End and Devops. 30 candidates reported. How to know which guy or girl is good to select.
To all Junior developers:
1) Your PC is your best friend. Spend Time with it.
2) Learning never stops.
3) Code ... don't run behind frameworks. I dont mean that you dont use them... use them but you should know basics of programming.You can use ORM without any framework.
4)
Refer to my article :
Here are explanations and answers for junior devs:
0-->3 years developers are counted as junior developers.
This count is symbolic believing you get enough experience and get promoted in your organization within 3 years where you have your own down team of junior developers to guide.
A junior developer chooses either Back-end , Front-end or Devops as career. But I will always encourage you as a developer you should know something of everything. Why? because a back-end developer in now days has to take care of resource utilization . He must know Devops people takecare of resource utilization. Today concepts like FaaS, SaaS etc are rising and companies are adopting it.
No company today wants that you engage server resources more than what required. Certain calculation can be done at client side too. For example: you created a billing form. As the quantity increase the total payable amount also increases. You can do addition of these prices at server and at client side also with javascript. Using second approach is more good as it saves engagement of servers.
Back-end Jr Developers:
Ask junior developer to create a CRUD form with name, email and phone number.
[why CRUD? 90% of apps are CRUD]
Language: Any
[ You are always free to choose any language. But you should always visit google to find which language is in demand and which can pay you more. But as I said, you should know something of everything]
Here is link of survey:
https://www.freecodecamp.org/news/stack-overflow-developer-survey-2020-programming-language-framework-salary-data/
Framework :Not allowed.
[Never make your career based on framework. Because, a new framework is always ready to take place of old one. For example, you learned codeigniter and now its laravel in php. Also, as junior developer you must know how to code. Learning framework is good but learning concepts is always better.]
Once they create now check:
1- Did they used client side validation?
2- Did they also added server-side validation of form fields?
3- Did they used CSRF token ?
4- Did they expired CSRF token with session or before session or he is not expiring?
5- Did they used function and classes in crud?
6-Bot check with captcha before submission of form?
7- Did they made an approach with oop ?
8) Is the all values tabulated by developer is looped at once from database or every pagination is requesting fresh values.
1- Did they used client side validation?
[Client-side validation are good. It saves times of client. Suppose a field only requires numbers ( eg. Telephone). Your error will throw error if he tries to put his name in field of telephone. This help to input no garbage values in database. You can achieve this by https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation]
2- Did they also added server-side validation of form fields?
[No client-side validation is not completely fool proof. Bad guys can still input garbage values. To counter this you can use server side validation. An example is pregmatch in PHP.]
3- Did they used CSRF token ?
[ A CSRF token is a unique, secret, unpredictable value that is generated by the server-side application and transmitted to the client in such a way that it is included in a subsequent HTTP request made by the client. When the later request is made, the server-side application validates that the request includes the expected token and rejects the request if the token is missing or invalid.
CSRF tokens can prevent CSRF attacks by making it impossible for an attacker to construct a fully valid HTTP request suitable for feeding to a victim user. Since the attacker cannot determine or predict the value of a user's CSRF token, they cannot construct a request with all the parameters that are necessary for the application to honor the request.
Please search CSRF token application in your language.]
4- Did they expired CSRF token with session or before session or they is not expiring?
[Token has some value that you can check by Developer Console. If two person having same value then they can submit form. The best way is to expire token after sometime and ensure it is bind with session. Therefor, even if bad guys get token from browser they wont be able too.]
5- Did they used function and classes in crud?
[There is no way to say which code is good or bad until it does it work. Howerver, you will find senior developers uses functions and classes . This helps them to minimize writing lots of code and also their code is crystal clear.]
6-Bot check with captcha before submission of form?
[ Bad guys use python scripts to submit unwanted values. CSRF tokens only helps in Cross-Site Request Forgery. To find whether the form is submitted by human or bot you must use captcha. Generally , captcha are used in forms which are open to world like contact us form. But you dont need them if you are making user to login and fill a form inside your app]
7- Did they made an approach with oop ?
[ Learning to code in Object Oriented Programming makes you stand out.
Object-oriented programming aims to implement real-world entities like inheritance, hiding, polymorphism etc in programming. The main aim of OOP is to bind together the data and the functions that operate on them so that no other part of the code can access this data except that function.
Read more :https://www.geeksforgeeks.org/object-oriented-programming-oops-concept-in-java/]
8) Is the all values tabulated by developer is looped at once from database or every pagination is requesting fresh values.
[Now your index page, you have add button, edit and delete button. You show a table where all values are fetched from database. Your whileloop or for each or whatever you used to show value is good for some of the data . Just imagine you have 5000 data to show... It will take long time to show. The best way is to ask data in chunks from server.This is means your app is ready for unlimited data.]
Front-end:-
1) Ask to write media query for some standard devices.
2) Ask to use calc to calculate padding value of div by device width.
3) Create a modal + multiple modal in a page.
4) create collapsable navbar.
5) Write manifest for pwa.
6) Write Service worker for pwa.
7) Do they know tools like lighthouse or gtmatrix?
8) Does they used meta tags?
9) Code quality as per seo.
1) Ask to write media query for some standard devices.
[today we have different types of devices- mobiles, tabs, laptop, desktop and TVs. Your code should look good in every device. Suppose you chooses your 'p' tag is 12px but it will look big in small devices. Similarly images, forms , tables etc.There is also one issue that certain legacy browsers are not compatible with media queries. Anyway, here are few :
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
ohoho!!! too much, anyway you can use (2) point "calc"
]
2) Ask him to use calc to calculate padding value of div by device width.
[ you can use calc to calculate values. Here is an example:
@media only screen and (max-device-width:100vw)
body {
font-family: Verdana, sans-serif;
font-size:calc(0.50em + 1.65vmin);
}
Look use of calc. The above makes your topography responsive. We call it fluid topography :). Can you use vh or vw for padding? yes you can. Lets do some google ....]
3) Create a modal + multiple modal in a page.
[Modals.... yes they are great life savers. Here is example of pure js based modal
]
4) create collapsable navbar.
[ This is to judge whether jr developer able to understand device specific requirements or not]
5) Write manifest for pwa.
[ Always write manifest for any app. A typical manifest file includes the app name, the icons the app should use, and the URL that should be opened when the app is launched.
Manifest files are supported in Chrome, Edge, Firefox, UC Browser, Opera, and the Samsung browser. Safari has partial support.]
6) Write Service worker for pwa.
[If you donot know about service worker... learn it. Why? Because now almost every app requires it. For example , Push Notifications. But there is another wonderful use Service Worker to make your app load faster. You can download certain .css, .html or .js files with in browser of client. The next time these resources will be uploaded from browser than asking it from server. Here is savior article:
Global list of useful CSS: developer tools
manish srivastava ・ Apr 18 '20
]
7) Do they know tools like lighthouse or gtmetrix?
[Check lighthouse in chrome developer console .
So, what is GTMetrix? Well, it is a website performance analytics tool, created by GT.net, who are well known in the digital space for the speed monitoring tool, Pingdom. The key objective of GTMetrix is to analyse the performance of your website and provide you with a list of actionable recommendations to improve it.
Here is report of dev.to https://gtmetrix.com/reports/dev.to/XhJJhUW1]
8) Does they used meta tags?
[Meta Tags are very important . You can use title, descriptions , allow search crawlers no to index etc. Even with view point tag you can make your app responsive.]
9) Code quality as per seo.
[As a front end engineer , you should always take care of Search Engine Optimization. Do you know about schema? Schema.org hosts a collection of tags developed jointly by Google, Bing, Yahoo!, and Yandex, and the tags are used by webmasters to provide search engines with additional information about different types of pages. In turn, search engines use this information to enhance their SERP snippets with various rich features.
There is no certainty as to whether using Schema markup improves one’s chances of ranking - there's no question, however, that the resulting snippets look much more attractive than regular snippets, and thus improve one’s standing in search.
Look at this article: https://www.socialmediatoday.com/news/8-of-the-most-important-html-tags-for-seo/574987/].
Now its time to churn Devops Jr Developers. You need patience. Your Speed is your system speed...haha...
Devops
1) Does they knows anything about load balancing? ( Hint him with HAPROXY)
[Load Balancing!!! why? simple HAProxy (High Availability Proxy) is a TCP/HTTP load balancer and proxy server that allows a webserver to spread incoming requests across multiple endpoints. This is useful in cases where too many concurrent connections over-saturate the capability of a single server. HAProxy is one of app you can use others too]
2)Ask them to create a container with different resources.
[If you do not know what containers are then read this first:
Imagine containers like some app with in your desktop. Your host system has limited resources like RAM, Cores, Hard Drives etc. You will allot different resources to each app(containers).
Here are links that can help you in resource management:
Docker: https://docs.docker.com/config/containers/resource_constraints/
LXD: https://stgraber.org/2016/03/26/lxd-2-0-resource-control-412/ ]
3) Ask them to use iptables to listen a container / vm on any port.
A devop without networking knowledge is half cooked. Believe me , nothing is easiest than networking. While every container technology provides easy way to do networking. For example , in docker you expose port of container with -e and listen it to on host port.
If you know about IP tables, you can do wonders( scratching your head for more than expected but you will love)
4) Ask them about reserved ports like 80, 22,110 etc. Ask him is it possible to listen these ports of vm / container on any other port of host?
[Here is list from MIT for common ports https://web.mit.edu/rhel-doc/4/RH-DOCS/rhel-sg-en-4/ch-ports.html.
But most common ports are https://opensource.com/article/18/10/common-network-ports
But why an interviewer will want to know about reserved ports. To your bad luck and worlds good luck their is an agency that allotts port. yup, yes. An example: The port 2375 is the de-facto standard for the Docker API. As it stands, the endpoint is unauthenticated and unencrypted. see: IANA allocates port 2375 to docker.
Look at this : https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml]
5) Ask them to write a shell script to download some softwares with shell scripts.
[Do you still want me to explain this?]
6) What are different popular Desktop Environments in linux.
[There is more than 90% chances that machine / server you are going to is Linux. By this question, an interviewer tries to figure out how much experiment you did with Linux. Meet any linux guy, he will tell you in his learning days how frequently he was changing his desktop environment.]
7) Convert a server into desktop.
[This is world simplest thing to do. Just search how to install bla-bla desktop environment on bla-bla server.]
8) How to take server backup on any other remote drive / server.
[Remember a desktop without GUI is Server. You can write script to copy files from server to another server or on drive at set interval. There are opensource programs to link google drive to your server. And.... much more. Please google.]
9) What OCI means in container technology.
[They believe a DevOps guy should know Container Technology like docker, podman, lxd etc. But these technologies are having different commands etc.
The Open Container Initiative is an open governance structure for the express purpose of creating open industry standards around container formats and runtimes.
Established in June 2015 by Docker and other leaders in the container industry, the OCI currently contains two specifications: the Runtime Specification (runtime-spec) and the Image Specification (image-spec). The Runtime Specification outlines how to run a “filesystem bundle” that is unpacked on disk. At a high-level an OCI implementation would download an OCI Image then unpack that image into an OCI Runtime filesystem bundle. At this point the OCI Runtime Bundle would be run by an OCI Runtime.
Further Reading:
and https://opencontainers.org/]
10) Update GitHub and server files get updated by itself. Does he know how to achieve it?
[Thumb Rule: Never allow direct touch to server. The best way , let your team works on github or any such application. Then, you push the code to server.
If you have cronjobs you can use them. First set up the repository on your server. Then you can set up the cronjob, choose a time in which it should be executed, and then in the cronjob execute the following command:
cd your/repository/folder; git pull master origin
Also look Webhooks by github.https://docs.github.com/en/free-pro-team@latest/github/extending-github/about-webhooks]
SPEND TIME ON THIS POST
Please visit my profile for more interesting articles
IMP REQUEST:
You are most welcome to join my team
Click here for joining my team .
Also you are most welcome to join OPEN SOURCE INTELLIGENT SYSTEM (OSINT) if you can help in open source project regarding safeguarding humans from various diseases like CORONA outbreak
https://github.com/Manishfoodtechs/OSINTHRH/wiki
Contact email: Manishfoodtechs@gmail.com.
If you have any problem, our team is also engaged in professional consultancy and delivery.
Imagecredit: pixabay
Posted on November 5, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related