Front-End-FAQ
A place to anonymously ask questions and receive answers from the dev community.
How It Works
The premise is simple: Ask the questions you've always had about Front-End Development but were too afraid to ask for fear of criticism, then wait for a response!
How Do I Ask A Question?
Send me a DM over on Twitter!
How Do I Answer A Question?
Feel free to open a PR on this repo!
How Is This Different Than Stack Overflow?
It's true that Stack Overflow is meant for knowledge sharing. That being said, as a beginner I know I had a ton of questions about HTML, CSS, and JavaScript that I wanted answered, but anonymously. Stack Overflow requires you to be logged in. Yes, you can change your name, but that's a hassle and has a 30-day waiting period to re-change. I want to remove the hassle of asking and answering questions.
Front-End FAQ will be the one place you can go to for all your Front-end questions, while remaining anonymous. Plus, it's a great way to contribute to open-source.
Table Of Contents
HTML
What are <div> and <span>? Why would you use them?
All HTML documents have two types of element - block and inline. A <p>, or paragraph is an example of a block element; <strong> is an example of an inline element. These elements are treated differently when a browser dislays your page:
- a block level element has 100% width by default and any subsequent elements will appear below it.
- Inline elements do just that - they appear inside block level elements, only taking up the width that they need and they can only have padding and/or margin added to the left or right sides.
Most elements in HTML are designed for a specific purpose - a paragraph, a heading, bold text, etc, but a <div> is a generic block element that you can use for whatever you want. In the same vein, <span> is a generic inline element. But what would you use them for?
<span>s can be used to differentiate parts of the text in a paragraph - maybe you have a brand name that you want to style differently everywhere it appears - wrap it in a span and give it a class (<span class="brand-mark">AwesomeBrandName</span>) - you can then change the look of that text in your CSS.
<div>s can be used to break up your content into distinct areas or types - maybe an interactive image area, or the graph with flyout. With the addition of HTML5 elements such as <footer>, <main> and <nav>, the number of uses of a <div> has gone down, but you will definitely still run into situations where nothing else fits and you pull the trusty <div> out of your toolbox!
CSS
What is the difference between absolute and fixed positioning?
Absolute positioning allows you to place any page element exactly where you want it. You use the positioning attributes top, left, bottom. and right to set the location. Ex. position: absolute; top: 40px; left: 40px; (These values are relative to the parent element). When you absolute position an element you treat it as an independent element on the page, which means it will not be affected by other elements and it won't affect other elements.
A fixed position element is positioned relative to the viewport, or the browser window itself. This is often used for navigation or sidebars because the viewport does not change at scrolling. So your fixed element will remain at the exact position you set it at. Ex. position: fixed; top: 80px; left: 10px;
What is the best/most performant way to include media queries? Is it better to put them all in one CSS file or split them up into different CSS files per component or page?
Waiting for response
JavaScript
What is a Promise and how do you use it?
Waiting for response
Performance
What is the best way to reduce my image file size?
At minimum: use ImageOptim. It can significantly reduce the size of images while preserving visual quality. Windows and Linux alternatives are also available.
More specifically: run your JPEGs through MozJPEG (q=80 or lower is fine for web content) and consider Progressive JPEG support, PNGs through pngquant and SVGs through SVGO. Explicitly strip out metadata (--strip for pngquant) to avoid bloat. Instead of crazy huge animated GIFs, deliver H.264 videos (or WebM for Chrome, Firefox and Opera)! If you can’t at least use Giflossy. If you can spare the extra CPU cycles, need higher-than-web-average quality and are okay with slow encode times: try Guetzli.
From the excellent images.guide.
What is the best format for performant images? PNG? JPG? SVG?
Waiting for response
Accessibility
Do I need to make my app accessible?
Waiting for response
How do I make my app accessible?
Waiting for response
Node
Where do I find other people's Node.js code for small projects? GitHub doesn't seem to display it?
Waiting for response