I would like to share all of my Computer Science related bookmarks I added so far (as of 20.11.2019).
I edited a folder visualization tool (link in the pen), so you can also easily just export your JSON bookmarks from e.g. Chrome and give it a go in this visualization.
Hint: it's searchable!
Wednesday, November 20, 2019
Tuesday, September 3, 2019
N26 money over time graph visualisation
I am using N26 for banking and always had the problem that they don't have a visualisation tool that can show me the flow of my money over time.
I wanted to have this so bad that one time I sat down and created one myself!
It's basically a very simple static site generator, where nodejs (ejs templates) fills in some data from an exported csv file, and injects it on a page where C3.js is already loaded. Nothing too complicated!
If you have any questions, feel free to write a comment or create an issue on the github repo.
https://github.com/nagyadam2092/n26-stats
I wanted to have this so bad that one time I sat down and created one myself!
It's basically a very simple static site generator, where nodejs (ejs templates) fills in some data from an exported csv file, and injects it on a page where C3.js is already loaded. Nothing too complicated!
If you have any questions, feel free to write a comment or create an issue on the github repo.
https://github.com/nagyadam2092/n26-stats
Thursday, June 6, 2019
CSS grid
- This post was highly inspired by this article.
First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox helped out, but it's intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.
To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
Terminology:
Grid Container: The element on which display: grid is applied.
Grid Item: The children (i.e. direct descendants) of the grid container.
Grid Line: The dividing lines that make up the structure of the grid.
Grid Track: The space between two adjacent grid lines.
Grid Cell: The space between two adjacent row and two adjacent column grid lines.
Grid Area: The total space surrounded by four grid lines.
First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox helped out, but it's intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.
To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
Terminology:
Grid Container: The element on which display: grid is applied.
Grid Item: The children (i.e. direct descendants) of the grid container.
Grid Line: The dividing lines that make up the structure of the grid.
Grid Track: The space between two adjacent grid lines.
Grid Cell: The space between two adjacent row and two adjacent column grid lines.
Grid Area: The total space surrounded by four grid lines.
Properties for the Grid Container:
- display: Defines the element as a grid container and establishes a new grid formatting context for its contents.
- values: grid, inline-grid
- grid-template-columns, grid-template-rows: Defines the columns and rows of the grid with a space-separated list of values.
- values: <track-size> - can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit), <line-name> - an arbitrary name of your choosing.
- The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:
- grid-template-areas: Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property.
- values: <grid-area-name> - the name of a grid area specified with grid-area
- grid-template: A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.
- grid-column-gap, grid-row-gap: Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows. Shorthand: grid-gap
- justify-items: Aligns grid items along the inline (row) axis (as opposed to align-items which aligns along the block (column) axis). This value applies to all grid items inside the container.
- align-items: Aligns grid items along the block (column) axis (as opposed to justify-items which aligns along the inline (row) axis). This value applies to all grid items inside the container.
- place-items: sets both the align-items and justify-items properties in a single declaration.
- justify-content: This property aligns the grid along the inline (row) axis (as opposed to align-content which aligns the grid along the block (column) axis).
- values: start, end, center, stretch, space-around, space-between, space-evenly
- align-content: This property aligns the grid along the block (column) axis (as opposed to justify-content which aligns the grid along the inline (row) axis).
- place-content: place-content sets both the align-content and justify-content properties in a single declaration.
- grid-auto-columns, grid-auto-rows: Specifies the size of any auto-generated grid tracks (aka implicit grid tracks).
- grid-auto-flow: If you have grid items that you don't explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items. This property controls how the auto-placement algorithm works.
- grid: A shorthand for setting all of the following properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow
Properties for the Grid Items:
- grid-column-start, grid-column-end, grid-row-start, grid-row-end: Determines a grid item's location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.
- grid-column, grid-row: Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.
- grid-area: Gives an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.
- justify-self: Aligns a grid item inside a cell along the inline (row) axis (as opposed to align-self which aligns along the block (column) axis). This value applies to a grid item inside a single cell.
- align-self: Aligns a grid item inside a cell along the block (column) axis (as opposed to justify-self which aligns along the inline (row) axis). This value applies to the content inside a single grid item.
Sunday, February 10, 2019
My favorite trick in Angular / RxJS
I really love Andular and TypeScript in general, and love to work with Observables.
Observables, however, can be very hard to get done correctly, which obviously needs a lot of debugging. But how?
There are plenty of options for that, for example subscribing to an observable. This might be ok, but is a bit tedious, and doesn't tell you, if there are actually other objects subscribing to it (Subscribers). And, in my experience, is usually one of the most frequent problem by using Observables.
BUT! There is a neat way of checking if your Observable actually has subscribers or not.
Let me tell you about an RxJS operator: tap. I quote from learnrxjs.io:
In summary: as you could see from these 2 examples, you can debug Observables in an Angular project with many ways, but my experience told me to use the tap(console.log) "trick", because then I'm not explicitly subscribing to the Observable, rather just listening and peaking if there is someone who actually would like to subscribe for changes. Cheers!
Observables, however, can be very hard to get done correctly, which obviously needs a lot of debugging. But how?
There are plenty of options for that, for example subscribing to an observable. This might be ok, but is a bit tedious, and doesn't tell you, if there are actually other objects subscribing to it (Subscribers). And, in my experience, is usually one of the most frequent problem by using Observables.
BUT! There is a neat way of checking if your Observable actually has subscribers or not.
Let me tell you about an RxJS operator: tap. I quote from learnrxjs.io:
Transparently perform actions or side-effects, such as logging.What that means is that this operator does not mutate the values emitted from the Observable, this is just having a sneak peak at the values. This is very good for you to log something there and check if the Observable works.
In summary: as you could see from these 2 examples, you can debug Observables in an Angular project with many ways, but my experience told me to use the tap(console.log) "trick", because then I'm not explicitly subscribing to the Observable, rather just listening and peaking if there is someone who actually would like to subscribe for changes. Cheers!
Subscribe to:
Posts (Atom)