General Web Dev Flashcards
How do you speed up a slow app?
Run Lighthouse, and Network tab in dev tools check speed diagnostics. Gives you speed index, first paint (from critical render path) Check if JS bundles are working correctly. Have images been optimized? Are we making too many HTTP requests? Mobile-first improves performance. Use CDN’s where possible, caching content.
What is a dependency injection?
Separate parts of our business logic into service objects, and then inject them into classes we are using. Keeps code DRY, modularized. Instead of re-writing logic in multiple places, just call it from one place when needed.
What are SOLID principles?
Mostly in OOP space, but also applies to functional programming.
S - Single responsibility principle. - “A class should only have a single responsibility, that is, only changes to one part of the software’s specification should be able to affect the specification of the class.”
O - Open/Closed Principle –> functions should be closed for modification, open for extension.
L - Liskov Substitution Principle - “Objects in a program should be replaceable with instances of their subtypes without altering the correctness of that program.”
I - Interface Segregation Principle - “Many client-specific interfaces are better than one general-purpose interface.”
D - Dependency Inversion Principle - “One should “depend upon abstractions, [not] concretions.”
Tell us about a time you have a conflict and how you resolved it?
I was working with on an application with a partner who lived on the other side of the country and had also had a quite different sleeping schedule than mine, and was sleeping through our scheduled meetings, which strained our communication, and created some code conflicts and double-work. We were running on a tight deadline, so as soon as I realized that this was becoming an issue, I spoke to him about how we could better communicate and re-align, what times worked best for him to work together, and how we wanted to split up all the remaining tasks. From then on, the project went much more smoothly and we were able to complete everything we set out to do in time.
How do you go about debugging?
my code never has bugs! (joke)
real - checkout dev tools, use debuggers, network tab, Lighthouse, console.log, console.table, step debugging with node debugger, writing tests for how you expect the code to work. proactive whenever possible, but also using all reactive methods available.
How do you make sure things in multiple browsers?
test on all browsers, use things like BrowserStack, use sass auto-prefixers, use css-reset and/or normalize, check caniuse.net, progressive enhancement. think about target audience, what browsers are most of your users using? on mac, run IE through Safari. automated test suites like Selenium, BrowserStack.
How does a web page work?
when you go to a site and it’s loading the url, it’s going to use Domain Name System to lookup the address. it then goes on the internet to find the server where that address lives. the server then “serves” up the content. server may ask for additional info before returning anything else back. first serves up index.html, then serves dependencies - assets, stylesheets, javascript files, call other servers if needed (3rd party dependencies).
Static type vs dynamic type languages?
JS is dynamically typed. don’t need to declare types, there is no type checking. makes dynamically typed languages versatile, can cut corners when needed if you know what you’re doing. TypeScript changes this.
statically typed - need to be explicit about types and when you are changing them. allows for less type errors.
What is OOP?
The main paradigm for architecting code, using SOLID principles. Based off object and class setup, constructing objects to encapsulate logic. May have properties, methods, private/public methods available, can have control over what is available to public. Inheritance - pass properties/methods from parent objects to children objects.
What is functional programming?
A paradigm for coding, useful for JavaScript. Creating pure functions (no side-effects). Immutability, managing state management (Context/Redux in React).
What are components?
Can refer to React. HTML5 now has Web Components if you don’t want to work with framework. Concepts are the same. Build component once, re-use multiple times, just changed properties/data. keeps code DRY, modular, re-usable, extensible, lends itself to composition.
How to stay up to date?
Twitter, youtube channels, Udemy, LevelUp Tuts, talking to other devs and designers, reading articles, scotch.io, smashing magazine, for design - dribble. talk about working group joined to learn MongoDB and GraphQL. Syntax.fm podcast - wes bos, scott tolinski
Do you follow clean code principles?
Yes - DRY, SOLID principles. keep things modular, maintainable, self-commenting code when possible, otherwise write comments for other devs. Single-use principle, test code, keep things organized.
How do you test code?
Run through it, make sure it compiles, check multiple browsers, write unit tests, integration tests.
Why use SPAs?
core functionalities - Single Page Applications. Exist to solve problems - easy property binding, from view to controller (HTML to JS), easy dynamic content updating. also routing (virtual DOM in React) only load what’s needed. very fast, performant. can talk about components, composability, extensibility. self-contained, re-usable pieces of logic.
