1. For an interview as a front-end web app developer, what HTML5, CSS3, and JS concepts should I master?
Here is a short list of what any good HTML5 front-end application developers should know:
- Understand that HTML5 is HTML and that the same application model is applicable. So, no new magical development paradigm was brought with HTML5 (outside of Canvas/WebGL, which is totally new), just browsers are more robust, much faster, and more capable.
- Understand the power of HTML and CSS for good component layout. Twitter/Bootstrap is a great (and probably the best) example of this. Simple HTML structure with simple CSS classes and you can get some great reusable UI elements.
- Understand the benefits and the “Why” of the Web Workers. In short, it’s a way to do multi-threaded work in a single threaded environment. Before HTML5, the only way was with Ajax, and therefore including a server in the picture, now it can just be all local.
- Understand the Canvas vs SVG. This one is a tricky one, as there are a lot of “social-engineering” baggage behind the technical aspects. On the technical side, SVG is a DOM approach to vector graphic (and consequently retained mode) whereas Canvas is a programmatic and immediate mode approach. The catch is that sometimes it seems that Canvas gets a little bit more “love” from the browser vendor developers as SVG always had a love and hate relationship with HTML from its beginning.
- DOM Centric MVC. Ok, this is more an opinion than a fact, but given my expertise, HTML5 application developer (not web page developers) needs to have a good understanding of what is MVC, and realize that they do not need “do-it-all” meta-frameworks do MVC in HTML. In fact, with little DOM extension, it is relatively easy to do MVC the DOM way.
$(document).readywhich one trigger first? This is a great low-level question to ask for anybody that claims they know jQuery. In short, onload trigger after, and
$(document).readytrigger before and is a normalization brought by jQuery.
Web performance is a very valuable concept to master. If you’re interviewing for a company that gives a damn about how their page load time affects conversion rates, you’re very likely to get asked a question or two about web perf.
How To Interview a Front End Developer
Here are seven of my favorite questions, which could form the basis of a good bank of non-technical interview questions for a front-end developer.
1. Can you describe your workflow when you create a web page?
2. Assume you arrive at a new company that has 3 competing stylesheets, how would you best integrate them into the site?
3. Have you ever used an MVC? If so, which one and what do you like or dislike about it?
4. What are your favorite features of HTML5 and CSS3 and what would you change?
5. In your view, what’s the difference between Front End Developers and UI/UX designers and where do these positions overlap?
6. Lets look at the design of our website. Talk me through the features that draw your attention. What do you like, what do you dislike? What would you change?
7. What projects are you currently working on in your spare time? How did they come about?
2. Web Performance Topics
- where in the document should scripts and stylesheets get loaded?
- how would you delay load images “below the fold”?
- what tools would you use to measure performance?
- what’s new in HTTP/2.0?
- how does a CDN work?
- why should you use a PNG vs GIF vs JPEG vs WebP?
- what is jank and how do you fix it?
- when should you consider putting images in a sprite?
- what is RUM and how does it work? how does it differ from synthetic testing?
This is just a short list. There is so much more to talk about. Web performance is a very broad and important topic. Your value to a company will significantly increase if you’re able to master it.
Bootstrap interview section
3. What is Bootstrap?
Bootstrap is a free open source framework for easier and faster responsive web development.
Bootstrap 4 offset not working how can I solve it?.
Offset, push, pull no longer exist in Bootstrap 4 beta so you must use auto-margins.
<div class="row"> <div class="col-4 mx-auto"> I'm centered and offset 4 columns </div> </div>
In what way bootstrap 4 different from bootstrap 3:
In bootstrap 4 they had included some new features for example,
- Bootstrap 3 has 4 grid system (col-xs-3, col-sm-3, col-md-3, col-lg-3).
Bootstrap 4 has 5 grid system (.col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3). In B4 they have removed col-xs. The (col-) covers all devices
- In Bootstrap 3, we use col-md-offset-4 as Offset class, whereas in Bootstrap 4, we use offset-4
- In Bootstrap 3, we use .img-responsive class for responsive images, whereas, in Bootstrap 4, we use .img-fluid
- Bootstrap 4 supports the inverse tables, .responsive-table to the <table> element etc.
Three biggest changes (there are others obviously):
- CSS preprocessor: SCSS (instead of LESS).
- Units of measure: rem (instead of px).
- New layout technology: voilà Flexbox! CSS3 Flexible Box
Bootstrap has a considerably good amount of changes from its v3 to v4.
Some of the major changes include:
- Pre-Compiler Switch from Less to Sass
- Architecture and Grid System in which new tiers are added.
- There are a few utilities and additions to things like FlexBox and cards and much more including floating functionality and so on.
- The .navbar class, forms
So the interview is over, now what?
A few things need to be done after an interview has completed. ALWAYS ask questions. One of those questions being most importantly, “What’s the next step or when do you think I will hear something back?”
Other questions to think about asking are:
- What softwares does this company utilize to complete its projects?
- What is the work-life balance of the dev team?
- What is the culture like of the dev team?
- What is the ideal candidate you are searching for in this process?
- What does a day in the life of this position look like here at ______ company?