Frontend Essentials Flashcards
How to create a div that disappears when its clicked
$(‘.test’).on(‘click’, function(e){
$(this).hide()
})
What the difference between React and Angular
Componentization
- Angular structly follows MVC structure, React is open-ended way to creating applications using JSX and pure functions
- Angular provides functionality built in, React you have to write the functionality yourself
Data Binding
-Angular has two way data binding which updates the view and the model, React has one way data binding flowing in one direction
Performance
Angular is slower when rendering changes to the DOM because it manipulates the real DOM and AngularJS’s event loop checks all watchers for a a change for and applies necessary changes to the view and model for each, React creates a new virtual DOM and then compares it with the previously saved DOM. The library finds dissimilarities between two object models in such a way and rebuilds the virtual DOM once again, but with new changed HTML. All this work is done on the server, which reduces load on the browser. Now, instead of sending completely new HTML to the browser, React sends the HTML only for the changed element.
Resolving Dependencies
AngularJS uses a basic Object Oriented Programming (OOP) pattern called dependency injection, meaning we write dependencies in a separate file. In AngularJS, dependency injection is inherent to any standard functions that we declare for an AngularJS factory or service. We only pass dependencies as parameters in any order in our functions. AngularJS automatically finds appropriate objects that are injected as the $routeParams, $filter, store, and $scope parameters.
-React
The difference between React and AngularJS with regards to dependency injection is that React doesn’t offer any concept of a built-in container for dependency injection. You can use several instruments to inject dependencies automatically in a React application. Such instruments include Browserify, RequireJS, EcmaScript 6 modules which we can use via Babel, ReactJS-di, and so on. The only challenge is to pick a tool to use.
Directives and Templates
- Angular, in order to bind DOM elements with AngularJS applications, we use directives, both standard and specific. AngularJS has many standard directives, such as ng-bind or ng-app, but we can create own directives as well.
- React, The template logic should be written in the template itself. Everything is located in one place.
I know how to center a div (horizontally and vertically)
horizontal
margin: 0 auto;
vertical
change the line height of the parent. This only works with inline elements
line-height:8em
I about precompiled CSS languages (SASS, LESS)
A preprocessor is a program that takes one type of data and converts it to another type of data. In the case of HTML and CSS, some of the more popular preprocessor languages include Haml and Sass. Haml is processed into HTML and Sass is processed into CSS.
- Pre-processors, with their advanced features, helped to achieve writing reusable, maintainable and extensible codes in CSS. By using a pre-processor, you can easily increase your productivity, and decrease the amount of code you are writing in a project.
- One of the biggest advantages of CSS preprocessors is that it removes code redundancy. For example writing variables to be used by several classes or using mixins which are similar to functions and help us to define styles that can be re-used throughout the style sheet without needing to re-write
-Nested Rules
It allows CSS rules to be nested within one another. The inner rule only applies within the parent rule’s selector.
I know about atomic CSS
Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.
example:
.bgr-blue {
background-color: #357edd;
}
more info: https://css-tricks.com/lets-define-exactly-atomic-css/
I know the component lifecycle of React
willMount, didMount, willRecieveProps, shouldUpdate, willUpdate, render, didUpdate, willUnmount
componentWillMount
- Your component is going to appear on the screen very shortly.
- You may see people using componentWillMount to start AJAX calls to load data for your components. Don’t do this
- Most Common Use Case: App configuration in your root component. For example, if you use Firebase for your app, you’ll need to get that set up as your app is first mounting.
- Can call setState: Don’t. Use default state instead.
componentDidMount
- Your component is out there, mounted and ready to be used.
- Reason why you should not make AJAX calls in componentWillMount –You can’t guarantee the AJAX request won’t resolve before the component mounts. If it did, that would mean that you’d be trying to setState on an unmounted component, which not only won’t work, but React will yell at you for. Doing AJAX in componentDidMount will guarantee that there’s a component to update.
- Basically, here you want to do all the setup you couldn’t do without a DOM, and start getting all the data you need.
- Most Common Use Case: Starting -
- AJAX calls to load in data for your component.
Can call setState: Yes.
componentWillReceiveProps
-Our component was doing just fine, when all of a sudden a stream of new props arrive.
- Before our component does anything with the new props, componentWillReceiveProps is called, with the next props as the argument.
Here’s what we should do:
1. check which props will change (big caveat with componentWillReceiveProps — sometimes it’s called when nothing has changed; React just wants to check in)
2. If the props will change in a way that is significant, act on it
- componentWillReceiveProps is not called on initial render. I mean technically the component is receiving props, but there aren’t any old props to compare to, so… doesn’t count.
-Most Common Use Case: Acting on particular prop changes to trigger state transitions.
-Can call setState: Yes.
shouldComponentUpdate
-We have new props. Typical React dogma says that when a component receives new props, or new state, it should update.
But our component is a little bit anxious and is going to ask permission first.
-shouldComponentUpdate method, called with nextProps as the first argument, and nextState is the second:
-shouldComponentUpdate should always return a boolean — an answer to the question, “should I re-render?” Yes, little component, you should. The default is that it always returns true.
-if you’re worried about wasted renders and other nonsense — shouldComponentUpdate is an awesome place to improve performance.
Most Common Use Case: Controlling exactly when your component will re-render.
Can call setState: No.
componentDidUpdate
- Most Common Use Case: Updating the DOM in response to prop or state changes.
- Can call setState: Yes
componentWillUnmount
- Basically, clean up anything to do that solely involves the component in question — when it’s gone, it should be completely gone.
- Most Common Use Case: Cleaning up any leftover debris from your component.
- Can call setState: No.
resource: https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
I do not need to depend on jQuery
//grab element on page you want to use
var firstHeading = document.getElementById('firstHeading');
//will remove foo if it is a class of firstHeading
firstHeading.classList.remove("foo");
//will add the class "anotherClass" if one does not already exist
firstHeading.classList.add("anotherclass");
//add or remove multiple classes
firstHeading.classList.add("foo","bar");
firstHeading.classList.remove("foo","bar");
// if visible class is set remove it, otherwise add it
firstHeading.classList.toggle("visible");
//will return true if it has class of "foo" or false if it does not
firstHeading.classList.contains("foo");
https://codepen.io/davidicus/details/trhme
I know event delegation
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
resource: https://learn.jquery.com/events/event-delegation/
I know how to cache static assets, and the best practices for doing so
Each resource should specify an explicit caching policy that answers the following questions: whether the resource can be cached and by whom, for how long, and if applicable, how it can be efficiently revalidated when the caching policy expires. When the server returns a response it must provide the Cache-Control and ETag headers
resource:
https: //varvy.com/pagespeed/leverage-browser-caching.html
https: //developers.google.com/speed/docs/insights/LeverageBrowserCaching
I can compress and minify (two different things) assets
Google Closure Compiler, YUI Compressor, CSS Minifier
I know the difference between content box vs border box
The box-sizing property in CSS controls how the box model is handled for the element it applies to.
content-box: the default. Width and height values apply to the element’s content only. The padding and border are added to the outside of the box
border-box: Width and height values apply to the content, padding, and border
resource: https://css-tricks.com/almanac/properties/b/box-sizing/
I know why developers dislike IE
- Microsoft did not comply with the W3C standards for Internet Explorer for a long time which meant that there had to be special attention given to how a website looked on Explorer because it would look different than Firefox or Chrome
IE8 and below does not support many web apis
I know the browser APIs
API - application programming interface
enables software components to communicate with each other
Browser has many apis
Common uses for apis:
- adding, changing, or removing page elements
- moving, resizing or transforming elements
- manipulating forms and user input
- making server requests
- storing data
- audio, video, etc.
I know how to unblock my script tags
When a tag is encountered, the browser stops what it is doing and begins downloading/executing the script. This default behavior is known as synchronous blocking. During this period of blocking, the page may seem unresponsive or slow to the user. To mitigate this problem, HTML5 introduced the “async” attribute for
tags. “async” is a Boolean attribute which, when specified, indicates that a script should unblock the rest of the page, and execute asynchronously
<script> As previously stated, tags cause the browser to block the rest of the page while the script is processed. This can lead to problems if the script references DOM elements which haven’t finished loading yet. In this scenario, the DOM-related code is typically placed in an event handler such as window load or DOMContentLoaded. Another option is to postpone execution until the document has been parsed using the “defer” attribute. Like “async”, “defer” is a Boolean attribute that should only be used with external script files. <script src="defer.js" defer="defer"> Obviously, the “defer” and “async” attributes offer one solution. Unfortunately, they are not supported everywhere yet. A second option is to move tags to the bottom of the <body> tag whenever possible </script>
I know how to use jQuery
resource: https://oscarotero.com/jquery/
