teleren/devto huggingface dataset:
How to Add the Built in and Custom Toolbar Items to a Blazor Gantt Chart
Tags: blazor, dotnet, csharp, webdev
Published: 2021-10-29 05:17:50

Learn how to add the built-in and custom toolbar items to a Syncfusion [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) in a Blazor WebAssembly app. 

This video explains how to add a few built-in toolbar items, enable, and disable toolbar items at runtime. Also, it explains how to add a custom toolbar item in the Gantt Chart.

Example project: https://bit.ly/3aTyDTh 

Explore tutorial videos: https://bit.ly/3jkGRs7

{% youtube Y42u-hY5MqI %}
EV.IO
Published: 2021-10-29 04:52:39

EV.IO and [happy wheels](https://happywheels24.com) are my favorite action game. "Ev. io" is a new multiplayer FPS online game that occurs in a cutting-edge arena. The online game features tactical-level models similar to Luminosidad, Destiny, and Go pitapat. You have different weapons and skills you can use to your current advantage on typically the battlefield. Click to be able to jump straight directly into the fight!

To be able to play Ev. io, simply click to be able to be randomly extra to an online game. You’ll be in a position to play inside free-for-all deathmatch in addition to team deathmatch video games. There are different science-fiction-inspired levels inside "Ev. io". Employ the futuristic structure tactically to your current advantage. Double in addition to triple jump to be able to reach high areas and surprise your current opponents with a great attack previously mentioned.

There is a range associated with arms in Ev. io. You possess three possible arrears weapons. See beneath on how in order to swap out your default weaponry. When you’re within the game, you will find guns scattered around the map at particular points. There are usually sniper rifles, skyrocket launchers, and some other guns to provide you with a good advantage.
Ev. io features an easy abilities tree addressing jump height, bullets, teleport, stamina, plus reload speed. A person can also swap out your default weapon from your abilities page.

Link play:  [https://happywheels24.com/evio](https://happywheels24.com/evio)
Making the most boring website ever with TypeScript, NestJs, React and others. Part 6. 
Tags: react, typescript, node, webdev
Published: 2021-10-29 04:43:28

_This series is about making a generic website for a local business with TypeScript, NodeJs, NestJs, Prisma, React and NextJs. I'm trying to make my videos quite short, about 10 minutes each (except for the first one), while putting as much content there as I can. [Here](https://www.youtube.com/playlist?list=PL7b0cPjh8z6K_4qLNu_QdE3RpiU6omViC) is the full playlist._

Today we will deal with authentication and finally finish something resembling a complete product.

Enjoy :)

{% youtube _doefwHiXis %}
Static Site Generator - Support static files
Tags: opensource, javascript, osd600
Published: 2021-10-29 04:19:45

Throughout the previous week, I was exploring [Docusaurus](https://docusaurus.io/) and found that they have a feature to [support static files](https://docusaurus.io/docs/static-assets). I find this feature very useful for any static site generator since images, favicons, stylesheets, etc. are very common parts of a webpage. Therefore, I decided to add [this feature](https://github.com/minhhang107/mh-ssg/commit/4ffc2e934d1266eecd8f349cd652c3632afb0b68) in my tool.

### Planning
To add this feature,  I sketched out a few tasks to finish:
1. Add markdown support for image syntax
2. Create a folder inside the output folder to store all assets
3. Save all static files from user input to assets folder
4. Parse the saved assets to the html file

### Implementation
1. While finding a way to parse image syntax, I decided to fully implement support for markdown. I used [markdown-it](https://www.npmjs.com/package/markdown-it) and [highlight](https://highlightjs.org/) for this task.
2. I added a new module - `copyAssets` and imported [fs-extra](https://www.npmjs.com/package/fs-extra#copy) to easily copy the assets from users' folder to the default `assets` in output folder.
3. Since the process of generating HTML file is getting more and more complicated, I separated a part of the logic into the `generateHTML` module. Apart from the existing logic, I also added code to replace old image path to the new one that I just create.

The actual implementation turned out to be more complicated that expected. In step 1, 2, 3, my original plan was to code them myself but then I had to look for libraries to simplify the process, otherwise it would take too much time and there might be unnecessary errors.

### Next step
The feature is currently working but there are still rooms for improvement.
1. For now, t he tool only accepts static files through the config json file. It should accept the assets as an option. For example, users should be able to use `mh-ssg -i file.md -a assets`.
2. Currently all files in user input folder are copied to the default `assets` folder. However, the tool should go through all the files and only filter out image files before copying so that the storage is not wasted.
October 29th, 2021: What did you learn this week?
Tags: weeklyretro, weeklylearn, discuss
Published: 2021-10-29 04:17:02

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Yoda wooping someone's butt](https://media.giphy.com/media/yDYAHbqe5DfyM/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

<!--
And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{%link https://dev.to/devteam/what-was-your-win-last-week-4f0n %}

<center>

![Little kid making a fist as if to say "Yes!"](https://media.giphy.com/media/6brH8dM3zeMyA/giphy.gif)
</center>
-->
Divtober Day 28: Dots
Tags: codepen, divtober, css, art
Published: 2021-10-29 04:05:23

---
title: Divtober Day 28: Dots
description: The word 'dot' made out of dots and animated.
published: true
tags: codepen,divtober,css,art
series: divtober
---

The word of the day is 'dots' and I didn't have many ideas... so I ended up writing the word 'dot' using dots. And added a small animation (that works differently in every browser, because, why not?)

{% codepen https://codepen.io/alvaromontoro/pen/zYddvKz %}

----

Initially I was thinking about doing something closer to this old animation (which is also a single element)... and I kind of regret not doing it, because it would have been simpler 😅

{% codepen https://codepen.io/alvaromontoro/pen/MMKxzo %}
map, filter and reduce functions in JavaScript
Tags: javascript, javascriptarrays, mapfilterreduce, node
Published: 2021-10-29 03:33:44

{% youtube UdzfxEnXK2Q %}

The .map(), .filter() and .reduce() functions in JavaScript are 3 most very useful functions in JavaScript.

The common thing between them is that they are Array functions and the difference between them is in their return type.
418 I'm a teapot
Tags: beginners, webdev, java, programming
Published: 2021-10-29 03:32:34

## Status Codes 
Learned of the 418 response error today. Better known as “I’m a teapot”.

### Pranksters 
A reference to Hyper Text Coffee Pot Control Protocol where if the server denies a request to brew coffee. It is in fact definitely a teapot.
How To Check RAM And CPU Usage In Laravel
Tags: laravel, php, ubuntu, programming
Published: 2021-10-29 03:28:38

In this tutorial I will give you how to check RAM and CPU usage in laravel. In PHP in-built function are available for checking CPU and RAM usage. Many time we require to check how much RAM and CPU usage of consumption in server if we have not code then we need to check manually every time.

So, here I will give you example of RAM and CPU usage in laravel. you can get data of RAM and CPU usage in your adminpanel.

Let's start to implement CPU and Memory usage in Laravel

```
public function total_ram_cpu_usage()
{
        //RAM usage
        $free = shell_exec('free'); 
        $free = (string) trim($free);
        $free_arr = explode("\n", $free);
        $mem = explode(" ", $free_arr[1]);
        $mem = array_filter($mem);
        $mem = array_merge($mem);
        $usedmem = $mem[2];
        $usedmemInGB = number_format($usedmem / 1048576, 2) . ' GB';
        $memory1 = $mem[2] / $mem[1] * 100;
        $memory = round($memory1) . '%';
        $fh = fopen('/proc/meminfo', 'r');
        $mem = 0;
        while ($line = fgets($fh)) {
            $pieces = array();
            if (preg_match('/^MemTotal:\s+(\d+)\skB$/', $line, $pieces)) {
                $mem = $pieces[1];
                break;
            }
        }
        fclose($fh);
        $totalram = number_format($mem / 1048576, 2) . ' GB';
        
        //cpu usage
        $cpu_load = sys_getloadavg(); 
        $load = $cpu_load[0] . '% / 100%';
        
        return view('details',compact('memory','totalram','usedmemInGB','load'));
}
``` 

---

> **_[Read More : How To Check Occupied Disk Space In Laravel](https://techsolutionstuff.com/post/how-to-check-occupied-disk-space-in-laravel)_**
 
---

And create details.blade.php and add below code for view. 

```
<html>
<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="col-sm-6 col-md-3">
    <h2 class="no-margin text-semibold">Current RAM Usage</h2>
    <div class="progress progress-micro mb-10">
      <div class="progress-bar bg-indigo-400" style="width: {{$memory}}">
        <span class="sr-only">{{$memory}}</span>
      </div>
    </div>
    <span class="pull-right">{{$usedmemInGB}} / {{$totalram}} ({{$memory}})</span>  

  </div>

  <div class="col-sm-6 col-md-3">
    <h2 class="no-margin text-semibold">Current CPU Usage</h2>
    <div class="progress progress-micro mb-10">
      <div class="progress-bar bg-indigo-400" style="width: {{$load}}">
        <span class="sr-only">{{$load}}</span>
      </div>
    </div>
    <span class="pull-right">{{$load}}</span>   
  </div>

</body>
</html>
```

---

You might also like :

> **_[Read More : How To Integrate Paypal Payment Gateway In Laravel 8](https://techsolutionstuff.com/post/how-to-integrate-paypal-payment-gateway-in-laravel-8)_**
Ortelius - Simplifying The Implementation of Microservices
Tags: opensource, javascript
Published: 2021-10-29 03:24:12

## My Third PR
For my Third PR, I decided to take a bigger project, but with a simpler issue. I wanted to understand better how to participate in a project with multiple branches, dev branches and with CLA Licenses.

## The Issue
The Issue I decided to work on was [This one]( https://github.com/ortelius/ortelius/issues/403).
The Issue was basically very simple, the author of the issue already told me what to do and where to do so I just had to follow its instructions.
The problem I had when solving this was that I followed the project guide to contribute, which send me to the main branch, but I had to find which branch I should be working on by myself, as the main branch was several commits behind the dev branch.

## CLA
For this project, in order to have my PR accepted I had to sign an Individual Contributor License Agreement. 
Basically it grants the ownership of the project and contributors works to the owner.
More about CLA can be read [Here]( https://en.wikipedia.org/wiki/Contributor_License_Agreement).

## Finally
It was really interesting to be part of a bigger project with so many branches.
Finding what I needed to change took me sometime due to the lack of details on the issue but eventually I made it.
It was really interesting to see how github can block a PR if the CLA is not signed too.
Step Zero for the Most Awesome Game in the World
Tags: beginners, python, gamedev
Published: 2021-10-29 03:24:10

Ok, sorry, I wrote that title because my prompt starts as:
> *Your blog post should include the following:*
> *1. A compelling title about your program*

I made this Connect Four game as my final project for Unit 1 of the online course I'm taking. It allows two players to play against each other and shows the suspended grid visually.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ag1638wsczki8yh2wdi.png)

If you are interested, you can find my game here: https://github.com/aaw707/Connect-Four
Any feedback or suggestion will be appreciated :)

This is the first time I wrote a functioning script from start to finish. Before I've mostly worked in Jupyter Notebooks and online compliers , which makes me feel intimidated by creating script files...

I learned python as I was aiming to become a data analyst earlier, but lately I'm intrigued by the dev part and let curiosity take me here..! And yes, there is the possibility that this script is my step zero to become an awesome game developer and create the best game in the world!
A minimal assembly program
Tags: assembly, nasm, x86
Published: 2021-11-06 12:51:28

---
title: A minimal assembly program
published: true
date: 2021-10-29 00:00:00 UTC
tags: assembly,nasm,x86,assembly
canonical_url: https://www.mourtada.se/minimal-assembly-program/
---

This is the second post about x86 assembly. In the previous post I described how to compile a hello world program. In this post i will go through and even smaller program.

## Minimal example

```
          global _start

          section .text
_start: mov rax, 60 ; system call for exit
          mov rdi, 0 ; exit code 0
          syscall ; invoke operating system to exit

```

This programs doesn’t print any output and only sets an exit code. If the program doesn’t set an exit code the program will crash with a `Segmentation fault` error.

## Sections

There is only one section in this program called `.text`. Here you put your source code which is readonly when the program is ran. Sections is used by the assembler to group data and code in different locations in memory. For example in the `hello world` example we had a section called `.data` which we initialized a constant sequence of bytes.

## Labels

There is also only one label in this program called `_start`. A label can be seen as pointer to an instruction in memory. A label can then be used as a reference in code to run a specific block of code(almost like a function call). The label `_start` has a special meaning for the linker `ld` and that is where an executable will start executing instructions.

## Global keyword

The global keyword tells the assembler that this label should be able to be referenced outside of this assembly file. It’s mostly like exporting a function in high level languages.

## Instructions

The syntax for operations is `opcode <operand>, <operand>`. We first have an opcode which tells the cpu what we want to do and with which operands.

The instruction `mov rax, 60` tells the CPU to move the decimal constant value 60 to a CPU general-purpose register called `rax`. When an operand is constant value like above it’s called immediate addressing. CPU registers are small high-speed memory locations in the CPU.

## Syscall

The syscall is a special operation that tells the CPU that the program wants to talk to the operating system. The program halts and the operating system takes over and reads the `rax` register for the syscall number which in linux 64bit is the syscall for `exit`. The `rdi` register where we put `0` holds the value for the exit code. When a syscall is done the program usually resumes executing but not in this case as we told the operating system that we wanted to exit.
Release0.2 week four
Published: 2021-10-29 03:06:08

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The difficulty of this project is to be fast. The owner don't assign the issue to anyone and he only accept and merge the first PR that fixes correctly and well implements the issue following our contributing guidelines. So I must understand the project and the issue ASAP. At the same time, I have to upload the PR fist.
###About the project
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [MeiliSearch](https://github.com/meilisearch/MeiliSearch) is a powerful, fast, open-source, easy to use and deploy search engine. Both searching and indexing are highly customizable. Features such as typo-tolerance, filters, and synonyms are provided out-of-the-box.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqk4009sv5tgfsywla2k.gif)
###About the issue
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In the API Reference, the examples for the distinct attributes are introduced with movie_id which is the primary key of the index. The MeiliSearch hits are always distinct according to the unique identifier: so the primary key is the only attribute you will never put as a distinct attribute. It does not help to understand the purpose of a distinct attribute. The issue would like to apply some changes in the .code-samples.meilisearch.yaml file at the root of the repository
### How to do
**First**, Look for the get_distinct_attribute_1, update_distinct_attribute_1 and reset_distinct_attribute_1 in the .code-samples.meilisearch.yaml file, then change the index parameter from 'movies' to 'shoes'.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5i6bbfh4xqz5960eokl.png)

**Second**, Find the update_distinct_attribute_1 in the in the .code-samples.meilisearch.yaml file, then change the from "movie_id" to 'skuid'![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0trh39f2au9gix1eqh65.png)
###Reflection
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The ability to read and understand code structures and issue is very important because the owner only accept and merge the first PR that fixes correctly and well implements the issue following our contributing guidelines. In the future, I must improve my reading comprehension speed.
OSD600 - LAB 06
Tags: opensource, javascript, beginners
Published: 2021-10-29 03:00:36


For this lab our goal was to understand how to use the Docusaurus, pick a feature from it and start to implement it into our SSG.

## The Feature
For my SSG, I decided to go with the Full Markdown support. [Issue #16]( https://github.com/GMOTGIT/GMOT-SSG/issues/16)
The Full Markdown support consists in making the SSG able to parse all markdown into HTML.
As described in LAB 06, I could use a open source library to help me with that.

## Markdown-it
Markdown-it was the library I have chosen to help me with the parsing task.
The library was really intuitive and easy to use.
The steps I had to take  were:
Install:
```
npm install markdown-it --save
```
Code:
```JavaScript
var md = require('markdown-it')();
var result = md.render('# markdown-it rulezz!');
```

So in My SSG I just had to remove my old MD parsing method for this new one.
The PR is here: [PR #17]( https://github.com/GMOTGIT/GMOT-SSG/pull/17)

## Finally
The markdown-it was really useful and saved me a lot of time, thanks to it I am able to think about implementing other features to my SSG.
code every with me
Tags: javascript, programming, 100daysofcode, algorithms
Published: 2021-10-29 02:48:45

##--DAY 11--
Hi, I am going to make #100DaysOfCode Challenge. Everyday I will try solve 1 problem from leetcode or hackerrank. Hope you can go with me until end.
**Now let's solve problem today:**
-Problem: Length of Last Word
-Detail: [here](https://leetcode.com/problems/length-of-last-word/)
-Idea: I will use string string method in javascript to solve it
  +) Use `split()` to split string into array
  +) `trim()` to remove space of the last word
  +) Return it's length
  ->So simple, right?
-My solution (javascript):
```
var lengthOfLastWord = function(s) {
    s=s.trim().split(' ');
    return s[s.length-1].trim().length;
};
```
-->*If you have better solution or any question, please comment below. I will appreciate.*
HTML vs CSS vs JS - Differences✍
Tags: html, css3, javascript
Published: 2021-10-29 02:17:56

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zxk0c10jxhywbzzs4gp.png)
👉 HyperText Markup Language (HTML), determines how documents and web pages are displayed in a web browser, the language for the building blocks of any website.
⭐ HTML controls the layout of the content.
⭐ It provides structure for the web page design.
⭐ And it's a building block of any web pages.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zeymsqfytzrkwocmapyl.png)
👉 Cascading Style Sheet (CSS), it determines how a document created in HTML is styled. For Example - colors, fonts, grid, flexbox, layout and responsive features.
⭐ Applies style to the web page elements.
⭐ It varies screen sizes to make web pages more responsive.
⭐ Overall, CSS handles the look and feel of a web pages.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b42i5mvs5v1v6yc1fdwt.png)
👉 JavaScript(JS), allows you to change both HTML and CSS elements on our website after the site has been loaded, which gives you the ability to make your site more interactive and engaging for users.
⭐ JS adds more interactivity to our web page.
⭐ It handles complexity of functions i.e. how our web page responds while using.
⭐ User friendly for our clients.
Release0.2 week three
Published: 2021-10-29 01:52:19

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This project is very challenging because I need to know some knowledge about Algorithms. The project named [Fliscopt](https://github.com/Yoda-Canada/fliscopt), and it is a simple optimization library for flight scheduling and related problems in the discrete domain. The library supports plotting, asynchronous multiprocessing, and unimodal optimization benchmarks. 
###The issue
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The [issue](https://github.com/Agrover112/fliscopt/issues/35) need to add error message for failed unittests. A message indicating a failure for each unit-test, should give the user a small idea of what went wrong in the test. ex:self.assertEqual ( f(values), 0, msg ='HEURISTIC MESSAGE INDICATING WHY TEST CASE FAILED')
###How to do
**First**, understand the testing structure and find the files which need to add error messages. I learned some automation testing knowledge and all test files saved in the tests folder. The run_pypy-tests.sh and run_tests.sh files implement automated testing! The test_algorithms.py, test_chaining.py and test_fitness.py need to add error messages.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dap2vrfu96ifnf8bu7tf.png)
**Second**, learned the algorithms and decided how to write the error message. This project has about a dozen algorithms, and they have different dimensions, input domain and global minimum. Here are three-dimensional images of several functions.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26nc441wh6ugf665xwma.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7glukuolv8bxhylv66w0.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00lo95huwcq9lsu9peic.png)
**Three**, according to different dimensions, input domain， global minimum and the different positions of the matrix, try to write a draft of the wrong information. Complete the task after repeated discussion and confirmation with the owner.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qlyu3p0fk714s0ie36x.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51udasm8xz4sv51mkblm.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84qk74kie0os4zzj5hup.png)
###Reflection
1. I learned some methods to write automation test code. I can try to do the automation testing work in the future.
2. Learned some knowledge about some functions of the algorithm. Although the task was difficult, I was successfully completed through communication with the owner.