Using the issues of this repo to track and comment my online reading
Using the issues of this repo to track and comment my online learning path.
I'll create an issue with the link, comments and related information about an the articles I found interested and that I'll be willing to revisit.
A list of all the topic I read about in no particular order:
https://malcoded.com/posts/angular-docker
Dockerfilepackage*.json filesnpm install in the docker containerdockerignotehttps://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/
This is the default behaviour in a simple 1 column grid: children are placed in order. With grid-column and grid-row, we can force an element to be placed in a specific area of the grid. For example, if we place our two elements in the same area like this:
.chart,
.info {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
NgModule’s that bundle together NgRx store logic.
NgModule’s that bundle together feature slices of your store, including state, actions, reducer, selectors, and effects.
Depending on the type of feature you are creating.
├── app
│ ├── app-routing.module.ts
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── components
│ ├── containers
│ │ └── my-feature
│ │ ├── my-feature.component.css
│ │ ├── my-feature.component.html
│ │ └── my-feature.component.ts
│ ├── models
│ │ ├── index.ts
│ │ └── my-model.ts
│ │ └── user.ts
│ ├── root-store
│ │ ├── index.ts
│ │ ├── root-store.module.ts
│ │ ├── selectors.ts
│ │ ├── state.ts
│ │ └── my-feature-store
│ │ | ├── actions.ts
│ │ | ├── effects.ts
│ │ | ├── index.ts
│ │ | ├── reducer.ts
│ │ | ├── selectors.ts
│ │ | ├── state.ts
│ │ | └── my-feature-store.module.ts
│ │ └── my-other-feature-store
│ │ ├── actions.ts
│ │ ├── effects.ts
│ │ ├── index.ts
│ │ ├── reducer.ts
│ │ ├── selectors.ts
│ │ ├── state.ts
│ │ └── my-other-feature-store.module.ts
│ └── services
│ └── data.service.ts
├── assets
├── browserslist
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── tslint.json
https://kentcdodds.com/blog/inversion-of-control
How to not make your APIs more complicated by more adding params (or
props, or@Input()) but just letting the user do the work.
https://www.youtube.com/watch?v=PXuxjEest1Y
[] bind property
{{}} interpolate the string
https://medium.com/ngconf/the-true-difference-between-and-bindings-in-angular-1b9a854ea1d6
A set of server side and client side NextJs utilities for integrating with Shopify's OAuth & App Bridge authentication systems.
https://kentcdodds.com/blog/aha-programming
In short, don't abstract until your are 100% sure that the function or component will not change, is better to be WET that having a bad abstraction.
Spectator help you to get rid off all the Angular testing boilerplate.
What happened to the Testbed? The Fixture? The answer is Spectator handles all of those behind the scenes so that you don’t have to
https://csswizardry.com/2020/05/the-fastest-google-fonts/
rel="preload"&display=swap<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />https://developers.google.com/web/updates/2019/02/constructable-stylesheets
Constructable Stylesheets are a new way to create and distribute reusable styles when using Shadow DOM.
const sheet = new CSSStyleSheet();
// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');
// this throws an exception:
try {
sheet.replaceSync('@import url("styles.css")');
} catch (err) {
console.error(err); // imports are not allowed
}
// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
.then(sheet => {
console.log('Styles loaded successfully');
})
.catch(err => {
console.error('Failed to load:', err);
});https://davidea.st/articles/typescript-2-9-import-types
// Retrieve a collection of users from Firestore
// Note: Firebase is loaded lazily
// Note: Only use the import('') types syntax to keep
// Firebase out of the main bundle! 🙌
function getUserList(app: import('firebase').app.App) {
return app.firestore().collection('users').get();
}Javascript is single threaded and async
It only job is to move the first function from the task queue to the call stack.
Is a data structure that record where in the program we are.
https://ishadeed.com/article/building-real-life-components/
Why?
S - Single responsibility
O - Open-closed
L - Liskov substitution
I - Interface segregation
D - Dependency inversion
https://dev.to/charlesstover/cache-your-react-event-listeners-to-improve-performance-3i76
<Button onClick={() => alert('!')} />
onClickhandler, despite being exactly the same, is being created everyrendercall. Each render, a new function is created (because it is created in the render function) in memory
Best approach.
https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/
useEffect() hook(...) We've achieved exactly the same functionailty using the useEffect() Hook. It's even better or cleaner as some would say because here, we didn't have to write separate codes for componentDidMount() and componentDidUpdate(). With the useEffect() Hook, we are able to achieve both functions. This is because by default, useEffect() runs both after the initial render and after every subsequent update.
PureComponent(...) only re-renders when there's a change in state or props.
React.memo()const Unstable = React.memo(function Unstable (props) {
console.log(" Rendered Unstable component ");
return <div>{props.val} </div>;
});This achieves the same result as PureComponent did. Hence, the component only renders after the initial render and doesn't re-render again until there's a change in state or props.
https://medium.com/the-node-js-collection/debug-your-node-js-app-in-60-seconds-9ee942a453f0
node --inspect=0.0.0.0:9229 server.js
https://blog.angularindepth.com/angular-you-may-not-need-ngrx-e80546cc56ee
As much as possible, we want our view components to be simple renderers and delegate events (user interactions, state changes, etc) to non-view components.
A programming pattern in which a simpler public interface is provided to mask a composition of internal, more-complex, component usages.
This pretty much what we did in the PageStateService, we could definitely improve that.
https://medium.com/@chang_yan/how-i-prepared-my-first-tech-talk-b8a0b27b8dd1
https://open.spotify.com/episode/7mtewlnYQu1bXclexX97mP?si=-O6nxpxPQD-VQpFRLh19Fg
manifest.js, file thattell the browser or the OS: hey take this resources (images) and use it for the app visual feature.
Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:
A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.
Chuck Cobb, Agile Project Mgt Author and Instructor (Over 50K Students)
Answered Nov 22, 2018 · Author has 5.6k answers and 1.4m answer views
Is normally the lowest level of testing and typically tests an individual module of software to ensure that it performs as expected for a selected range of inputs and outputs.
Tests that modules that are expected to interoperate with each other work together as expected. It normally does not include testing of the user interface.
Tests the complete functionality of the entire system including the UI.
https://ponyfoo.com/articles/es6-modules-in-depth
An important point to make is that ES6 modules export bindings, not values or references.
One, the exported interface of a module becomes immediately obvious. Instead of having to crawl around the module and put the pieces together to figure out the API, you just scroll to the end.
Two, you don’t introduce confusion as to whether export default or a named export.
Three, The export default approach is more versatile because it allows you to export just one thing.
Four, – and this is really a reduction of points made earlier – the export default statement at the bottom of a module makes it immediately obvious what the exported API is, what its methods are, and generally easy for the module’s consumer to import its API.
https://frontendhappyhour.com/episodes/web-performance-chugging-our-drinks-down-fast/
https://www.joshwcomeau.com/css/stacking-contexts/
Stacking context!
https://netbasal.com/detect-unsaved-changes-in-angular-forms-75fd8f5f1fa6
ShareReply to unify the responsehttps://indepth.dev/posts/1396/drag-drop-directive
Like the concept of adding boundaries.
https://blog.angular-university.io/service-workers/
the same Service Worker instance is shared across multiple tabs of the same application and can intercept the requests from all those tabs
https://stephaniewalter.design/blog/enhancing-user-experience-with-css-animations/
Get high-resolution device mockups with the screenshot of your website or mobile application, for free
https://blog.mgechev.com/2017/04/23/angular-tooling-codelyzer-angular-cli-ngrev/
ngrev: Graphical tool for reverse engineering of Angular projects. It allows you to navigate in the structure of your application and observe the relationship between the different modules, providers, and directives. The tool performs static code analysis which means that you don't have to run your application in order to use it.
Compodoc: documentation for angular projects
https://dev.to/yashints/write-faster-javascript-18f7
const under22People = originalList
.filter(x => x.age < 22)
.map(x => x.name)Runs N times for
filterand then M times formap
const under22People = []
originalList.forEach(({ age, name }) => {
age >= 18 && under22People.push(name)
})Tuns N times for
forEachand that's it.
<head> of the page. (Your budget is 14 KB). For CSS/JS, operate within a critical file size budget of max. 170KB gzipped (0.7MB decompressed).<script type=“module">.https://github.com/gothinkster/realworld
While most "todo" demos provide an excellent cursory glance at a framework's capabilities, they typically don't convey the knowledge & perspective required to actually build real applications with it.
https://www.alexandraulsh.com/2018/06/25/docker-npmrc-security/
Multi-stage builds create untagged images of earlier build stages in our local Docker daemon for the Docker build cache. The commit history of these images leaks plaintext build arguments. You should delete these images after you finish your builds.
https://github.com/ryanmcdermott/clean-code-javascript
Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript. This is not a style guide. It's a guide to producing readable, reusable, and refactorable software in JavaScript.
This is pretty cool.
I like the sidebar to add content and the focus when you editing the content.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.