BlogPost 408
Discuss in words something you learned in class today or this week.
I learned how to use material UI’s Modal component to create a helpful UI for quick form inputs.
Explain the use cases for, and differences between — bind, apply and call.
Bind sets the context of a function now, but the function won’t be executed until later. Apply executes the function now and sets the context.
Use call() when you want to cause a function to execute with a different context. It sets the context as specified, sets the arguments as specified and then calls the function.
The only difference between apply and call is that rather than specifying each argument for the function like someFunction.call(thisValue,arg1,arg2) you can pass the arguments as an array. So apply would look like this someFunction.apply(thisValue,[argArray])
A common use case for apply was to call functions that couldn’t be passed an array of arguments. For example, if you had an array of numbers: let nums = [1,2,3] and you wanted to find the smallest number. You couldn’t just call Math.min(nums) you would instead have to call Math.min.apply(null,nums) to get a minimum.
With the introduction of the spread operator … , this use case is not the preferred way of doing things, but it’s good to be aware of if you’re looking at legacy code. You would now want to just call Math.min(…nums) .
Which (if there is) node library method could you use to solve the algorithm problem you solved last night in your pre-homework.
Prompt: Change Return Program — The user enters a cost and then the amount of money given. The program will figure out the change and the number of quarters, dimes, nickels, pennies needed for the change.
I couldn’t find a library for this specific utility method, but i did find a number of libraries for currency exchange.https://www.npmjs.com/package/nodejs-currency-converter
Which (if there is) node library method could you use to solve the algorithm problem you solved in class tonight?
Prompt: Find Cost of Tile to Cover W x H Floor — Calculate the total cost of tile it would take to cover a floor plan of width and height, using a cost entered by the user.
I couldn’t find a library for the prompt, but did find this library which helps calculate distance between geolocations: https://www.npmjs.com/package/geolib
How do you handle code organization?
File structure — place files that are related to each other in separate folders. for example, a separate folder for your api, and src for most of your front end code.
Purpose — Each code file should have one main purpose, whether it’s a component, container, redux file etc.
Get Patrick’s stories in your inbox
Join Medium for free to get updates from this writer.
Within each code file, it should be Import Statements (grouped together as related if applicable), component styling if applicable, function declaration, inner function declarations/functions, return/render if applicable and export
How do you handle dependency management.
The npm package manager serves as the basis of most other front-end dependency management tools. This is because most of them are Node.js packages that you can install using npm.
It’s easy to get started with npm, as it’s packaged with Node.js that you can install on your operating system by downloading the appropriate installer (Windows, macOS, Linux) from Node.js’ Download page. Once Node.js is installed on your system, you can run npm from your command line interface.
Besides being a package manager, npm is also a registry of open-source Node packages. Developers from all over the world can upload npm packages that you can add to your application with a couple of commands. This is how front-end developers have easy access to advanced tools such as PostCSS and the Grunt task runner.
What is React.cloneElement? And the difference with this.props.children?
React.cloneElement(): Clone and return a new React element using element as the starting point. The resulting element will have the original element’s props with the new props merged in shallowly. New children will replace existing children. key and ref from the original element will be preserved.
React.cloneElement example only works if your child is a single React element.
For almost everything
{this.props.children}is the one you want. Cloning is useful in some more advanced scenarios, where a parent sends in an element and the child component needs to change some props on that element or add things like ref for accessing the actual DOM element.
https://reactjs.org/docs/react-api.html#cloneelement
Walk us through the process of creation of an application or website you’ve built.
First the goal is to find the problem you need to solve and collect all of the information and logic you need to solve the problem. Assuming you are going to need to store data, figure out how the information will be spread among tables in a database in order to be useful. Start developing routes that will return the desired information for your front end. create a wireframe or sketch for your front end that will determine the kind of pages you need for your user interface. Then start coding and putitng it all together.
What are the differences between functional and imperative programming styles, and explain your preference, if any.
Functional programming is directly programming the machine to perform a function, and imperative programming is telling a machine how to perform a function. For example, an imperative programming style would be to create a for loop:
for(let i = 0 ; i < arr.length ; i++) {console.log(arr[i])};
Whereas an imperative style approach would be to use a higher order function as such.
arr.forEach(item => console.log(item));
I do not have a preference towards either style, so I will try to be cognizant of the different paradigms as I program.
https://joshldavis.com/2013/09/30/difference-between-imperative-and-functional-part-1/
