teleren/devto huggingface dataset:
npm i @dev_hills/easyroute,my awsome routing React library
Tags: react, npm, node, javascript
Published: 2021-06-26 02:04:00

   Hey developers about few days ago i made a post on my upcoming npm package and today i am here to announce that it is up and kicking

  My own React library, i should say i am a bit excited thou.

  no more hasle in setting up page routes as easyroute is here to save you time

simply run npm i @dev_hills/easyroute

or yarn add @dev_hills/easyroute

visit  for more info on its usage --> https://www.npmjs.com/package/@dev_hills/easyroute
Ten Ruby gems for Rails you should definitely know about
Tags: rails, ruby
Published: 2021-06-26 02:00:34

Whenever I join a new project, I love scooping through their Gemfile and digging about. It's kind of like looking through someone else's apartment only to discover that essential oil diffusers are a thing *Those things are amazing!*. Weirdly voyeuristic, but incredibly useful to discover new things. 

Over the years, I've found that many of us don't know about popular gems that could be of help to us. So here is my list of ten gems you should know about if you don't already. Well, if you already know of them, you've just wasted a few minutes of your life...

# [Kaminari](https://github.com/kaminari/kaminari)

Kaminari hooks onto ActiveRecord associations and makes it super easy to page them. [Pagy](https://github.com/ddnexus/pagy) is another option that seems to have a solid API but I haven't tried it yet.

# [Counter Culture](https://github.com/magnusvk/counter_culture)

If you've ever used Rails counter caches (basically help you keep track of the number of related records in a database) but found sometimes you need something a little different. For example, you needed to track the sum of the values in a different table instead of a count of records, then counter culture is for you. I've used it on many projects and it's been rock solid. 

# [LightService](https://github.com/adomokos/light-service)

LightService is my favorite gem for organizing business logic. If you've ever heard about railway programming, that's basically what this gem helps you do. Again, used it for years with no issues.

# [Geocoder](https://github.com/alexreisner/geocoder)

This is hands down the best gem to use if you're trying to convert locations to latitude / longitude coordinates or vice versa. It supports a wide variety of APIs, like Google, etc.

# [Lockbox](https://github.com/ankane/lockbox)

This gem is just too good. It makes it crazy seamless to encrypt the contents of a database field. However, ActiveRecord basically gets to behave as if it's not encrypted. 

# [Money-Rails](https://github.com/RubyMoney/money-rails)

Money or as I like to call it...*monies*. Money rails gives you great tools to manage money and multiple currencies straight up in your Rails application. 

# [ViewComponent](https://viewcomponent.org/)

ViewComponent is GitHub's take on expanding upon the partials system in Rails. ViewComponents are a great adaptation to bring the component model that's so common in front end architecture to Rails.

# [StrongMigrations](https://github.com/ankane/strong_migrations)

Strong migrations runs some linters on your database migrations to make sure you structure your database correctly. It has made I don't shoot myself in the foot many times.

# [Phony Rails](https://github.com/joost/phony_rails)

Just like the `money-rails` gem above, this gem is all about phone numbers. It makes it really easy to track area codes and standardizes your database to always save phone numbers in the IETF format. Trust me, just use it. 

That's it

Wait, you say that's only 9 gems. What can you do? Off by one errors...
Convert German laws from XML to text using XSLT
Tags: xslt
Published: 2021-06-26 16:00:10

---
title: Convert German laws from XML to text using XSLT
published: true
date: 2021-06-26 01:33:14 UTC
tags: xslt
canonical_url: https://ofdigitalwater.postach.io/post/convert-german-laws-from-xml-to-text
---

For a small project, I needed to convert German laws, found at https://www.gesetze-im-internet.de/, from XML format to text format.

The XML format is described [here](https://www.gesetze-im-internet.de/hinweise.html) and is defined by [this DTD file](https://www.gesetze-im-internet.de/dtd/1.01/gii-norm.dtd).

The source code in the following XSL file is pretty straight-forward. Only adding newlines and indenting definition lists posed an additional challenge.

{% gist https://gist.github.com/wincentbalin/bd62c3a8e5a82b42d6c29124acaf352b %}
How to make a table in C++
Tags: c, code
Published: 2021-06-26 01:09:20

**Content**
How to create a multiplication  table in c++
Print Table of any number in C++
Concept
Explanation of Program
Summary 
Article Tags
 

**“How to create a multiplication table in C++”**

If you want to learn programming and are learning C ++, you will also know what things you will be able to create after learning it. For a small example you can make a calculator out of it.  You can also print a table. Our goal today is to print any table in C ++. First of all, you have to understand the sequence of the table and how it is written.  Procedures We have to write in our program. To write this program we need a loop.

**Print Table of any Number in C++**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdy1hg3mx7s44wsfgdds.png)


Dear student arithmetic factors are the most used component of any high level language.  Is used a lot. The arithmetic factors are actually a combination of operators and expressions. When we create a program in which the table has to be printed.  Let me show you how to create a program that will help you better understand how to create it and how to use for loop.


(Concept)
num * 1
num * 2
num * 3
num * 4
num * 5
num * 6
num * 7
num * 8
num * 9
num * 10

**Explanation of Program**
```
#include <iostream>
using namespace std;
int main()
{
  int i,a;
  cin>>a;
  for(i=1;i<=10;i++)                                
  {
    cout<<a<<" x "<<i<<" = "<<(a*i)<<endl;
  }
  return 0;
}

         OUTPUT 
5
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50
```
**Summary:**

Today we are understand to kodlogs website, I try to explain how to make a table in c++. I hope after reading this article you will be able to understand the table in c++.I would like to have feedback from my kodlogs site. Please post your feedback, question, or comments about this article.

 Article Tags 
C#|Python |Python 3|pycharm | html|java|JavaScript |cpp|code|rubi|Network | Google |html5 |php|bootstrap |string |Microsoft |variable |syntax |Coders |Codinglove|
Computerscience|wordpress|html-page|php|
Xml|game| net| list | loop | integer |float | string | double
How to get the id of a dynamic route with Nextjs getServerSideProps
Tags: nextjs
Published: 2021-06-26 01:08:12

## Things to do

Normally, in order to get the id 1 in Next.js dynamic routing (post/1), you can write the following to get the value.

```js
const { id } = router.query;
```

How do I get this in getServerSideProps?

```js
export async function getServerSideProps(context) {
```

You can do the following to get it.

```js

export async function getServerSideProps(context) {
  const { id } = context.query;
```

## Reference.

[Dynamic routing with getServerSideProps in Nextjs](https://stackoverflow.com/questions/61222726/dynamic-routing-with- getserversideprops-in-nextjs)

[How to get the id of dynamic routing with getServerSideProps in Nextjs](https://off.tokyo/blog/dynamic-routing-with-getserversideprops-in-nextjs/)
Test Asynchronous Calls With the Jest
Tags: testing
Published: 2021-06-26 00:54:22


It's common in JavaScript for code to run asynchronously. When you have code that runs asynchronously, Jest needs to know when the code it is testing has completed, before it can move on to another test. Jest has several ways to handle this.

Asynchronous calls don’t block or wait for calls to return. After the call is made, program execution continues. When the call returns, a callback function is executed. It’s hard to test asynchronous calls due to the asynchronous nature.

##Callback-based asynchronous calls

### The Problem of Asynchronous Calls
The following is a unit test case for an asynchronous call
<pre>
describe('test asynchronous call', () => {
  it('this should not pass', () => {
    setTimeout(() => {
      expect(1).toBe(2);
    });
  });
});

</pre>

Apparently, 1 isn’t 2, but the test passes.
setTimeout is called and returns. The test finishes before  inside the  setTimeout is  executed. No error is found before the test exits — therefore, the test case passes.
 
###The fix: Use the ‘done’ callback
We can fix this issue by waiting for setTimeout to finish.
<pre>
describe('test asynchronous call', () => {
  it('this should not pass', done => {
    setTimeout(() => {
      expect(1).toBe(2);
      done();
    });
  });
});
</pre>
We pass in Jest’s done callback to the test case and wait for setTimeout to finish. And then we invoke done() to tell Jest it can exit now. With the help of the done callback, this test case fails as expected.

##Test Promise-Based Asynchronous Calls
If your code uses promises, there is simpler way to handle asynchronous tests. Return a promise from your test, and Jest will wait for that promise to resolve. If the promise is rejected, the test will automatically fail.

For example, let's say that fetchData returns a promise that is supposed to resolve to the string 'peanut butter'. We could test it with:
<pre>
test('the data is peanut butter', () => {
  return fetchData().then((data) => {
    expect(data).toBe('peanut butter');
  });
})
</pre>
Be sure to return the promise - if you omit this return statement, your test will complete before fetchData completes.

##Conclusion
We have explored the main asynchronous patterns on JavaScript and the ways to test them with Jest.
ruby-grahql: generating schema definition file
Tags: graphql, ruby, rails, schema
Published: 2021-06-26 00:48:16

---
title: ruby-grahql: generating schema definition file
published: true
description: 
tags: graphql, ruby, rails, schema
---

While developing your GraphQL api using [graphql-ruby](https://graphql-ruby.org/) you will probably come across the need of generating the schema definition file from the schema you defined in your code, so other front-end client would be able to consume it, or generate types automatically based on that schema.

There is this [github issue](https://github.com/rmosolgo/graphql-ruby/issues/2501), where [this comment](https://github.com/rmosolgo/graphql-ruby/issues/2501#issuecomment-536199861) outlines how you can accomplish the code generation. I couldn't make the same example work in my code so I came up with another solution.

It will also involve what was implemented in [this example](https://github.com/howtographql/graphql-ruby/blob/master/lib/tasks/graphql.rake) from https://howtographql.com.

We'll define a custom rake task and a rake task from the ruby-graphql package.

Start by creating the file `lib/taks/graphql.rake`. 

The file itself will be really simple:

```ruby
require "graphql/rake_task"
require "rake"

GraphQL::RakeTask.new(
  load_schema: -> (_task) {
    require_relative '../../app/graphql/dcms_schema'
    DcmsSchema
  }
)

namespace :graphql do
  task export: :environment do
    Rake::Task["graphql:schema:dump"].invoke
  end
end
```



So, first we are requiring `graphql/rake_task` so we can declare a graphql rake task and require `rake` to be able to invoke a rake task from within the file.

Here we declare the rake task called `graphql:schema:dump`. Inside the `load_schema` callback we require our schema definition file and return the schema class at the end of the callback.

```ruby
GraphQL::RakeTask.new(
  load_schema: -> (_task) {
    require_relative '../../app/graphql/dcms_schema'
    DcmsSchema
  }
)
```



After declaring the graphql rake task, we create our custom task by doing the following:

```ruby
namespace :graphql do
  task export: :environment do
    Rake::Task["graphql:schema:dump"].invoke
  end
end
```

Inside it, we are simply calling the rake task we previously defined with `Rake::Task["graphql:schema:dump"].invoke` 

Now, in the terminal we are able to execute our rake task by typing the following

```:bookmark_tabs:
$ rake graphql:export
```

If all works, you should be able to see two files: `schema.graphql` and `schema.json` in the root of your project.

You can check the rake tasks documentation for graphql-ruby here: https://graphql-ruby.org/api-doc/1.9.12/GraphQL/RakeTask
Code should read like poetry
Tags: code, cleancode, style
Published: 2021-06-28 06:49:37

---
title: Code should read like poetry
published: true
date: 2021-06-26 00:00:00 UTC
tags: code,cleancode,style
canonical_url: https://jhall.io/archive/2021/06/26/code-should-read-like-poetry/
---

Good code should be easy for people to read. As Martin Fowler says: “Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”

How do you know if humans can understand your code?

A good friend once told me: “Good code should read like poetry.”

I guess poetry itself is subjective, but I like this idea. When you read your code, it should have certain patterns and rythms that make it easy to read and understand.

Short functions, descriptive names, consistent formatting.

Now it almost sounds like I’m describing Haiku…?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to stop an Nginx server or service in Linux?
Tags: resource
Published: 2021-06-26 00:00:00

---
  title: How to stop an Nginx server or service in Linux?
  published: true
  tags: Resource
  date: Sat Jun 26 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/stop-nginx-server-service-linux
  cover_image: https://melvingeorge.me/_next/static/images/main-209093c86b8ffc0dc29452974719bb14.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/stop-nginx-server-service-linux)
  
To stop an Nginx server or service, we can use the `systemctl` command-line utility followed by the `stop nginx` command in Linux.

```bash
# Stops Nginx service
sudo systemctl stop nginx
```

### What is `systemctl`?

- The `systemctl` is a command-line utility that is used to control and manage the `systemd` services.
- It is widely used with web server services like Nginx, Apache, etc.

### Feel free to share if you found this useful 😃.

---
Indicadores de Estado con AutoHotKey
Tags: spanish, productividad, teclado, tutorial
Published: 2021-06-25 23:31:09

Idiomas: [🇺🇸] [English](https://dev.to/equiman/light-indicator-status-4jge) - [🇪🇸] [Español](https://dev.to/equimancho/indicadores-de-estado-con-autohotkey-49jl)

---

Si tu teclado o computadora no cuenta con indicadores luminosos AutoHotKey puede venir al rescate y con un simple script podremos conocer el estado de esas teclas modificadoras.

Crea un archivo llamado `key-indicator.ahk` con este script:

```cpp
~*CapsLock::
~*NumLock::
~*ScrollLock::
~*Insert::
Sleep, 10   ; drastically improves reliability on slower systems

msg := ""
msg := msg "Caps: " (GetKeyState("CapsLock", "T") ? "ON" : "OFF") "`n"
msg := msg "Num: " (GetKeyState("NumLock", "T") ? "ON" : "OFF") "`n"
msg := msg "Scroll: " (GetKeyState("ScrollLock", "T") ? "ON" : "OFF") "`n"
msg := msg "Insert: " (GetKeyState("Insert", "T") ? "ON" : "OFF")

ToolTip, %msg%
Sleep, 750  ; SPECIFY DISPLAY TIME (ms)
ToolTip     ; remove
return
```

Guarda el archivo y abrelo con AutoHotkey. Cada vez que cambies el estado de alguna de estas teclas vas a visualizar cerca del puntero del mouse un indicador.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ls81ne640b7hoeoij276.png)

---

Si estás usando la variante de `CapsLock` (Bloq Mayús) reemplázandola con `Backspace` (retorno) y des/activas el `CapsLock` con la tecla `Alt`.

```cpp
CapsLock::Backspace
!CapsLock::CapsLock ; Alt+CapsLock -> Enable/Disable Caps Lock
```

Debes cambiar la primera línea del script de `~*CapsLock::` a `~*!CapsLock::`.

---

**Fuentes:**

- [AHK Board - Another on screen caps lock indicator](https://autohotkey.com/board/topic/100990-another-on-screen-caps-lock-indicator/)

---

**That’s All Folks!**
**Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinsoftware)
Project Showcase GUI in python
Tags: python, learning, programming
Published: 2021-06-25 23:07:42

Today I just finished created a GUI application that can showcase my multiple micro projects that I completed. The ideas for the projects come from this github repo: https://github.com/karan/Projects.

#How the Application works
First to use the application the user must select one of the tabs. So far I have only created two categories for the projects completed.

![Tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0sdh54l9wg18huiunko.png)

Next the user must click on the drop down menu shown and select which project they wish to see in action.

![dropmenu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krodezgxo938f993uvah.png)

![dropmenu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnux01vewwyyh1hqqhvl.png)

Afterwards the user can then perform whatever action the project asks of them and see the results

![calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6vy2p7mk6w1ife0hq54.png)

![reverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuhtgvg7vfl30gsm1ph6.png)

Here is a link to my repo of the application if you wanna check it out! https://github.com/Rocky-Hoang-Le/projectshowcase
One liner to take page screenshots for your projects
Published: 2021-06-25 22:58:12

Did you ever have a need to take a screenshot of a page for your project? Did you consider using one of those paid screenshot taking API services? In 99% of use cases you don't need those.

### One liner
Ensure you have chrome or chromium installed

```
chromium --disable-gpu --bwsi  --disable-audio-output  --disable-logging  --disable-notifications  --disable-sync  --disable-smooth-scrolling  --headless  --window-size=1920,1080  --hide-scrollbars  --virtual-time-budget=10000  --incognito  --disable-accelerated-2d-canvas  --disable-accelerated-mjpeg-decode  --disable-accelerated-video-decode  --disable-accelerated-video-encode  --screenshot=screenshot.png  https://dev.to/
```

In the options I disable a number of parameters most likely not supported on VMs, like GPU acceleration and audio. I disable sync and load browser in headless, incognito mode.

#### Important params
**size=1920,1080** - Select the size in which the page will be rendered
**hide-scrollbars** - Let's make screenshot clean without scrollbars
**screenshot=screenshot.png** - Name of the screenshot file
**virtual-time-budget=10000** - Amount of time in ms that browser will let page to load before taking screenshot. Necessary for some heavy or SPA pages.

Final parameter is the url of the page to screenshot.

And that's all to it. That's how we do it at [pagereview.io](https://pagereview.io)
ddev 上 の mautic の dev 環境と debug について
Published: 2021-06-25 22:56:30

そろそろコードを読むだけではキツくなってきたので、動かしながら確認したくなってきた。

## dev 環境

[ENVIRONMENTS - Mautic Developer Documentation](https://developer.mautic.org/#environments)

> dev is used when accessing the site through index_dev.php
上記の通りで `index_dev.php` を通すだけで動作します。
例えば https://mautic.ddev.site/index_dev.php/s/dashboard のような感じです。

![2021-06-26_07h32_41](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3ba57s6dc5he6a2iljt.png)

### どうして Docker を通しているのに dev 環境で動作できるのか？
このドキュメントを読んで最初は ModHeader を入れて、 `MAUTIC_DEV_HOSTS` にコンテナからアクセスしている IP を設定して実行してみたのですが、それを ON にしても OFF にしても dev 環境が有効になったので不思議になったのでした。

> コンテナ内の mautic にアクセスしている IP は `ddev logs -s web -f` でログから調べました。
> `docker network inspect ddev_default` あたりで `ddev-router` を見てもよいかも。

### dev 環境の IP 判定
https://github.com/mautic/mautic/blob/features/app/middlewares/Dev/IpRestrictMiddleware.php#L58-L65

```php
if (in_array($request->getClientIp(), $this->allowedIps) || false !== getenv('DDEV_TLD')) {
    return $this->app->handle($request, $type, $catch);
}
```

`getenv('DDEV_TLD')` がポイントになっていて、 mautic の ddev をセットアップした時に生成される `.ddev-docker-compose-*.yaml` の `environments` に `DDEV_TLD: ddev.site` の記述があります。

この環境変数は名前の通りで ddev のもので以下の一覧にあります。
https://ddev.readthedocs.io/en/stable/users/extend/custom-commands/#environment-variables-provided
`DDEV_TLD: Top-level domain of project, like "ddev.site"`

どうやら、これだけで通過するようで、mautic の開発環境に ddev を使う人が多いことが伺えます。（まあ、ルートに `.ddev` がおいてあるんだから標準なんでしょうけど :sweat_smile: )

## debug

[Step-debugging with ddev and xdebug - DDEV-Local Documentation](https://ddev.readthedocs.io/en/v1.17.6/users/step-debugging/)

上記の ddev のドキュメントがほぼすべてです。

- `ddev xdebug on` を実行
- PhpStorm で break point を追加
- PhpStorm で `Start Listening for PHP Debug Connections` をクリック
- ブラウザで mautic のサイトを実行し break point の箇所に遷移

本当にこれだけでした :tada:

## 余談
最初は dev 環境は以下の記事を読んでいたのですが、ここ数年でもまあまあ変わっていることが分かりました。
- [Local Mautic development with DDEV](https://www.mautic.org/blog/developer/local-mautic-development-with-ddev)
Introduction to tree data structure 
Tags: algorithms, computerscience, beginners, codenewbie
Published: 2021-06-25 22:53:29

Hi, on this amazing day! we're going to talk about tree data structure, so let's get started!

## Definition of tree

A tree is a nonlinear data structure unlike Stack, Queue, Array, and Linked List, It is a collection of nodes connected with **edges**

## Properties of tree

+ Root: *parent node* is the first (top) node of the tree.
+ Parent: node has children
+ Child: node has a parent 
+ Siblings: nodes have the same parent
+ Leaves: last nodes of the tree
+ Depth: length of edges from a node to the root
+ Height: length of the longest path from a node to a leaf
+ Edge: link two nodes

![tree data structure Aya Bouchiha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3g9ko0vqoh9vryh2jbpv.jpg)


## References and useful resources
+ [https://www.freecodecamp.org/news/all-you-need-to-know-about-tree-data-structures-bceacb85490c/](https://www.freecodecamp.org/news/all-you-need-to-know-about-tree-data-structures-bceacb85490c/)
+ [https://www.google.com/url?sa=t&source=web&rct=j&url=https://www.programiz.com/dsa/trees&ved=2ahUKEwiVy4TcsrPxAhXC8-AKHb_tDHYQFjAnegQIRxAC&usg=AOvVaw1zWsV1g-7GgAmP97ri-G9n](https://www.google.com/url?sa=t&source=web&rct=j&url=https://www.programiz.com/dsa/trees&ved=2ahUKEwiVy4TcsrPxAhXC8-AKHb_tDHYQFjAnegQIRxAC&usg=AOvVaw1zWsV1g-7GgAmP97ri-G9n)
+ [https://www.google.com/url?sa=t&source=web&rct=j&url=https://www.geeksforgeeks.org/binary-tree-data-structure/&ved=2ahUKEwiVy4TcsrPxAhXC8-AKHb_tDHYQFjAmegQIShAC&usg=AOvVaw3GgvSIZH7aOmawSCQQvYSh](https://www.google.com/url?sa=t&source=web&rct=j&url=https://www.geeksforgeeks.org/binary-tree-data-structure/&ved=2ahUKEwiVy4TcsrPxAhXC8-AKHb_tDHYQFjAmegQIShAC&usg=AOvVaw3GgvSIZH7aOmawSCQQvYSh)
+ [https://youtu.be/qH6yxkw0u78](https://youtu.be/qH6yxkw0u78)

\#day_13