teleren/devto huggingface dataset:
Are we web yet in Nim world?
Tags: web, nim, prologue
Published: 2020-10-07 01:54:50

There are some elegant web frameworks in Nim language. Let's look at the most active one -- [Prologue web framework](https://github.com/planety/prologue). You can join in the [discord server](https://discord.com/invite/e2dB4WT) to learn this web framework.


## Documentation

* [Documentation](https://planety.github.io/prologue)

* [Core API docs](https://planety.github.io/prologue/coreapi/theindex.html)

* [Plugin API docs](https://planety.github.io/prologue/plugin/theindex.html)

* [Additional examples repository](https://github.com/planety/prologue-examples)

## External plugins

### Command line tools

* [logue](https://github.com/planety/logue)

### Websocket

* [websocketx](https://github.com/xflywind/websocketx)

### Template engine

* [nim-templates](https://github.com/onionhammer/nim-templates) A simple string templating library for Nim.

* [nimWebTemplates](https://github.com/enthus1ast/nimWebTemplates) Experiment to build a jinja like template parser.

* [nim-html-dsl](https://github.com/juancarlospaco/nim-html-dsl) Nim HTML DSL.

* [karax](https://github.com/pragmagic/karax) Single page applications for Nim.

* [smalte](https://github.com/roquie/smalte) - It is a dead simple and lightweight template engine. Specially designed for configure application before start in Docker.


### ORM

* [norm](https://github.com/moigagoo/norm) A Nim ORM.

* [ormin](https://github.com/Araq/ormin) An ORM for Nim.

* [nim-gatabase](https://github.com/juancarlospaco/nim-gatabase) Connection-Pooling Compile-Time ORM for Nim.

* [nim-allographer](https://github.com/itsumura-h/nim-allographer) A query_builder/ORM library inspired by Laravel/PHP and Orator/Python for Nim.

### Async database driver

* [nimongo](https://github.com/SSPkrolik/nimongo) - Pure Nim lang MongoDB driver.

* [asyncpg](https://github.com/cheatfate/asyncpg) - Asynchronous PostgreSQL driver for Nim language.

* [pg](https://github.com/treeform/pg) - Very simple PostgreSQL async api for nim.

* [amysql](https://github.com/bung87/amysql) - Async MySQL Connector write in pure Nim.

* [anonimongo](https://github.com/mashingan/anonimongo) - Another Nim pure Mongo DB driver.

* [redis](https://github.com/nim-lang/redis) - Official redis wrapper for Nim.

### Auth

* [nim-httpauth](https://github.com/FedericoCeratto/nim-httpauth) - HTTP Authentication library for Nim.

* [oauth](https://github.com/CORDEA/oauth) - OAuth library for Nim.
How did I make a Simple Interactive Circular Chart - 1
Tags: javascript, css, webdev, ux
Published: 2020-10-07 01:31:20

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ilr51pre6zyyf49epoh5.gif)

### Draw Arc Lines

First of all, you need to draw Arcs to form up a circular chart.
There is a mathematical theory to draw polar points.

```
function polarToCartesian(centerX, centerY, radius, angleInDegrees) { // Point of Polar
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)) + setViewportX,
    y: centerY + (radius * Math.sin(angleInRadians)) + setViewportY
  };
}
```

Then draw the start and endpoints of the Arc with radius, call describeArc() method to finish drawing Arc.

```
function describeArc(x, y, radius, startAngle, endAngle) {
  var start = polarToCartesian(x, y, radius, endAngle);                                                                              
  var end = polarToCartesian(x, y, radius, startAngle);

  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

  var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  ].join(" ");

  return d;
}
```

The title of each section of the circle has an order - Clockwise and vice versa.
As a result, you need to define the flag for direction.
Tips for writing npm-scripts in npm-run-all for different purposes.
Tags: webdev, javascript, npm, node
Published: 2020-10-07 00:07:04

- The **npm-scripts** are used in `package.json` for task processing in web development.
- We also use **npm-run-all**, which is useful for serialization and parallelization of multiple processes.
- Therefore, we'll use it to illustrate a small technique to make npm-scripts **flexible and clear**.

## Result
- A description of the results is given first.
- The following `package.json` is a task to mainly build and watch.
```json
{
  "scripts": {
    "build"      : "run-s build:{sass,ts}",
    "build:sass" : "sass input.scss output.css",
    "build:ts"   : "tsc main.ts",
    "watch"      : "run-s watch:{sass,ts}",
    "watch:sass" : "sass --watch input.scss output.css",
    "watch:ts"   : "tsc -w main.ts"
  }
}
```

## Description
- The method used here is to specify what to do with **the process in braces**.

### Specification using braces
- There are three ways to execute a task classified by group in a colon (:) in a single session.
  - **build-basic**
  - **build-glob**
  - **build-brace**

```json
{
  "scripts": {
    "build-basic" : "run-s build:sass build:ts",
    "build-glob"  : "run-s build:*",
    "build-brace" : "run-s build:{sass,ts}",
    "build:sass"  : "sass input.scss output.css",
    "build:ts"    : "tsc main.ts",
  }
}
```

- From these I use the method specified in braces, such as **build-brace**.
- The benefits are as follows.
  - unduplicated
      - There is no duplication of tasks like `run-s build:sass build:ts`, and if the number of tasks increases in the future, you only need to describe the purpose of the task.
  - clarification
      - Compared to an asterisk specification such as `run-s build:*`, the explicit description makes the process easier to understand.
  - ordering
      - The processes are performed in the order of the braces, so even if you reverse `build:sass` and `build:ts` in `package.json`, there is no problem.
          - If you use `run-s build:*`, the order of processing is the same as the order in `package.json`, which may cause a problem if you use it in reverse.

## Conclusion
- The above reminded us of the importance of readability, clarity, and non-overlap in the task as well.

## Link
- [npm-run-all](https://github.com/mysticatea/npm-run-all)
- [Example of package.json](https://www.mitsue.co.jp/knowledge/blog/frontend/202004/14_1408.html)
SwiftUI Import/Export files - Part 2
Tags: swift, swiftui
Published: 2020-10-10 12:16:39

---
title: SwiftUI Import/Export files - Part 2
published: true
date: 2020-10-07 00:00:00 UTC
tags: swift,swiftui
canonical_url: https://blog.rizwan.dev/blog/swiftui-import-export-files-part-2
---

There were lots of changes this year during the Xcode and iOS beta. Typically we will get major new features on initial beta and subsequent beta will have only bug fixes. This year is a little bit different, we even got changes to Swift UI at the end of the beta cycle.

Beta 6 made a change for SwiftUI import/export files. Instead of environment variable now its a modifier. My [previous](https://dev.to/rizzu26/swiftui-import-export-files-18e3) blog post is outdated and now that Xcode 12 is out, I guess these needs follow up post.

## Importing

To import file, we have to use the `fileImporter` modifier. There is no limit where you have to use this modifier. It’s working same as presenting sheets before.

```swift
.fileImporter(
      isPresented: $viewModel.isImporting,
      allowedContentTypes: viewModel.importingContentTypes,
      allowsMultipleSelection: true,
      onCompletion: { result in
        if let urls = try? result.get() {
          // you can do with the file urls here
        }
      }
    )
```

The parameters were self-explainable. It takes

- a `Binding<Bool>` for presented statues
- an array of content types `[UTType]`
- a bool to allow multiple selections while importing
- a completion block when the import is success

## Exporting

To export files, we have to use the `fileMover` modifier.

```swift
.fileMover(isPresented: $viewModel.isExporting,
           file: viewModel.generateExportURL()) { _ in }
```

File mover takes a `Binding<Bool>` for presented status and the URL of the file which needs to be exported.

In case, if you would like to know a working example, take a look at [this](https://github.com/Ranchero-Software/NetNewsWire/pull/2384/files) PR I have raised for NetNewsWire app.
Peek Operation in Stacks and Arrays in JavaScript
Tags: javascript
Published: 2020-10-07 00:00:00

---
  title: Peek Operation in Stacks and Arrays in JavaScript
  published: true
  tags: JavaScript
  date: Wed Oct 07 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/peek-operation-arrays-stacks-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-0083860d81e0924dd5a9bd469cdf7bdb.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/peek-operation-arrays-stacks-javascript)
  
The `peek()` method is used to only view the last element of an array or view the recently added element in a stack data structure.

Unfortunately, there is no method called `peek()` in the `Array` object. We have to implement it ourselves in JavaScript.

All we have to do is get the last element but do not remove it.

It can be done like this,

```javascript
const lastElement = array[array.length - 1];
```

But if you want to add this as a method to the `Array` object, you have to add this as a method to the `Array` prototype chain.

So let's add our `peek()` method to the `Array` prototype chain,

```javascript
// Adding peek method to the Array
// prototype chain
Array.prototype.peek = function () {
  if (this.length === 0) {
    throw new Error("out of bounds");
  }
  return this[this.length - 1];
};
```

The function first checks whether the length of the array is `0`, If it is `true` then it will make an Error, if its `false` then it will return the last element.

Now you can use the `peek()` method just like how you would use the `push()`, `pop()` array methods.

```javascript
// Adding peek method to the Array
// prototype chain
Array.prototype.peek = function () {
  if (this.length === 0) {
    throw new Error("out of bounds");
  }
  return this[this.length - 1];
};

// array
const arr = [1, 2, 3, 4, 5, 6];

// peek() method
const element = arr.peek();
console.log(element); // 6
```

See this example live in [JSBin](https://jsbin.com/huvegataji/edit?js,console).

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

---
Chain of Responsibility Pattern
Tags: designpatterns, java, pattern, behavioral
Published: 2020-10-06 23:22:00

Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Chain the receiving objects and pass the request along the chain until an object handles it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pbpnbhp6zlybicrsqbyn.gif)

#Participants#
* Handler: defines an interface for handling the requests.
 (optional) implements the successor link
* ConcreteHandler: handles requests it is responsible for. Can access its successor. If the ConcreteHandler can handle the request, it does so; otherwise, it forwards the request to its successor.
* Client: initiates the request to a ConcreteHandler object on the chain.

#Code#
```java
public class Main {

	public static void main(String[] args) {
		Handler h1 = new ConcreteHandler1();
		Handler h2 = new ConcreteHandler2();
		Handler h3 = new ConcreteHandler3();
		h1.setSuccessor(h2);
		h2.setSuccessor(h3);
		int[] requests = { 2, 5, 14, 22, 18, 3, 27, 20 };

		for (int request : requests) {
			h1.handleRequest(request);
		}

	}
}

public abstract class Handler {

	protected Handler successor;

	public void setSuccessor(Handler successor) {
		this.successor = successor;
	}

	abstract void handleRequest(int request);
}

public class ConcreteHandler1 extends Handler {

	@Override
	public void handleRequest(int request) {
		if (request >= 0 && request < 10) {
			System.out.println(this.getClass().getSimpleName() + " handled request " + request);
		} else if (successor != null) {
			successor.handleRequest(request);
		}
	}
}

public class ConcreteHandler2 extends Handler {

	@Override
	public void handleRequest(int request) {
		if (request >= 10 && request < 20) {
			System.out.println(this.getClass().getSimpleName() + " handled request " + request);
		} else if (successor != null) {
			successor.handleRequest(request);
		}
	}
}

public class ConcreteHandler3 extends Handler {

	@Override
	public void handleRequest(int request) {
		if (request >= 20 && request < 30) {
			System.out.println(this.getClass().getSimpleName() + " handled request " + request);
		} else if (successor != null) {
			successor.handleRequest(request);
		}
	}
}
```

#Output#
```
ConcreteHandler1 handled request 2
ConcreteHandler1 handled request 5
ConcreteHandler2 handled request 14
ConcreteHandler3 handled request 22
ConcreteHandler2 handled request 18
ConcreteHandler1 handled request 3
ConcreteHandler3 handled request 27
ConcreteHandler3 handled request 20
```

{% github https://github.com/eidherjulian61/design-patterns no-readme %}
{% link https://dev.to/eidher/principales-patrones-de-diseno-13ao
 %}
Spring's FactoryBean Interface
Tags: spring, java, factory, bean
Published: 2020-10-06 23:00:50

```java
interface FactoryBean<T> {
    public T getObject() throws Exception;
    public Class<?> getObjectType();
    public default boolean isSingleton() { return true; }
}
```
#Example
```java
public class AppServiceFactoryBean implements FactoryBean<AppService> {
	public AppService getObject() throws Exception {
		...
		return appService:
	}

	public Class<?> getObjectType() {
		return AppService.class;
	}
}
```

#FactoryBeans with Java Configuration:
Spring calls getObject() automatically.
```java
@Configuration
public class ServiceConfig {

	@Bean
	public AppServiceFactoryBean appService() {
		return new AppServiceFactoryBean();
	}

	@Bean
	public OtherService otherService(AppService appService) {
		return new OtherService(appService);
	}
}
```
#Examples
Used in Spring by:
* EmbeddedDatabaseFactoryBean
* ProxyFactoryBean
* JndiObjectFactoryBean
* HibernateJpaSessionFactoryBean

{% link https://dev.to/eidher/factory-method-pattern-2m29 %}
“The Little Big Bug That Almost Ruined My Career” with Tessa Mero of Cloudinary
Tags: bugs, webinar, career, firstyearincode
Published: 2020-10-06 22:56:12

At her first software engineering job, Tessa Mero had to travel to China to demo the app she built alone to her CEO. Hours before the meeting, she found a major reputation-destroying bug in the app and panicked. In this Session, Tessa will share what she did next - a critical lesson that reminds us all that "no one is an island," especially not in software development.

Register here to learn more: https://lu.ma/tessa-mero-1007
how to run https and localhost with caddy2
Published: 2020-10-06 22:54:30

---
title: how to run https and localhost with caddy2
published: true
description: 
tags: 
---

Caddy alludes to this but due to reasons there is no example. And it took me a long while to figure it out.

If you run this command (on Windows at least)

```
caddy file-server --domain localhost
```

The first time Caddy will add a cert to your machine and then you can run https://localhost in your browser. YAY!

Again it was not obvious from the documentation in any way shape or form that this is the right way to do it. I am not convinced this is what they intended but it works.
How to update your forked repository on GitHub? 
Tags: github, codenewbie, tutorial, hacktoberfest
Published: 2020-10-06 22:37:11

### At times there is a need to update your forked repository with the recent commits which happened on the main repository, and to update it we generally use **git bash & console** but what if I tell you that there is a very **simple way of doing this?** 

> ## _And the way is to directly update your fork on **Github's website** on the forked repository page._

Most of you who are an avid git and github user might already know about this small trick but those who don't know about this or want to learn about it do give it a read :point_right:

---

# Steps to Update a Fork in Github : 

**Step-1 :** Go to your **forked repository** on GitHub. 

**Step-2 :** Now you must be seeing a white label like this saying - 'this branch is behind commits' with a 'pull requests' button. Click on that **"Pull request"** button on the right. 


![click on pull request](https://raw.githubusercontent.com/Dhruv-194/Update-github-fork/main/Screenshot%20(236).png?token=AOSOBHHBT6GEXXTXIITDTDK7PTWQU "click on pull request")


**Step-3 :** Now you must be seeing a page saying 'There isn't anything to compare' this happens because what GitHub does is, _it compares your repository (head fork) with the main repository (base fork) and as you have not made any commits or changes therefore it shows nothing._ 
But now you can also see 'switching the base' link. So **click on  “switching the base” link**.
_Now what it will do is, it will switch both the things that are, change your fork to the base, and the original to the head fork._


![switching the base](https://raw.githubusercontent.com/Dhruv-194/Update-github-fork/main/Screenshot%20(277).png?token=AOSOBHCPJKPYZY4CZLFEOQS7PTXEU "switching the base")


**Step-4 :** After applying the above steps now you will observe that there are a lot of commits and changes. You can also see that the "Create Pull request" button is active . **Click on “Create Pull Request” button**, give your pull request a name, **Click “Send Pull Request”**. You have successfully sent a PR to your own forked repository.


![Create Pull Request](https://raw.githubusercontent.com/Dhruv-194/Update-github-fork/main/Screenshot%20(282).png?token=AOSOBHGYW3GVWAMJHXT6DRS7PTW7M "Create Pull Request")


**Step-5 :** Now in your forked repository you will spot a pull request. **Click “Merge Pull Request”** and **Click “Confirm Merge”**.

---

>  So there you have it the easiest way to update/sync your forked repository directly on GitHub by just sending a pull request. I hope you learnt something from this today.
Traditional Kanban boards aren’t the best for stories.
Tags: productivity, agile
Published: 2020-10-06 22:34:56

Kanban was developed for factory floors and operates best with tasks that don’t require additional discussion, are well defined, exist in discrete stages, and proceed in a continuous flow.

Bugs, and very small feature requests fit this model well, which is why Kanban is a popular methodology today with Trello and Github providing popular boards.

Unfortunately, every other kind of story doesn’t work so well. Stories that are part of larger work require frequent collaboration as the overall requirements evolve. Conceptually, such stories exist in discrete stages, but in reality stories influence each other: comments and suggestions abound, and traditional  Kanban boards don’t have a way to display the true status.

What’s needed is a new type of Kanban board that integrates stories and communication. Suggestions during implementation should result in resolution during review, and failure to do so should be immediately apparent. Status needs to evolve from a simple column into a real-time view of what people are saying about the story.

Without such improvements, Kanban boards are not able to serve the needs of complex development, and will always be a source of frustration.
Cascata no styled-components
Published: 2020-10-06 21:36:25

Faaala Dev's! Hoje eu vou passar para vocês um "truck" no styled-components que eu demorei para pegar, não é dificil. Sabe quando nós vamos usar o CSS? Ele é escrito assim: 

```
.container {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.container form {
   max-width: 300px;
   border: 1px solid #cd35bf;
}
```

Viu só! Ele é escrito no formato de cascata `.container form`. Daí eu pensei "preciso fazer isso no `styled-components`", mas como? Galera, é muito fácil, a sintaxe é assim:

```
import styled from 'styled-components';

export const Container = styled.div`
   margin: 0;
   padding: 0;
   box-sizing: border-box;

   form {
     max-width: 300px;
     border: 1px solid #cd35bf;

     h1 {
       color: #cd35bf;
       font-family: 'Roboto', sans-serif;
     }
   }
`;
```

Viu só, basta encadear no formato de objeto, onde `h1` está dentro de `form` que estão dentro de `Container`.

Bom dev's por hoje é isso, qualquer dúvida ou sugestão comentem que eu busco para vocês, vaaleu! 😎
React Developer Tooling
Tags: react
Published: 2020-10-06 21:34:47

Today I am going to talk about developer tooling to improve these 3 areas.

- Write code quickly
- Debug code effectively
- Update code easily

## 1. Fast Refresh (write code quickly)

Fast refresh makes your React app reloads slick and painless on code changes and Re-renders only the required React components if a code change is made instead of reloading the entire app.

### Is it the same as hot reloading?

The answer is NO. The hot reloading has some limitations.

* No function component support (React hook)
* No error recovery
* Often did not reload after changes
* Required brittle code transforms

### How is Fast Refresh different?

- First class feature for React core team
- Built for all renderers
- Supports function components and Hooks
- Recovers after errors

### How does Fast Refresh work?

- Decides when to ‘update’ or ‘remount’
- Computes a component ‘signature’

### What are limitations of Fast Refresh?

- Resets class component state
- Mixed React and non-React exports
- Memoization

### When can you use Fast Refresh?

- React Native v61+
- React DOM (soon)

## 2. Developer Tools (debug code effectively)

### Why rewrite React DevTools?

- Better performance
- Support new APIs
- Add new UX features

### What can you do with React DevTools?

- Navigate Unfamiliar Projects
- Iterate and Test
- Profile and Measure Performance

## 3. Codemods (update code easily)

### What is a codemod?

- Tool for refactoring large codebase
- Like a really smart field find-and-replace

### How do codemods work?

It starts by reading Javascript source code from the file. The source code is parsed and converted into an abstract syntax tree or AST for short.

An AST is a tree representation of the structure of a program.

Each node in the tree corresponds to an element in the source code.

The codemod itself is a small Javascript program that modifies this tree. And it can do more complicated edits than find and replace code.

### What are codemods good for?

- Renaming things
- Reordering things
- Replacing things(under certain conditions)

### What are codemods not good for?

- Complex behavioral changes
- Fixing bugs

Check React codemods here!

And you can also check the Demo!

That’s it for today.

Stay tuned! Happy coding!
Robot vs Zombies Live Stream E06
Tags: react, css, javascript, womenintech
Published: 2020-10-06 21:30:34

---
description: We started by giving the wall tiles and building tiles an object of information using OOP. Then we work to encapsulate our large function generateRooms. Finally we add sound effects that start whenever the player goes inside.
---

We started by giving the wall tiles and building tiles an object of information using OOP. Then we work to encapsulate our large function generateRooms. Finally we add sound effects that start whenever the player goes inside.

{% youtube lQLxP94wRY4 %}
how to receive money on a paypal account in Cameroon?
Published: 2020-10-06 21:29:25

hi the community; I am a freelance web developer based in Cameroon.
how to honestly receive money in my paypal account from my country. since some customers often offer to pay me through this wallet.
I was made to understand that a friend of mine can help me create another which is not restricted;
I am open to any proposal,
thank you in advance !

#alainwebcreator