teleren/devto huggingface dataset:
Markdown Cheat Sheet part-1
Tags: showdev, markdown, beginners, github
Published: 2021-01-20 16:56:24

# What is Markdown?
Markdown is a lightweight markup language for creating formatted text using a plain-text editor. Markdown is the easy to use syntax for styling the plain text on the GitHub platform.
You can use Markdown in most places around GitHub:-
- GitHub repo readme.md file
- Gist
- Comments in issues and pull requests
- Files with `.md` or `.markdown` extensions

## Syntax Guide
Markdown also require some syntax specifications to write it !
Let's check what it is.

### Header
- # h1
- ## h2
- ### h3
- #### h4
- ##### h5
- ###### h6


The heading is preceded by a '#' symbol 1 '#' marks symbolizes h1 and 2,3,4,5 '#' symbols indicates h1-h6 .Just make sure you have a space following them (after the '#' symbol).

# I am h1 preceded by 1 # symbol.
## I am h2 preceded by 2 # symbols.
### I am h3 preceded by 3 # symbols.
#### I am h4 preceded by 4 # symbols.
##### I am h5 preceded by 5 # symbols.
###### I am h5 preceded by 5 # symbols.

### Emphasis 
```markdown
Emphasis aka italics with *asterisks* or _underscores_.
Strong Emphasis aka Bold with **Double asterisks** or __double underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strike Through with 2 tildes ~~Strike This~~.
```
Emphasis aka *italics* with *asterisks* or _underscores_.
Strong Emphasis aka **Bold** with **Double asterisks** or __double underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strike Through with 2 tildes ~~Strike This~~.

### Lists 
```markdown
#### Ordered list
1. First ordered list item
2. Second ordered list item
  1. First ordered intended list item
  2. Second ordered intended list item

#### Unordered list 
- First unordered list item.
- Second unordered list item.
  - First intended unordered list item.
  - Second intended unordered list item.

Some more ways to write unordered list .
* Unordered list can use a asterisks '*'.
- a minus.
+ or a plus.
```
#### Ordered list
1. First ordered list item.
2. Second ordered list item.
  1. First ordered intended list item.
  2. Second ordered intended list item.

#### Unordered list.
- First unordered list item.
- Second unordered list item.
  - First intended unordered list item.
  - Second intended unordered list item.

Some more ways to write unordered list. 

* Unordered list can use a asterisks '*'.
- a minus. 
+ or a plus.

<a href="https://www.buymeacoffee.com/garimasharma"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=garimasharma&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" /></a>
Artificial Intelligence: 12 Principles to Build Better Solutions
Tags: ai, programming, startup, news
Published: 2021-01-20 16:52:53

This is the summary version of a longer story published on Medium in The Startup. The full story can be found [here](https://medium.com/swlh/artificial-intelligence-the-12-best-ways-to-create-superior-solutions-4b4a8ff3529f?source=friends_link&sk=5fc1e6fbca26fed8b09d836af9c56dcc) (free link / no paywall).

AI is expected to boost productivity but risks need to be managed. 12 principles can be helpful to build better AI solutions:

1. Non-discriminatory (facial recognition has shown different levels of accuracy by gender and race)
2. No black box and explicability (XAI)
3. Debug mode (which should be turned on when the system makes mistakes)
4. Fail-safe (to reduce or turn off any capabilities creating issues)
5. Circuit breaker (for extreme cases, it must be possible to shut down the entire system)
6. Approval matrices (humans should be in the chain of command and approve key decisions)
7. Keeping track of assets, delegation, and autonomy (users should never delegate decision-making capability completely, nor stay on the sideline)
8. No completely virtual or decentralized environments
9. Feedback with discernment (AIs need filters and tools to use feedback optimally and remain useful)
10. Annotated and editable code
11. Plan C (there should always be a plan to switch back to human operations and use an alternative technology)
12. Keeping track of returns and resources

Full story / free link / no paywall:
{% medium https://medium.com/swlh/artificial-intelligence-the-12-best-ways-to-create-superior-solutions-4b4a8ff3529f?source=friends_link&sk=5fc1e6fbca26fed8b09d836af9c56dcc %}
VSC TASKS.... to run to create a ENTIRE, MERN Stack ....project. IS THAT A GOOD IDEA???
Tags: react, node, mongodb, help
Published: 2021-01-20 16:39:04

Is it a good idea,
To have a TASK setup, to create a MERN project? 
As in setting up the server and client? 

By having mkdir MAIN, FrontEnd, backend, CD into each and run the typical codes of npm init -y and CRA ect??? Also to install style frameworks, ect.... is that a good idea? 


I have a FRONTEND and BACKEND Task setup to create it. 



But is that good?
🔐 Forked Codepen 64 Character Password generator up featuring alpha-numeric + special character encryption!
Tags: css, javascript, html, codepen
Published: 2021-01-20 16:31:36

🔐 I restyled this Codepen demo a bit to make it a little more 2021. It's a 64 Character Password generator up featuring alpha-numeric + special character encryption and works great!

{% codepen https://codepen.io/livewordpresshelp/pen/BaLvMez %}
Angular 12 and Beyond
Tags: angular, javascript, devops, uiweekly
Published: 2021-01-20 16:29:24

What's Ahead for Angular 12

Angular, Google's JavaScript (TypeScript) framework for building web applications mobile or desktop, has over 68,000 stars on GitHub. Angular 11 launched on the 11th day of the 11th month of 2020.  Every year, Angular runs a developer survey with almost 30K responses to make Angular better.  With the Angular community feedback, requests, and suggestions, they plan some timesaving, faster, and pretty cool improvements.  The Angular roadmap project's focus is a 'zoneless angular' making Zone.js options and ultimately provides more control to the developers.

Better Developer Ergonomics @angular/forms
Work is in progress for implementing stricter type checking for reactive forms. This allows developers to catch more issues during development time, enable better text editor and IDE support, and improve the type checking for reactive forms.
Leverage Full Framework Capabilities with Zone.js Opt-Out
Angular is going to design and implement a plan to make Zone.js optional from Angular applications. This simplifies the framework, improves debugging, and reduce application bundle size.
Reducing Framework Overheard by Removing Legacy
Angular plans remove the legacy View Engine for smaller Angular conceptual overhead, smaller package size, lower maintenance cost, and lower codebase complexity.

Improve Test Times and Automatic Test Environment Tear Down 
By changing the TestBed to automatically clean up and tear down the test environment after each test run, developers can improve test time and create better isolation across tests.
Improve Build Performance With ngc as a tsc Plug-In Distribution
Distributing the Angular compiler as a plugin of the TypeScript compiler is forecasted to improve developers' build performance and substantially reduce maintenance costs.
Support Adding Directives to Host Elements 
A long-standing feature request for the ability to add directives to host elements. The feature allows developers to augment their components with different behaviors without using inheritance.
Simplified Angular Mental Model with Optional NgModules
Future Angular editions make NgModules optional that simplifies the learning journey. This work allows developers to develop standalone components and implement an alternative API for declaring the component's compilation scope.
Ergonomic Component Level Code-Splitting APIs
A common problem of web applications is a slow initial load time. A way to improve it is to apply more granular code-splitting on a component level. To encourage this practice, we'll be working on more ergonomic code-splitting APIs.
Wijmo supports Angular and has since the very beginning with Angular 1 (AngularJS). We are committed to providing Angular developers a powerful toolset for building enterprise-grade applications.
🎮 Codepen Game: Wheel-of-Fortune Style Web App with pure HTML, CSS, & JS Fixed!
Tags: html, css, javascript, codepen
Published: 2021-01-20 16:27:26

🎮 Codepen Game: Wheel-of-Fortune Style Web App with pure HTML, CSS, & JS

{% codepen https://codepen.io/livewordpresshelp/pen/LYRqyVe %}
Vim tips: Speed up with Vim tabs
Tags: vim, rails, nvim
Published: 2021-01-20 16:18:46

---
title: Vim tips: Speed up with Vim tabs
published: true
description: make your fuzzy search fast when working on a big codebase using vim tabs
tags: vim,rails,nvim
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3syj6s5kckx9rm1tuokw.png
---

I struggled a long time ago with vim when playing with multiple projects at the same time or playing with a code base with conflicting folders related to multiple languages used at the same time.

As an example, a typical rails code base will have a lot of ruby code and a bunch of javascript/typescript code ( stimulus, react ... ).

As an example, we can have a ruby service for invoicing for example 
`.../services/fetch_invoice_service.rb`

and a `typescript` service used to fetch something from the API
`.../javascript/src/services/fetchDataService.ts`

On vim, using `fzf` I found my self using the `Gfiles`commande to find the desired file typing for example:
`servicefetch`

The `Fzf` will show ruby and javascript files on the same list.
Sometimes is really annoying when you're working on a big codebase.

Also, when you are working on multiple project on the same time with vim, usually you find your self having multiple vim instances.

We can fix this with **Vim tabs**

# Vim tab to rescue

You can create a new tab on vim using the command: `:tabnew`

Navigation between tabs is done by:
- `gt` cycling between tabs
- `{tab number}gt`: switch to a specific tab.

## Setting a working directory by tab:
To make your search for files really fast, you can set a working directory by tab.
:tcd [path to your folder]

Calling `:Gfiles` will use this path as a root directory

## Rails workflow
I found my self for a rails app using three tabs:

1. The root tab on my project
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rl8w1z405avc17vohs74.png)

2. The javascript tab within `app/javascript`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/brzyb5q3100jrlpfmkws.png)

3. The terminals tabs 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3syj6s5kckx9rm1tuokw.png)
Amazon, please, allow me to send documents to my kindle
Tags: pyhon, kindle, amazon, web
Published: 2021-01-20 15:57:57

I'm a happy user of the feature of Kindles that allows sending documents via email. The device has a 'secret' address and if you send your document there, the document appears 'automagically' in your device. So far so good.

Last week I started to receive messages from *Amazon Kindle Support* asking me for some more work: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6zk4iileqm45gchdohmc.png)

That is, you need to click on some link and then Amazon delivers the document. For a heavy user like me (around 10 documents daily) it is too much work.

I have seen some references in the web [Amazon emailing me to verify every book I sent to kindle now
](https://www.reddit.com/r/kindle/comments/dl58gz/amazon_emailing_me_to_verify_every_book_i_sent_to/) and the links provided by Amazon are not really useful.


What to do?
Well, we can process the 'automagically' generated messages with a program, look for the link inside each one of them and then, doing the actual click.

For this, once you have the body of the message (I'm reading a GMail account with my [moduleGmail](https://github.com/fernand0/socialModules/blob/master/moduleGmail.py) but any account and any way of reading them is ok), you can do a quick and dirty search:

    message = api.getMessageId(idPost)
    pos = message.find('https://www.amazon.com/gp')
    # We are looking for the second one; the first 
    # one is the image used in the mail for showing 
    # the link.
    pos = message.find('https://www.amazon.com/gp', pos + 1)
    pos2 = message.find('"', pos+1)
    if pos >= 0:
        url = message[pos:pos2]
        import requests
        # The actual click is here:
        response = requests.get(url)

Then, we can delete the message, if we want. My robot against Amazon robots. Let's see.
Twilio SMS Notification Channel
Published: 2021-01-20 15:46:09

Hi, I'm Valerio software engineer from Italy, and CTO at Inspector.

I am really happy to announce the general availability of our brand new "Twilio – SMS" notification channel.

If you are a busy developer you now have one more option to intelligently forward your application monitoring notificiations directly in your smartphone, stay informed about your application status, and sleep better at night.

## How Twilio Notification Channel Works

We decided to implement this integration in a way that Inspector will connect to your Twilio account on your behalf, so you can keep total control about your credit spent to forward SMS to your mobile number.

We thought carefully about the option to use directly our Twilio account, but we should have revised our rates making them more difficult to understand. Furthermore you could have an existing Twilio account that allows you to access a more convenient price.

## Configuration

You need three mandatory parameters from your Twilio console:

- Account SID
- Auth Token
- From number

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

You can find these information directly in your Twilio console: [https://www.twilio.com/console](https://www.twilio.com/console).

As recipients you can add as many phone numbers you want to receive selected notifications. Separate each number with a comma ( , ), but consider that each number will receive a separate SMS, so each of them contributes to the consumption of your Twilio credit.

For a more complete overview you can rely on our official documentation at: [https://docs.inspector.dev/notifications/twilio-sms](https://docs.inspector.dev/notifications/twilio-sms)

## Conclusion

If you are an Inspector user I hope you can find this new channel useful. We continue to make decisions trying to help as many developers as possible to monitor their code execution effortlessly with the easiest Code Execution Monitoring system out there.

If you don't know Inspector yet, you can learn more about its Code Execution Monitoring system for PHP and Nodejs on our website: [https://www.inspector.dev](https://www.inspector.dev)
Generate NodeJS / Express project
Tags: javascript, node, webdev, showdev
Published: 2021-01-20 15:45:27

I've made a simple CLI program that helps you generate your NodeJS / Express project structure, based on your selected configuration.

You can check it out here: <a href="https://github.com/pstevovski/express-app-cli" target="_blank">express-app-cli</a>.

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

It creates the following project structure:

    tests/            - Unit and integration tests
    views/            - If using view engines (pug, handlebars etc.)
    src/
      app.ts          - Main entry point of the application
      api/
        index.js      - Main entry point for all defined routes
        routes/       - All the routes go in this folder
      services/       - Business logic
      controllers/    - Route controllers (handlers)
      config/         - ENV's and other configuration related stuff 
      loaders/        - Splitting the start up process (express, database connection, CRON jobs etc.)
      models/         - Database models
      middlewares/    - All custom middlewares (authentication, authorization etc.)
      utils/          - Utility functions (e.g. validations)
      jobs/           - CRON jobs
      types/          - All the types and interfaces that we'll use

It currently supports a couple of configuration options:
- Languages: Javascript, Typescript
- Databases: MongoDB, MySQL, Postgres, SQLite
- Testing libraries: Jest, Chai, Mocha
- Templating engines: Handlebars, PUG, EJS
- ORMs:
  - Mongoose (installed by default with MongoDB)
  - Sequelize
  - TypeORM

You can install it globally trough:
> *npm install -g express-app-cli*
> 
> *yarn add global express-app-cli*

Then to use it: 
> *express-app < project-directory > [options]*

It still has some work to be done (testing, refactoring). If you have any ideas, or find any bugs, feel free to open a PR / Issue.
React Prot-Types and Errors
Tags: react, errors, apps, frontend
Published: 2021-01-20 15:41:19

Guys, is important to add the prop-types for the apps you are developing to avoid problems in the UI render, because if the app start to growing up, the errors also can do it.
Here I attach sample, 

https://es.reactjs.org/docs/typechecking-with-proptypes.html


Besides, it is important handle the errors, and to know what is happening back the app in the modeling, structure and behave: https://es.reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

componentDidCatch is more important than a simple Try,Catch, check the documentation and improve your code!
Day 27 Of 100DaysOfCode : Simple Code Using Database And SQL
Tags: 100daysofcode, beginners, codenewbie, python
Published: 2021-01-20 15:39:16

This is my 27 day of #100DayOfCode and #python. Today I did some code on class inheritance with the help of goggle and textbook of coursera. Learned Database on python. In database on python I learned to make simple database table with the help of DB Browser.

Here is some database today I learned from coursera.

# Simple Database And SQL
A database is a file that is organized for storing data. Most databases are organized like a dictionary in the sense that they map from keys to values. The biggest difference is that the database is on disk (or other permanent storage), so it persists after the program ends. Because a database is stored on permanent storage, it can store far more data than a dictionary, which is limited to the size of the memory in the computer.


```python
import sqlite3

conn = sqlite3.connect("example.db")
```
The code to create a database file and a table named Tracks with two columns in the database is given above. The connect operation makes a “connection” to the database stored in the file  in the current directory.

```python
c = conn.cursor()

#create table
c.execute("""CREATE TABLE Users 
(Name variable(128), sname, person)""")
```

A cursor is like a file handle that we can use to perform operations on the data stored in the database. Calling cursor() is very similar conceptually to calling open() when dealing with text files. In above code we can create table name Users having the two column with name and person.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 27 of <a href="https://twitter.com/hashtag/100DaysOfcode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfcode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>* More about class inheritance<br>* Learned about database on python<br>* Some simple SQL code<a href="https://twitter.com/hashtag/100DaysOfcode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfcode</a>, <a href="https://twitter.com/hashtag/CodeNewbies?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbies</a> ,<a href="https://twitter.com/hashtag/beginner?src=hash&amp;ref_src=twsrc%5Etfw">#beginner</a> <a href="https://t.co/Lo3smgnDWm">pic.twitter.com/Lo3smgnDWm</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1351911760752640002?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
How to avoid long relative paths import in your angular app 🚂
Tags: angular, typescript
Published: 2021-01-20 15:29:06

The purpose of writing this blog is to show you guys how we can improve the code smells that exist in our angular application, one of that code smells is importing base scss/less files with longer relative paths.

This problem will be faced if you are working on slightly large angular apps.

```scss
@import "../../../../variables";
```
This looks weird, this nesting path depends on how deep your component is, where you are importing the variables scss/less file. The more complex issue is, if you gonna change the location of your variables scss/less file in the future, then you have to change all the imports related to this variables scss/less file.

**Let's Solve this Issue 🚀**

#### 1. Adding **stylePreprocessorOptions** object inside angular.json
projects > app_name > build   👈 follow this hierarchy

inside your build object add this 

```json
"stylePreprocessorOptions": {
  "includePaths": [
    "src/",
    "src/assets/less/"
  ]
}
```
So, you have imported the less directory with the hierarchy, now you can only **import** the filenames which exist inside the less directory, same goes for src/ path as well. 

```scss
@import "variables";
```
This looks cool and clean ❤️, it doesn't matter if you change the location of your scss files now, you only have to change the path once inside the **angular.json** file.

# That's All Folks 😎
#Day31 What is My IP (React Hooks) 😍🎉
Tags: 100daysofcode, react, javascript, cs
Published: 2021-01-20 15:11:57

Today is the Day 31 of the challenge #100DaysOfCode 💻

What is My IP Using React Hooks 🎉😍

Demo : https://whatismy-ip.netlify.app/

Repo : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day31

#100DaysOfCode

Repo : https://github.com/saidMounaim/100DaysOfCode
💪 WordPress + GraphQL
Tags: wordpress, graphql, api
Published: 2021-01-20 15:09:59

I created a WordPress plugin to install a GraphQL server, and launched its new site:

https://graphql-api.com

It also has a REST-like behavior: it supports persisted queries, which are normal GraphQL queries, but published and accessed under their own URL, and these endpoints are even cacheable on the server-side.

Check it out! 😁

For a bit more info, I wrote on CSS-Tricks about the [goals and philosophy of this plugin](https://css-tricks.com/rendering-the-wordpress-philosophy-in-graphql/) (that is, how it brings the WordPress philosophy to GraphQL).

Enjoy!
Instant test feedback with vim-test
Tags: ruby, vim, rspec, productivity
Published: 2021-01-20 15:07:00

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0mum8pwd4p96fkhmp23x.jpeg)

I'm a huge fan of instant feedback in tests: the faster I get test results, the faster I get back to the code, the faster I get work done. To do this, I use watchers: in Ruby Guard tracks changes in files and automatically runs the right specs, in JavaScript `jest --watch` does it.

Over time, watchers began to annoy me: you save the file, the test runs after two seconds.  Those two seconds are an eternity. Often you think you haven't saved the file, you save it again. The test runs a couple more times.

So I switched to running the tests manually but instantly with vim-test:
https://github.com/janko/vim-test

The idea is simple: save the spec, hit "space t" (space is a leader), immediately get a terminal with the test results. Awesome instant feedback.

P. S. I use these shortcuts to run the tests:
```vim
nnoremap <silent> <Leader>t :TestFile<CR>
nnoremap <silent> <Leader>s :TestNearest<CR>
nnoremap <silent> <Leader>l :TestLast<CR>
```