teleren/devto huggingface dataset:
What extensions you have in Visual studio code ? 
Published: 2021-04-11 14:19:25

I have the following extensions in my visual code.

###1 Auto Import : 
Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

###2 ES7 React/Redux/GraphQL/React-Native snippets : 
Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax.

###3 Cobalt Theme : 
Cobalt Theme ported from the Cobalt TextMate Theme.

###4 Live Sass Compiler : 
Compile Sass or Scss to CSS at realtime with live browser reload.

###5 Live Server : 
Launch a development local Server with live reload feature for static & dynamic pages.

###6 Lorem ipsum : 
Generates and inserts lorem ipsum text.

###7 Prettier - Code formatter : 
Code formatter using prettier.


####Thanks for reading till here. if you like the article don't forget to subcribe my channel. [My Channel Link](https://www.youtube.com/channel/UCajNSAb41SHFYAsCJxUKIMw?sub_confirmation=1)
Node.js Extract MySQL Data to Excel(.xlsx) File – using exceljs
Tags: node, excel, mysql, exceljs
Published: 2021-04-11 14:13:31

https://ozenero.com/node-js-extract-mysql-data-to-excel-xlsx-file-using-exceljs

Node.js Extract MySQL Data to Excel(.xlsx) File – using exceljs

In the tutorial, Grokonez shows how to extract data from MySQL to Excel(.xlsx) File with Node.js using <code>exceljs</code> lib.

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Node.js</li>
<li>MySQL</li>
<li>exceljs</li>
</ul>
<h2>Goal</h2>
– We create a Node.js project as below structure:

<img src="https://ozenero.com/wp-content/uploads/2019/03/Nodejs-export-mongodb-data-to-excel-file-using-exceljs-project-structure-1.png" alt="Nodejs-export-mysql-data-to-excel-file---using-exceljs---project-structure" width="593" height="163" class="alignnone size-full wp-image-17239" />

– MySQL Data:

<img src="https://ozenero.com/wp-content/uploads/2019/03/nodejs-export-mysql-data-to-excel-file-using-exceljs-mysql-records.png" alt="nodejs-export-mysql-data-to-excel-file---using-exceljs---mysql-records" width="737" height="573" class="alignnone size-full wp-image-17240" />

– Excel File:

<img src="https://ozenero.com/wp-content/uploads/2019/03/Nodejs-export-mysql-data-to-excel-file-using-exceljs-results.png" alt="Nodejs-export-mysql-data-to-excel-file---using-exceljs---results" width="650" height="158" class="alignnone size-full wp-image-17241" />
<h2>Practice</h2>
<h5>Install MySQL & Exceljs</h5>
- Init <code>package.json</code> file by cmd: <code>npm init</code> -> Then install <code>mysql</code> & <code>exceljs</code> libs:

<pre><code class="language-javascript">
$npm install --save mysql
$npm install --save exceljs
</code></pre>

-> <code>package.json</code> file:

<pre><code class="language-javascript">
{
  "name": "nodejs-export-mysql-data-to-excel-file",
  "version": "1.0.0",
  "description": "Nodejs exports MySQL data to Excel file",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"start": "node index.js"
  },
  "keywords": [
    "Nodejs",
    "MySQL",
    "Excel"
  ],
  "author": "ozenero.com",
  "license": "ISC",
  "dependencies": {
    "exceljs": "^1.7.0",
    "mysql": "^2.16.0"
  }
}</code></pre>
<h3>Extract MySQL Data to Excel</h3>

More at:

https://ozenero.com/node-js-extract-mysql-data-to-excel-xlsx-file-using-exceljs
How I can test that an OkHttpClient performs an HttpCall with the appropriate Cookie Header?
Tags: help, java
Published: 2021-04-11 14:10:30

As I ask upon https://stackoverflow.com/q/67045916/4706711 I want to know how I can test that an Class that has an OkHttpClient Instance as its private instance variable performs an Http request with the appropriate cookie value.

The method that I want to test is the:

```
   public String retrieveUrlContents(String url, String csrfToken) throws Exception
    {
        url = this.url.replaceAll("/$","")+"/"+url.replaceAll("^/","");
        csrfToken=(csrfToken == null)?"":csrfToken;

        if(!csrfToken.equals("")){
            long unixtime = System.currentTimeMillis() / 1000L;
            // AJAX Calls also require to offer the _ with a unix timestamp alongside csrf token
            url+="?_="+unixtime+"&csrf_token="+csrfToken;
        }
        Request.Builder request = new Request.Builder()
                .url(url)
                .header("User-Agent","Mozila/5.0 (X11;Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0");

        String session_id = this.getSessionId();
        session_id = session_id==null?"":session_id;

        if(!session_id.equals("")){
            request.header("Set-Cookie","session_id="+session_id+";login_uid="+Math.random());
        }

        Response response = this.httpClient.newCall(request.build()).execute();

        int code = response.code();
        if( code != 200){
            throw new Exception("The url "+url+" returned code "+code);
        }
        String responseBody = response.body().string();
        return responseBody;
    }
```

And my test is (in incomplete form):

```
 @Test
    public void retrieveUrlContentsIsRetrievedWithSessionId()
    {
        File file = (new File("src/test/resources/csrfInvalid.html")).getAbsoluteFile();
        String path = file.getPath();
        Scanner fileReader = new Scanner(file);
        String contents = fileReader.useDelimiter("\\Z").next();
        OkHttpClient client = this.mockHttpClient(contents,false,200);

        final Η300sCredentialsRetriever retriever = spy(Η300sCredentialsRetriever.class);
        doReturn("Hello").when(retriever).getSessionId();
        retriever.setUrl("192.168.2.1");
        retriever.setHttpClient(client);

        String response = retriever.retrieveUrlContents("/example.html");
        
        // Test that http call is permormed with SessionId  
        // Rest of Assertions
    }
```

More Info in my SO question. Can you help me with my test?
LenoxBot, a Discord.js Open-Source bot
Tags: discord, programming, beginners, opensource
Published: 2021-04-11 14:09:24

A few years ago I started one of my first programming projects, namely LenoxBot, a Discord.js bot with a web interface. The bot was active on over 15,000 servers but unfortunately "died" due to too little time to develop and now needs a recode. That's why I thought Dev.to is a good place to ask for help from motivated developers who support open source.
Every pull request is welcome!

About the bot:
The bot has no specific function but should be an "all-in-one" bot, that is, a bot that has a lot of functions.

We would appreciate any help!
Many Thanks!

LINK: https://github.com/LenoxBot/LenoxBot
Web Application using Entity Framework Web Api and angular
Tags: webdev, entityframework, webapi, angular
Published: 2021-04-11 14:05:53

Web application development using entity, web api and angular

####Youtube Video
https://youtu.be/XNrhTBUsFmA?list=PLBCCJVCjH3s72atG9LMSZV2TXC7hlqzfe

####Subcribe my you tube channel for more advance video.
https://www.youtube.com/channel/UCajNSAb41SHFYAsCJxUKIMw?sub_confirmation=1
How to migrate data between AWS RDS and S3
Tags: aws, rds, database, s3
Published: 2021-04-11 14:05:11

---
title: How to migrate data between AWS RDS and S3
published: true
description: 
tags: aws, rds, databases, s3
canonical_url: https://medium.com/@max.borysov/how-to-migrate-data-between-aws-rds-and-s3-1a011c8aca52
---

If you are using **AWS Aurora MySQL/Postgres** or **AWS Redshift** you have access to S3. Therefore, it is possible to export data from RDS to S3. And you can import data back from S3 to RDS.

How to **export data** from RDS to S3 file:
```sql
SELECT *
FROM users
INTO OUTFILE S3 's3://some-bucket-name/users';
```

This command only exports data, even without column names. No indexes or other information is present. Only data.

**Import data from S3 to RDS**:

```sql
LOAD DATA FROM S3 PREFIX 's3://some-bucket-name/users'
INTO TABLE users;
```

For me, they are one of the most frequently used features in day-to-day tasks, like:
- export data from RDS to S3. Import S3 file to Google Sheets to prepare some reports, build charts and share with clients or teammates
- having data in CVS/TSV format(from a client or any other source) as a file on S3, import file to RDS, perform some operations/aggregations/etc and export data to S3 as a new report

I strongly recommend checking this feature.

Useful links:
- [Official tutorial](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/AuroraMySQL.Integrating.SaveIntoS3.html)
data-attributes vs. BEM
Tags: css, html, discuss, codepen
Published: 2021-04-11 14:02:35

I used to be a comicbook-letterer, so "BEM" always looked wrong to me. It's either "BAM!" — or "BOOM!" … Sorry, I couldn't resist that!

In a CMS-interface, editors sometimes have the option to *customize* the rendering of a component.

In an *Accordion*-Component, as an example, an editor might be able to chose the type of *fold-out*-icon to use from a drop-down:

- “Down Arrow”
- “Right Arrow”
- “Plus”

The editor might even have the option to chose an icon *per item* in the accordion — if the accordion has several levels — as we often see in mobile navigation.

The backend for the accordion will most likely store the selection in a *SelectionFacory* (or similar), which is a bunch of `key/value`-pairs, where `value` is the one displayed to the editor, and `key` is the one we'll use in the rendered markup:

```html
@Model.cssIcon
```

Now, instead of outputting the value to a `class`-attribute, we can output it to a `data`-attribute with the **same name** (just in kebab-case) as the data-model:

```html
<span data-css-icon="@Model.cssIcon">Item</span>
```

This way, the backend and frontend is *linked*, and easy to read for both types of developers.

The `key` in this example is "down-arrow", so to target that in CSS, we'll use the attribute selector:

```css
[data-css-icon="down-arrow"] { /*…*/ }
```

If all the accordion-icons have something in common, these — more generic styles — can be placed in:

```css
[data-css-icon] { /* common */ } 
```

And if he editor should be allowed to add more modifiers, as an example "circle" or "fill", we can use the "contains `*`"-operator:

```css
[data-css-icon*="circle"] { /*…*/ }
```

And in HTML: 

```html
<span data-css-icon="down-arrow circle fill">Item</span>
```

Here's a Codepen with a bunch of *CSS Only Icons*, with (clickable) modifiers:

{% codepen https://codepen.io/stoumann/pen/eYzPVqe default-tab=result %}


---
## CSS Badges
Let's look at another example that would typically require **a lot** of BEM-modifiers.

Imagine a *List*-Control or a *Menu*-Component, where an editor will be able to add text either before or after an item. This could be a colored circle with" NEW" after a product-name, the infamous red notification-badge with a number, 

The CMS-implementation could be:

- type (badge, circle, dot, pill)
- color
- horizontal position (left, right)
- vertical position (bottom, top)

*Instead of:*

```html
<button class="c-txt c-txt--badge c-txt--color-red c-txt--posv-top c-txt--posh-left" data-text="NEW">
```

*It could be:*

```html
<button data-text-type="red badge top left" data-text="NEW">
```

CSS in `data`-attributes are probably a bit slower to parse (since I'm using the `containing: *`-selector), but easier to read, and easier for backend-developers to implement/understand.

Here's a Codepen with a bunch of *CSS Badges:*
{% codepen https://codepen.io/stoumann/pen/mdEQdqy default-tab=result %}

What do **you** think?!

Thanks for reading?
But do you Terminal?
Published: 2021-04-10 23:52:18

With my new job comes a new PC... well, a new machine. I have run Windows for so long that going to a mac makes me feel like a new user all over again, and not in a good way. Goodbye is the print screen key, Ctrl C, Ctrl V, (I found how to bring that back by remapping the command key to ctrl) as well as Windows Terminal. I have been a HUGE fan of Windows Terminal and OH-MY-POSH and used them on a daily basis. If I need a Powershell, Command prompt or Ubuntu/Debian shell, it was a click away! That said, I don't know how many devs even touch the command line anymore. I'd like to think it's either still widely used or even making a coming back, especially with Git, Node, DotNet, and other cli tools, but I was surprised to see how many people use 3rd party tools or plugins! Ok, so VS code is fantastic with its built-in Git process... but at some point, I would imagine devs have to use shell at some point. Mac has its terminal, but, wow is it bare bones! Luckily, I know that Macs use ZSH, and Oh my zsh did the trick. Well, "Oh my ZSH" and Powerlevel 10k (along with a Nerdest font). There are some glitches when resizing the window, but does it feel good seeing git information in the active directory I am working in.
🚀 Setup fully pre-configured React Native Project using react-native-app-builder NPM 
Tags: reactnative, startup, redux, boilerplate
Published: 2021-04-11 13:53:38

Do you want to know how to create react native project which is preconfigured with initial setups like authentication, theme, localization, redux, saga, and Fastlane?

This blog will help you to achieve your task in few minutes as well as enrich your understanding of the react-native project structure.

I hope you have an initial setup of [react-native](https://reactnative.dev/docs/getting-started) app development. 

### Quickstart
* Ensure your machine has the [React Native dependencies installed](https://reactnative.dev/docs/getting-started)
* All you need to use is npm library [react-native-app-builder](https://www.npmjs.com/package/react-native-app-builder)
* Open your Terminal and create an empty directory and follow these steps.

1. `npx react-native-app-builder <ProjectName>`
2. `cd <ProjectName>`
3. `npx react-native run-ios`
4. `npx react-native run-android`  

### What's inside

* Latest react-native version with react hooks
* Redux saga with persistReducer
* Localization and Theme support (Dark / Light) Setup with React Context
* App Button is demo for Custom Component
* Custom font and font size for maintaining typography
* .env setup to support different env for PRODUCTION and DEVELOPMENT
* User Authentication flow
* UI for Login, Tabs, and Settings
* Fastlane setup

### Directory Structure

`root
├── __tests__
├── android
├── ios
└── App
    └── Actions
    |   ├── Keys
    └── ApiConfig
    └── AppContext
    └── Localization
    └── Reducers
    |   ├──Default
    └── Routes
    └── Sagas
    └── Screens
    |    CommonComponent
    |    Components
    |    SubComponents
    └── Services
    └── Stores
    └── Theme
    |    Images
    └── Utils
├── fastlane
├── .env
...
`

### User Interface
The predefined user interfaces will look like as below...

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

Hope this npm package will helpful for your next application development. 

Your comments will be helpful for me to create such content.

**Start developing...**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqqzfgdim1sfy1ywgdg9.jpeg)
Simple add to cart animation with CSS & JS
Tags: html, css, javascript, webdev
Published: 2021-04-11 13:53:24

Hello, today I created a Simple add-to-cart animation with CSS & JS. Not great work but I hope you like this also comments about your thoughts. For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

New post :-
https://dev.to/nikhil27b/simple-copy-coupon-using-css-js-16d4

Thank you!
{% codepen https://codepen.io/NikhilBobade/pen/NWdyqoQ %}
How to manage different AWS profiles
Tags: aws
Published: 2021-04-11 13:46:28

---
title: How to manage different AWS profiles
published: true
description: 
tags: aws
canonical_url: https://medium.com/@max.borysov/how-to-manage-different-aws-profiles-4e279c6296ac
---

If you are using AWS tools, you probably know about **IAM(Identity and Access Management)**. Generally, it makes it possible to separate uses/roles to manage different services.

**The best practice**: do not use the root account for daily tasks. Create different IAM roles with limited access instead.

For instance, you have three projects. Therefore, the best way would be to create three users: user1, user2, user3.

- user1 can only manage S3
- user2 can manage EC2 instances and Load Balancer
- user3 can manage RDS

And you want to execute API calls to perform some actions.
Here is my favorite approach for that:
1. create `~/.aws/credentials` file
2. add sections for each user/profile
```yaml
[user1]
aws_access_key_id = xxx
aws_secret_access_key = xxx
[user2]
aws_access_key_id = xxx
aws_secret_access_key = xxx
[user3]
aws_access_key_id = xxx
aws_secret_access_key = xxx
```
3. run command with `--profile` param
```bash
aws rds create-db-instance --profile user1 ...
```

Run these commands to see the configurations:
```bash
aws configure list
aws configure list --profile user1
cat ~/.aws/credentials
```

You can also check these super helpful official articles.

- [Configuring the AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html)
- [AWS Named profiles](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html)
- [AWS Configuration and credential file settings](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html)
Can script tag have both src and content?
Tags: javascript, codenewbie, html, webdev
Published: 2021-04-11 13:45:11

You wanna be a software engineer at Google?
Sorry, this is not the part of our discussion today :grin:

> Can `<script>` tag have both `src` and content both?

Well the answer is Yes!! But the rendering is browser specific. 

Many of the modern browsers don't run content at all when the script tag has `src`. If the injection is unsuccessful the browser will log the error as `net::ERR_ABORTED 404 (Not Found)` and if it is successful it will execute the `src` script. 

According to [html.spec.whatwg.org](https://html.spec.whatwg.org/#the-script-element)
>**For the Content model of `script` tag**:
>- If there is no src attribute, depends on the value of the type attribute, but must match script content restrictions.
>- If there is a src attribute, the element must be either empty or contain only script documentation that also matches [script content restrictions](https://html.spec.whatwg.org/#restrictions-for-contents-of-script-elements).

Many programmers tend to put the content inside `script` and then use DOM methods to get the content as string and then _eval_ it. But this is not a good idea and hence must not be used.

#### So, What must be the content of the script which has src attribute? 
[HTML5 Draft specification](http://dev.w3.org/html5/spec/Overview.html#inline-documentation-for-external-scripts) suggests that `<script>` elements with `src` attribute must only include commented out code which gives the documentation of the script.

Again, there's a catch here as well. The following script will produce `syntaxError`:
```html
<script src="main.js">
    var example = 'Consider this string: <!-- <script>';
    console.log(example);
</script>
```
> I know it's weird but it is JavaScript after all.

The reason for the error is that browser does not find the closing tag for the `<script>` tag as `</script>` is considered to be the closing tag for `<script>` on line:2

> What is going on here is that for legacy reasons, "<!--" and `<script>` strings in script elements in HTML need to be balanced in order for the parser to consider closing the block.

To avoid such issues we can escape the `<script>` string as `<\script>` and thus our problems would be solved.


**Wrapping up**
- **Yes**, `<script>` tag can have both src and content where content shall only include the commented out code that provides the documentation about the src used.
- While using `<script>` as string always use escape sequence to avoid unnecessary problems. `<script>` string must be escaped as `<\script>` and `</script>` string as `<\/script>`


That's all for today! Hope you enjoyed the article and gained some
insights on the topic. 
*Or, Did I made you more confused?* :smile:


**Thank You!!**
Counter App- Day 15
Published: 2021-04-11 13:19:22

So, on day 15, I made a counter app, in which there are three buttons namely, increase, decrease and reset, So according to the name given, I added an event listeners for all the three buttons using for each loop for selecting all the buttons. 

For demo, visit my GitHub profile: https://ashuydv.github.io/counter_app/
Document your Azure Function using az-func-as-a-graph
Published: 2021-04-11 13:07:01

<sub>Photo by <a href="https://unsplash.com/@kellysikkema">Kelly Sikkema</a> on <a href="https://unsplash.com/s/photos/draw">Unsplash</a></sub>

I have found [this](https://github.com/scale-tone/az-func-as-a-graph) tool, that let your generate a beautiful image from your Azure function to document them.

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

Be aware that the tool require **Nodejs 10** !

In order to produce it, you need:
- to have installed globally Azure Function Core Tools
```bash
npm i -g azure-functions-core-tools
```
- to clone the tool in the directory of the function, and execute the following commands
```bash
npm install
npm run build
func start
```
You whould go to http://localhost:7071/ and see the following screen.

![Main Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyy7gwtviosga70fxrnu.png)

The tool will ask a github repo or a local path to document your Function. It will work with C# Azure Function.

Edit:
this is now available through a vscode extension : durablefunctionsmonitor.durablefunctionsmonitor


Hope this helps !
Pass additional operation to a function hook in windows
Tags: hhoohook, winapi, cpp, click
Published: 2021-04-11 12:57:30

Hi, I have been doing this to learn the windows internals and there's was the hook api click menu notepad thing I learned from http://diendan.congdongcviet.com/threads/t26558::hook-message-click-button-menu-tren-process-khac.cpp but here, I want to perform following things:-
Open file by

File -> New File in Notepad

But I don't seem to do so, anyone how this could be possible?
Thanks
Introduction to Watchdog timer and Significance of watchdog timer in embedded
Tags: python, pythonslearning
Published: 2021-04-11 12:51:28

<a href="https://pythonslearning.com/2021/03/introduction-to-watchdog-timer-and-significance-of-watchdog-timer-in-embedded.html">Introduction to Watchdog timer and Significance of watchdog timer in embedded</a>
For detailed explanation please see Introduction to Watchdog timer and Significance of watchdog timer in embedded 
INTRODUCTION:
Watchdog timer is a piece of hardware in micro-controller. Watchdog timer is used to generates system reset if system gets stuck somewhere i.e. if system goes into endless loop of execution watchdog timer will reset the system to come out of endless loop. Watchdog is safety mechanism in embedded system which makes your system reliable, but it depends on how you make use of watchdog timer.
1.1 How does watchdog works :
Watchdog is basically a counter, which starts from counting zero and reaches to a certain value. If counter reaches to certain value then watchdog hardware will generates a watchdog reset. To avoid system reset, software needs to kick the watchdog i.e. need to reset the counter to zero. In case software stuck into endless loop it system will not able to kick the watchdog hence counter reaches to certain value and resets the system.

Watchdog is initially loaded with certain value. This value is calculated based on timeout time of watchdog (Further section it is been shown how to calculate counter value based on timeout value). Before timeout time, system should reset the counter.
Resources :
https://pythonslearning.com/2021/03/introduction-to-watchdog-timer-and-significance-of-watchdog-timer-in-embedded.html