Miscellaneous 6 Flashcards
naming conventions
PascalCase is a naming convention in which the first letter of each word in a compound word is capitalized. Software developers often use PascalCase when writing source code to name functions, classes, and other objects. PascalCase is similar to camelCase, except the first letter in PascalCase is always capitalized.
google javascript styleguide - names
camelCase (used in JS)
PascalCase (used in JS)
snake_case
kebab-case
garbage collection
- in js when we initialize the value, we allocate memory space;
- in c++ we have to deallocate, but not in js;
- here we have garbage collection that finds variables and functions no longer used; we have no control over it; based on some complex algorithm it runs in the background
imperative vs declarative
- declarative/functional programming with JS https://dev.to/adnanbabakan/declarative-programming-with-javascript-2h97’
- is declarative method more efficient in terms of runtime complexity than imperative (as in do I gain anything rewriting for loops with .reduce or .map)?
- not sure about the runtime complexity, I think under the hood higher order functions are running loops
- what you do gain is readability and more concise code I think
To frame the discussion, imperative code is where you explicitly spell out each step of how you want something done, whereas with declarative code you merely say what it is that you want done. In modern JavaScript, that most often boils down to preferring some of the late-model methods of Array and Object over loops with bodies that do a lot of comparison and state-keeping. Even though those newfangled methods may be doing the comparison and state-keeping themselves, it is hidden from view and you are left, generally speaking, with code that declares what it wants rather being imperative about just how to achieve it.
When do you need to call super?
Calling exactly super() is always redundant. It’s explicitly doing what would be implicitly done otherwise. That’s because if you omit a call to the super constructor, the no-argument super constructor will be invoked automatically anyway. Not to say that it’s bad style; some people like being explicit.
However, where it becomes useful is when the super constructor takes arguments that you want to pass in from the subclass.
public class Animal {
private final String noise;
protected Animal(String noise) {
this.noise = noise;
}
public void makeNoise() {
System.out.println(noise);
}
}
public class Pig extends Animal {
public Pig() {
super("Oink");
}
}
https: //stackoverflow.com/questions/54164225/in-javascript-classes-you-need-to-always-call-super-confused-about-this-statem
https: //stackoverflow.com/questions/4090834/when-do-i-use-super
polymorphism in action
means you can override parent method to behave differently in each child
const shape = [New Circle(), New Square()]
for(let shape of shapes){
shape.duplicate()
}
will call different implementation of each in one call
previously in non object oriented programming we would have to do a series of if else statements to call decoupled functions for each.
Dynamic Websites vs Static Pages vs Single Page Apps (SPAs)
https://www.youtube.com/watch?v=Kg0Q_YaQ3Gk
Static - You put a bunch of html files on the server - user types the url and you have different html files served back. User generated content or dynamic content that changed a lot, you can’t write these html files in advance. Very simple page with no dynamic content can still use this.
Dynamic - html renders on the fly per request on the server, with server side language. Incoming request will be parsed with server side code, which will reach out to the database and fetch some data to build html code on the server.
SPA - most modern inspired by mobile apps, things happen instantly. In previous every click results in new response with slight delay.
One html file sits on the server and is returned to the client but it has js code that does it all.
SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to the advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js .
Static + SPA. A website that publishes new videos, more dynamic you can use static site generators. You have db and a framework of how your pages should look like. Generator is run by you, takes all this and pregenerates a static html on your machine or in the cloud not as a request but before the page is deployed. Then you deploy this static page onto a server. Gatsby works with React to build a static site. So you deploy static page but also spa. So you load finished page, but there after spa takes over
See Gatsby for why do you need a static site generator.
SPA has problems with search engine optimization, crawlers don’t wait for js to complete rendering, also when you want to take the performance impact away from the user when the devices are slower.
disadvantage could be, that developers building dynamic pages need both frontend (HTML + CSS + JS) and backend development knowledge. At least to a certain degree. Decoupling and splitting work is certainly possible but there is a slightly higher dependency.
Why are two identical objects not equal to each other?
found on stackoverlfow
{} === {}
False
Objects are not compared by value: two objects are not equal even if they have the same properties and values. This is true of arrays too: even if they have the same values in the same order.
var o = {x:1}, p = {x:1}; // Two objects with the same properties
o === p // => false: distinct objects are never equal
var a = [], b = []; // Two distinct, empty arrays
a === b // => false: distinct arrays are never equal
Objects are sometimes called reference types to distinguish them from JavaScript’s primitive types. Using this terminology, object values are references, and we say that objects are compared by reference: two object values are the same if and only if they refer to the same underlying object.
var a = {}; // The variable a refers to an empty object.
var b = a; // Now b refers to the same object.
b.property = 1; // Mutate the object referred to by variable b.
a.property // => 1: the change is also visible through variable a.
a === b // => true: a and b refer to the same object, so they are equal.
If we want to compare two distinct objects we must compare their properties.
async await
async await with traverse media
https://www.youtube.com/watch?v=PoRJizFvM7s
Fetch api or axios is based on promises so you’ll be dealing with response rather than creating it yourself.
Fetch API needs 2 .then
fetch(‘http://example.com/movies.json’)
.then(response => response.json())
.then(data => console.log(data));
axios.get(‘/user’, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
async function myFetch() {
let response = await fetch('coffee.jpg');
console.log(response);
}
Async Await is a way to handle responses, so to build a promise you use the same logic as promises.
In order to make a destructive array method into non destructive
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
songs.slice().sort()
Why do you need a static site generator?
But now comes the interesting part: Even pages with dynamic content can be converted into static pages. This page (academind.com) is an example - it’s actually a static page.
How does that work? Do we write all the HTML code for all our pages manually? Do we copy and paste code from page to page?
No, that would not be feasible at all - leave alone that it would be extremely error-prone.
Instead, we use a static site generator, to be precise, we use Gatsby.js.
How does that work?
A static site generator allows you to define content in a simplified form - often as a markdown document.
For example, this is what a draft of the article you’re currently reading looked like:
The markdown content for this article.
The static site generator then picks up that content and converts it into HTML + CSS code as instructed by you.
Every generator works differently, Gatsby.js actually uses a React app that it basically builds locally and where it then “visits” every page that would exist in a SPA. Snapshots of these pages then get stored as HTML files - and that’s the final output. A bunch of HTML files as they would normally be generated by React in the browser.
We then simply upload these HTML files to our server.
Why all that hassle?
Compared to a normal SPA, the static page approach has a major advantage: The final page is shipped over the wire when requested. No JavaScript code needs to run to draw it onto the screen. Search engine crawlers therefore see what users see. And users don’t need to wait for some initial JavaScript code to be parsed and executed.
But the best thing is: Some static pages (including this one), turn into a SPA once loaded.
Hence you get all the benefits of a SPA (fast updates, instant changes) as soon as the user has loaded the first page. But for that first page, you get the advantages of a static or dynamic web page. Pretty sweet! :)
Important: Not every static site generator gives you a SPA as well.
In addition, not every static page is created with the help of a static site generator. You can also write all HTML pages on your own and simply upload them. For small and static pages, this might be more than enough!
Git, Github, GitLab, Gogs, etc
First concept is Git, which Is a distributed revision control system, a tool to manage your source code history. Git is free and open source software created by Linus Torvalds for use in developing the Linux kernel.
‘Distributed’ is also an important concept. Centralized version control systems have a single “central” copy of the project on a server, and programmers will “commit” their changes to this central copy. In the distributed system though every developer “clones” a copy of a repository and has the full history of the project on their own hard drive.
GitHub is a web-based hosting service for Git repositories. Github is running on the servers of Github. Another such example is Bitbucket.
Self hosted git services such as GitLabs and Gogs are a software you download and run on your own server. There are many others. GitHub has an Enterprise version that does that as well. So does Bitbucket.
