teleren/devto huggingface dataset:
Calling printf from the C standard library in assembly
Tags: assembly, nasm, x86
Published: 2021-12-04 19:14:33

---
title: Calling printf from the C standard library in assembly
published: true
date: 2021-11-11 00:00:00 UTC
tags: assembly,nasm,x86,assembly
canonical_url: https://www.mourtada.se/calling-printf-from-the-c-standard-library-in-assembly/
---

This is the fourth post about x86 assembly. In this post I will show an example how to call the printf function from the C standard library in assembly code.

```
section .text
    default rel
    extern printf
    global main
main:
    ; Create a stack-frame, re-aligning the stack to 16-byte alignment before calls
    push rbp

    mov	rdi, fmt
    mov	rsi, message
    mov	rax, 0

    ; Call printf
    call printf wrt ..plt
    
    pop	rbp ; Pop stack

    mov	rax,0	; Exit code 0
    ret ; Return
section .data
    message: db "Hello, World", 10, 0
    fmt: db "%s", 10, 0


$ nasm printf.asm -f elf64 -o printf.o
$ gcc printf.o
$ ./a.out
# Hello world

```

## The first part

```
  default rel
  extern printf
  global main

```

The `default rel` is a nasm assembly directive. It tells nasm to use rip relative adressing. In short this makes the assembler to rewrite the references in instructions that uses our `fmt` and `message` constants relative to the instruction pointer. This is needed because default for the linker in 64-bit linux is to use position-independent code.

The `extern printf` part tells the assembler that this symbol exists outside of this file and needs to be referenced at a later stage.

Last row here is `global main` which is needed for gcc and it’s the entry point for libc.

## main

First we need to align the stack because the x86\_64 ABI requires the stackpointer to always be 16-byte aligned so therefor we push a value to it.

Then we prepare our registers for the function call to `printf` and then we call `printf wrt ..plt`. What happens here is that we load printf from the libc shared library and this is a little bit complicated but very briefly it says `call printf with relation to procedure linkage table`. The PCL will then the first time `printf` is called resolve where `printf` is in memory with the help of the dynamic link loader in linux. It then stores that adress for future calls. We could link `printf` statically which would copy the code of `printf` into the executable.

Lastly we need to set return value of `main` to zero and do a `ret`.

## call and ret

When you do a `call` operation two things happen. First the instruction on the next instruction is pushed onto the stack. In our example above it will be the memory adress of the instruction `pop	rbp`. Secondly it will jump to the memory adress where `printf` starts. When `printf` is done it will do a `ret` instruction which will pop our memory adress from the stack and jump back to our main function.
Readability vs performance
Tags: readability, optimization, performance
Published: 2021-11-11 14:45:12

---
title: Readability vs performance
published: true
date: 2021-11-11 00:00:00 UTC
tags: readability,optimization,performance
canonical_url: https://jhall.io/archive/2021/11/11/readability-vs-performance/
---

Whenever someone [makes the claim that code readability is paramount](https://jhall.io/archive/2021/11/10/readability-is-paramount/), _someone_ in the audience has a knee-jerk reaction against the idea on the grounds of performance.

Such reactions are misplaced.

Are there times when performance is more important than readability? _Yes. Absolutely._

Should that be your starting point? _No. Absolutely not!_

Write your code to be readable and maintainable.

If you observe that your code is not efficient enough, do some benchmarks, and see if you can improve the desired performance charactaristics. Most of the time this can be done without hurting readability at all. Often, the best way to improve performance is to simplify the code, which may also improve readability.

If you still find that your code is not efficient enough, then, and only then, refactor for performance over readability, and use plenty of comments. Remember: [comments are like apologies to the next programmer](https://jhall.io/archive/2021/02/14/comments-are-like-apologies-to-the-next-programmer/). And when you’ve intentionally sacrificed readability, it’s appropriate to apologize.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Dealing with Bugs as a Novice Frontend Developer
Tags: webdev, beginners, html, codenewbie
Published: 2021-11-10 23:58:21

> If debugging is the process of removing software bugs, then programming must be the process of putting them in. - Edsger Dijkstra

That is just a funny quote I grabbed from [here] (https://www.quotemaster.org/software+bugs)

A bug is simply an error that is making a computer program misbehave. 

Learning frontend development can be quite fun (when your code is working the exact way you want) but often times, it just doesn't work that way. You are bound to face bugs at some point in your learning journey. Even Senior Developers encounter bugs so who are you😂. 

As a newbie, bugs can frustrate you to the extent that you might just want to quit coding but the point is that is how you will learn. 

So here are a few things you can do when you face bugs
 
1. Use Google - All programmers actually use google. If you are getting an error message of some kind, you can just copy the error message and paste it on google. There is a 100% chance that someone has faced the same problem you are facing and another person has provided the solution to the problem. The trick is that using google can be overwhelming because you get a lot of search results.So as a frontend developer, when you use google to debug, there are some likely websites you can get your solutions from 
  * stackoverflow.com
  * w3schools.com
  * developer.mozilla.org (MDN)
  * dev.to 
  * medium.com etc

2. Ask a senior colleague - This is probably the fastest way to fix a bug because you are asking a real person that has probably faced the same issue you are facing. Although, this can be a little difficult because most people self-learn. A quick fix to this would be to join coding communities so you can learn with other developers. Examples of some coding communities you can join include:
  * stack overflow, 
  * women who code, 
  * freecodecamp, 
  * hashnode etc. 

Thanks for reading. I wish you the best in your learning journey. Kindly let me know your thoughts in the comments section. You can also subscribe to my posts if this actually helped you.
Keyboard only accessibility test: OAK + FORT
Tags: a11y, keyboard, testing, html
Published: 2021-11-10 23:42:08

Day 3: OAK + FORT's
Topic: Tabbing through the sort & filter feature

#Failed
**[2.1.1 Keyboard Level A](https://www.w3.org/WAI/WCAG21/quickref/#keyboard)**(solution TBD)
The 'see more' button is skipped in the tabbing order. The focus jumps from 6 to beige.
![A checkbox labeled 6, a button labeled see more and another checkbox labeled beige, all vertically lined up.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81hkjt6pkut0ae1g425u.PNG)

**[2.4.7 Focus Visible] (https://www.w3.org/WAI/WCAG21/quickref/#focus-visible)**
Under 'filter', the checkboxes and their respective labels do not have visible focus indicators.

#Passed
**[2.1.2 No Keyboard Trap Level A](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap)**
Surprisingly enough the keyboard focus does not trapped. But it does disappear on many occasions.

**[2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks)**
Users have the option of skipping the main navigation. It would be helpful to allow users to skip the sort/filter section as well.

#Passed but could be better
**Sort & filter feature**
Checkboxes are checked/unchecked using different keys. The options under 'filter' are toggled using the spacebar, whereas the options under 'size' require the enter key. Too much cognitive load is expended figuring out how to toggle boxes that look the same, and serve the same purpose (filtering items). Many keyboard only users might assume it isn't possible and leave the site entirely.

**Losing focus**
Visible focus is lost between various features such as after the main navigation and before the sort/filter feature. The user will find it difficult to locate their location on the page.
Why do integral types get weirdly initialized inside of std::array in C++, and how can I fix it?
Tags: cpp, help, gamedev
Published: 2021-11-10 23:40:11

This was tested in [SoloLearn's C++ Playground](https://code.sololearn.com/cpp), I'm making the assumption my compiler will do something similar to the one SL uses.

So, I'm playing around with `std::array<T, s>`, because I plan on using it in my game.  
When I do `std::array<bool, 5> def;` and print out the items in each index, I get:
```
Default 0: 0
Default 1: 0
Default 2: 0
Default 3: 0
Default 4: 0
```
When I do `std::array<std::string, 5> def;`:
```
Default 0: 
Default 1: 
Default 2: 
Default 3: 
Default 4: 
```
however, when I use an integral type like `int`, I get numbers that are totally random in some of the spots. - Only a few are actually initialized with `0` (like I expect).
Here's a sample:
```
Default 0: 1875674416
Default 1: 32568
Default 2: 0
Default 3: 0
Default 4: 4199168
```

So, is there a way I can get these integral types to initialize properly? Or do I have to manually initialize the array with `0` (somehow)?
🏹Kotlin&Arrow #3 - Gestión de errores con Validated
Tags: kotlin, arrow, showdev
Published: 2021-11-10 23:36:36

En esta tercera sesión continuamos con la implementación del servicio especializado en ofrecer servicios turísticos a destinaciones saludables de 🦄**Wonderful Enterprises**.

Veremos de la mano de @ivanlorenz el uso de [Arrow Validated](https://arrow-kt.io/docs/0.10/apidocs/arrow-core-data/arrow.core/-validated/) como alternativa a [Arrow Either](https://arrow-kt.io/docs/0.10/apidocs/arrow-core-data/arrow.core/-either/) y en qué escenarios puede ser útil 🤩

Puedes consultar el código fuente aquí 👇

{% github AdevintaSpain/wonderful-freshair-app no-readme %}

... y el vídeo de la tercera sesión aquí 👇

[0:00](https://www.youtube.com/watch?v=989t4x2gMJQ&t=0s) ¿Qué fué antes ... el primer mouse o Ivan Lorenz? (y [la madre de todas las demos](https://www.computerhistory.org/revolution/input-output/14/350/2302))
[1:50](https://www.youtube.com/watch?v=989t4x2gMJQ&t=110s) Revisamos los casos de uso
[7:00](https://www.youtube.com/watch?v=989t4x2gMJQ&t=420s) Subimos versión Arrow 1.0.1
[8:45](https://www.youtube.com/watch?v=989t4x2gMJQ&t=525s) Lista de ciudades no puede ser vacía
[13:05](https://www.youtube.com/watch?v=989t4x2gMJQ&t=785s) Usamos [NonEmptyList](https://arrow-kt.io/docs/0.10/apidocs/arrow-core-data/arrow.core/-non-empty-list/)
[24:14](https://www.youtube.com/watch?v=989t4x2gMJQ&t=1454s) Extensión minAirQualityIndex
[37:05](https://www.youtube.com/watch?v=989t4x2gMJQ&t=2225s) Refactor AirQualityComparer
[47:20](https://www.youtube.com/watch?v=989t4x2gMJQ&t=2840s) Operador de comparación para el AirQualityIndex
[52:58](https://www.youtube.com/watch?v=989t4x2gMJQ&t=3178s) Más detalle en los errores
[1:16:22](https://www.youtube.com/watch?v=989t4x2gMJQ&t=4582s) Usamos [Validated](https://arrow-kt.io/docs/0.10/apidocs/arrow-core-data/arrow.core/-validated/) 👏
[1:34:28](https://www.youtube.com/watch?v=989t4x2gMJQ&t=5668s) [Either](https://arrow-kt.io/docs/0.10/apidocs/arrow-core-data/arrow.core/-either/) vs [Validated](https://arrow-kt.io/docs/0.10/apidocs/arrow-core-data/arrow.core/-validated/) test

{% youtube 989t4x2gMJQ %}

[![Ofertas Backend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s23jqu42nrjobnxldcs2.png)](https://careers.adevinta.es/ofertas/?search=backend&stc=aff-blog%20dev.to-gesti%C3%B3n%20de%20errores%20con%20validated%20de%20arrow)
First week 
Tags: 100daysofcode, beginners
Published: 2021-11-10 23:18:06

I tought I'd make a post about the first few day of my new round of 100 days of code. 
As I mentionned previously, for the past few week I didn't code so much, I've been focusing on finding work after I left Amazon and to find a first job in tech is in itself a full time job.

For the past week I've been reworking a project I did during my bootcamp on OpenClassrooms: a corporate social network, it is a full stack project with back-end in NodeJS, Database in MySQL and front-end in React.

Why rework this project? the project and bootcamp are over. Well for one thing, it was a fun project and I really liked working on it, secondly I believe I can make it better and lastly, if I can deploy the damn thing, it could be a good example of my work.

To pass from MySQL to Postgres was not painless but not very complicated. In fact, the harder thing I did this was connect my API to the database! other than that, modifying the models was easy and the relationships between tables were unchanged. 
I took the opportunity to improve the code I wrote months ago, and I realised how those changes would impact the front-end: some request wont need an userId sent for example, they will use req.user.id instead ( don't know why I didn't do this in the first place ) other send the format the data differently, I 'll have to take note of that for later.
I also changed my GET requests on the posts table: I used to send raw SQL requests instead of using sequelize. I did it for two reasons: I wanted to have more controls of the data, I wanted to choose which columns were sent to minimise network traffic, and to show the teacher that I knew at least a litttle SQL. I know, weird flex... 
Anyways, I decided to use the sequelize syntax this time around and it is a lot nicer to use and the data send back is neatly formatted, I can't wait to use it on the front-end.

All in all this was a good week, I had fun working on code again!
Portfolio rebuilt. 
Tags: javascript, html, css, portfolio
Published: 2021-11-10 23:02:01

## Hi, this is my new portfolio.
Built with picoCSS and Vite in vanilla JS, CSS and html.
> *Also my first blog.*


### Live demo:
[https://jkportfolio.web.app/](https://jkportfolio.web.app/)


{% github JulianKominovic/picocss-vanilla-portfolio %}


## HTML Structure:
Basically I didn't write so much CSS. The main reason for writing CSS with this framework is for aesthetic purposes.


### The portfolio's structure is simple:


1. **The landing page**: which is simple and contains my face and branding.
2. **The projects**: section with the most recent projects.
3. **Skills section**: for obvious reasons.
4. **Blog**: coming soon...
5. **Contact**: just my email and GitHub profile.



#### Header HTML code:
![Header section snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kligheaijgzgb4s9twiu.png)


#### Aside menu:
![Aside menu snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjf2xwken89c5mgb079j.png)



#### Projects HTML code:
For each one of the projects.
![Projects html snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yeqw9ze57o4iygzaica.png)


#### Skills HTML code:
For each one of the tech stacks.
![Skills html snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dl569vglhd78fjskkge.png)



----------------------------


### :pushpin: Contact

<a href="https://www.linkedin.com/in/jkominovic/" target="_blank">
<img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white"/>
</a>
<a href="mailto:juliankominovic@gmail.com">
<img src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white"/>
</a>
<a href="https://jkportfolio.web.app/" target="_blank"><img alt="Portfolio" src="https://img.shields.io/badge/Portfolio-jkportfolio.web.app-FFB740?style=for-the-badge&logo=google-chrome&labelColor=000"></a>


------

### :ok_hand: Made by Julian Ezequiel Kominovic.
GameOff #2 - first 3d models and initial scripts
Tags: gamedev, github, unity3d, devjournal
Published: 2021-11-10 22:58:46

A few days ago, we started doing a game for GameOff 2021 from GitHub as a team of three. The next day, two more people joined us, and now our team is five people! Since I don't know if they want to be mentioned here, you will see creators note in the final game.

So far, we have models of two first enemies: ant and bee, basic environmental elements such as tree, present, sugarcane and snowman. First version of music based on popular christmas song was also composed. Moreover, smooth camera, basic player and enemy controllers are done, so the game is already playable, even if not perfect ;p

You can see the current progress on the video:

{% youtube 5Jc0otO8s1I%}

And the repository:

{% github pilotpirxie/die-bug%}
Perbedaan TCP dan UDP serta Penjelasannya Secara Lengkap
Published: 2021-11-10 22:30:49

Belajar tentang Perbedaan TCP dan UDP serta Penjelasannya Secara Lengkap yang akan kami ulas di halaman ini. jika dilihat kedua protokol tersebut sama-sama untuk melakukan komunikasi, yang jadi pembeda adalah dari sisi orientasinya saja. Jika TCP berorientasi pada koneksi, tidak sama halnya dengan UDP yang merupakan protokol Internet tanpa koneksi yang lebih sederhana di mana pemeriksaan kesalahan dan layanan pemulihan tidak diperlukan

Anda yang belum mengenal apa itu TCP dan UDP pasti kebingungan apa perbedaan dari dua protokol komunikasi tersebut, kami akan menjelaskan semuanya.

Source : https://www.ayokonfig.com/2021/11/perbedaan-tcp-dan-udp-serta.html
Website : https://www.ayokonfig.com/
Access To Rest API Data Made Easy
Tags: javascript, monster, html
Published: 2021-11-10 22:16:46

---
title: Access To Rest API Data Made Easy
published: true
description: small guide to the use of the pathfinder
tags: javascript, monster, html
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2u89s73ejmezot0jtdw.png
---

Lately I had to read and set values in nested data structures of [REST APIs](https://developer.mozilla.org/en-US/docs/Glossary/REST) very often. That was already slowly turning into work.

I can't remember how many times I wrote the following structures or similar in the last months. 

```javascript
const a = {}

if(typeof a ==='object') {
  if(a['b'] !==undefined ) {
    // do something 
  }
}
```

Alternatively you can also work with [Optional chaining](https://dev.to/volker_schukai/access-to-nested-object-properties-10k3). However, this also has its challenges.

For this reason I wrote the auxiliary class [Pathfinder](https://monsterjs.org/en/doc/1.23.0/Monster.Data.Pathfinder.html). This is a small class that bundles all the queries.

The integration is done via import.

```javascript
import {Pathfinder} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/data/pathfinder.js';
```

## Methods 

With this class come 4 methods `exists`, `deleteVia`, `setVia` and `getVia`. With these, structures can be manipulated quickly and easily.

### getVia

First an example of how read access is possible.

```javascript
new Pathfinder({
a: {
    b: {
        f: [
            {
                g: false,
            }
        ],
    }
}
}).getVia("a.b.f.0.g"); 

// ↦ false
```

### setVia

To write a value you can use the `setVia` method:

```javascript
obj = {};

new Pathfinder(obj).setVia('a.b.0.c', true); 

// ↦ {a:{b:[{c:true}]}}

```

## Wildcards

A nice little additional feature is the use of wildcards. Here you can extract several values from a structure.

```javascript
let value = new Pathfinder({
a: {
    b: {
        f: [
            {
                g: 1,
            },
            {
                g: 2,
            }
        ],
    }
}
}).getVia("a.b.f.*.g");

console.log(value.forEach((a,b)=>{console.log(a,b)}));
// ↦ 1 "0"
// ↦ 2 "1"

```

**The worst path you can choose is to choose none.**

_Voila that's it_
The Front-End Developer Roadmap (Revisited)
Tags: javascript, podcast, webdev
Published: 2021-11-10 21:43:38

{% spotify spotify:episode:5EIYg7s7A6sbBaOCDB5tkP %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

## Announcements

The **Svelte for Beginners** Udemy course is now live! Mike took his experience in teaching and learning Svelte and created a course. 

This course will teach you the fundamentals of JavaScript frameworks. 

**Get it now on Udemy!** 👇

[Svelte For Beginners](https://www.udemy.com/course/svelte-for-beginners/?couponCode=HATTSALE)

## What's This One About?

In this episode Matt and Mike discuss front-end development, covering a roadmap of skills that can be used as a sort of guide through the many front-end technologies. The duo go over a list of topics that you can use to learn front-end development starting at vanilla HTML + CSS, and working into more complex topics like frameworks, JavaScript, some backend tech, and much more.

## Show Notes

* Computer Skills
* HTML + CSS
* Optional ----- UI frameworks (Bootstrap, MaterialUI, etc)
* Basic hosting

MONITIZE

* CMS
* JavaScript --------------------------- branch --------------- UI, Figma, etc
* Optional -------- CS concepts (DSA)

MONITIZE

* GIT
* CLI
* NPM (node)
* CSS Preprocessors (Tailwind, SCSS, etc)
* Svelte (or React, or Svelte) ----------------------------or ----------------------- Wordpress
* CI/CD deployment (netlify, vercel, github pages)

MONITIZE

* Static site generators/SSR (Next, Nuxt, SvelteKit)
* Some backend (headless)
* Docker
* Web3

## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok (Html All The Things)](https://www.tiktok.com/@htmlallthethings)