teleren/devto huggingface dataset:
How to Setup Web Deploy for IIS ?
Published: 2021-02-15 20:54:48

We can 'publish web applications' from Visual Studio to IIS directly without logging in to the VM or FTP.

-----------------------------------
##How does Web Deploy compare to FTP?
Web Deploy is often compared to technologies like FTP, XCOPY. 

###Here is a Benefits of Web Deploy :

1.  Web Deploy is faster than FTP. It does a comparison at the start of the sync and only transfers changes.
2.  Web Deploy is secure. (HTTPS).
3.  Web Deploy can set security descriptors (ACLs) on destination files and directories.
4.  Web Deploy can publish databases. 
5.  Web Deploy can apply transforms during deployment. Example: change a connection string or application setting during a sync.
6.  Web Deploy integrates with Visual Studio 2010.
 

##Configuring a Web Server for Web Deploy Publishing 
Here is the nice step-by-step instruction from Microsoft.
https://docs.microsoft.com/en-us/aspnet/web-forms/overview/deployment/configuring-server-environments-for-web-deployment/configuring-a-web-server-for-web-deploy-publishing-web-deploy-handler

-----------------------------------

##Reference:
https://docs.microsoft.com/en-us/iis/publish/using-web-deploy/introduction-to-web-deploy
Svelte & Tailwind CSS Development in VSCode Remote Container
Tags: svelte, tailwindcss, vscode, webdev
Published: 2021-02-15 20:49:40

---
title: Svelte & Tailwind CSS Development in VSCode Remote Container
published: true
description: A VSCode Remote Container for Svelte app development with Tailwind CSS and Snowpack
tags: #svelte, #tailwindcss, #vscode, #webdev
//cover_image: https://direct_url_to_image.jpg
---

## Background

It's been a while since my first [post](https://dev.to/patrickneise/svelte-development-with-vscode-remote-containers-2p80), so figured I would update the Svelte Remote Container example with some new additions and changes.

Features of the new VSCode devcontainer include:

- Svelte with Tailwind CSS starter app
- Tailwind CSS Debug Screens to show screen size during development
- Snowpack configured to optimize production build
- Dockerfile and nginx configuration for production build
- nginx config with caching and compression enabled
- Several VSCode extensions to support Svelte/Tailwind development

This setup has evolved over time as I've continued to learn Svelte and now Tailwind CSS (a great combination imho) and swapped out Rollup for Snowpack.

{% github patrickneise/svelte-snowpack-tailwind no-readme %}

## Getting Started

Clone this repo into a folder for your project

```bash
git clone https://github.com/patrickneise/svelte-snowpack-tailwind.git <your-project-name>
```

Change the origin to your project git repo

```bash
git remote set-url origin <path-to-your-project git repo>
```

Install dependencies

```bash
yarn install
```

Start the dev server

```bash
yarn start
```

Build something amazing with Svelte and Tailwind CSS

## Major Frameworks and Tools in the devcontainer

- [Svelte](https://svelte.dev/) - Front end development framework
- [Tailwind CSS](https://tailwindcss.com) - Utility-first CSS framework
- [Snowpack](https://www.snowpack.dev/) - Frontend build tool
- [Tailwind CSS Debug Screens](https://github.com/jorenvanhee/tailwindcss-debug-screens) - Shows the currently active screen

## VSCode Extensions in the devcontainer

- [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) - Syntax highlighting, code formatting, and rich intellisense for Svelte components.
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Intelligent Tailwind CSS tooling
- [Refactor CSS](https://marketplace.visualstudio.com/items?itemName=urbantrout.refactor-css) - Helps identify reoccuring CSS class name combinations in markup
- [Headwind](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind) - Opinionated Tailwind CSS class sorter

## Future Work

A few thoughts around what to add/update into the devcontainer:

- Typescript support
- Build out a more realistic starter app (components, pages, router, etc.)
- Eslint and prettier configs

Any other input/recommendations for how to make this devcontainer better would be greatly appreciated.
The easiest way to set up your next project
Tags: showdev, opensource, programming, productivity
Published: 2021-02-15 20:42:17

I recently open-sourced a collection of [boilerplate repositories](https://devskills.co/open-source/boilerplates) that I built for my [coding tests](https://devskills.co/) platform.

I've been using these templates to spin up a candidate's workspace, and after about 200 interviews, it has proven to be efficient.

There are other use-cases where this setup can be useful, e.g., one can also use it to bootstrap a portfolio project with one click.

## What's included

![The project setup](https://dev-to-uploads.s3.amazonaws.com/i/raxub6kjmt81oe0m8gpv.png)


Each project is hosted as a template GitHub repository and has the following structure:

1. A minimal app implementation in the tech stack of choice.
2. A suite of E2E Cypress tests.
3. A GitHub actions pipeline that spins up the app and runs the tests on every push.

## Available tech stacks 
There are currently nine projects available for backend, frontend, and full-stack profiles, but I'm planning to keep extending the collection.

![Available boilerplate](https://dev-to-uploads.s3.amazonaws.com/i/fhbr8eksqpqw4takf8nx.png)

## How to get started
Go to the [project boilerplate](https://devskills.co/open-source/boilerplates) webpage, select your favorite tech stack, and click on the "Use this template" button in the newly opened browser tab.

![How to use the templates](https://dev-to-uploads.s3.amazonaws.com/i/soheax38oprnp9uf5ftx.png) 

Hope you'll find this useful.

---

**Let me know in the comments what other templates I should add.** ✌️
Why would you want to use a linked list?
Published: 2021-02-15 19:58:22

The linked list is a pretty old data structure. It's not a new invention.

Historically, and in our programming languages, the linked list could help with memory management because in other programming languages, you often need to specify the size of an array in advance.
And that could be a problem, especially if memory is a scarce resource.

Of course, you shouldn't create apps that occupy tons of memory, but memory, of course was a much bigger issue a couple of years or decades ago.

Then linked list could be helpful because for linked lists, you don't need to specify the length in advance.
And that was one of the primary reasons why linked lists were invented and used.

In Javascript, we don't have that problem because the built in array is dynamic and grows and shrinks with the number of elements.

So we don't use linked lists in javascript because of memory reasons typically.
Instead, linked lists can be useful if you do a lot of insertions at the beginning of lists specifically.

For array, we have the problem that if we add an element at the beginning of an array, we have to shift all our elements by one element. And linked lists are fostered than arrays at this because there we don't keep track of the positions of elements. We don't have a long list of elements where every element has an index that we need to update.

Instead, inserting an element simply means that we added and stored the next element in the next property and that's it. The other nodes don't even recognise that something changed at the beginning of the list. And that's a scenario where linked lists shine.

That's the thing about Data Structures, we use them for niche optimizations and the insertion at the beginning would be the main advantage of the linked list.

Let me know what you guys think on this.
Using CSS Animation
Tags: css, cssanimation, transition, webdev
Published: 2021-02-15 19:56:03

We used CSS transition in the past, and sometimes, we may need to use `setTimeout()` to deal with multistep animations, or if we add a new element, and we want to transition it, because it first have to have an opacity of 0, and then transition to 1.

CSS Animation is ready for prime time.  [It can be used on most modern browsers](https://caniuse.com/css-animation).

Here is one demo: https://jsfiddle.net/KennethKinLum/q6gjhatd/

To be able to see it in a bigger window, we can use codesandbox.io: https://codesandbox.io/s/gifted-wozniak-wf09y and the full window page: https://wf09y.codesandbox.io/ or https://wf09y.csb.app/

Basically, we can just look at:

```js
 document.querySelector("#btn").addEventListener("click", ev => {
   const newRow = document.createElement("tr");

   addNewRow(tableElement, newRow);
   newRow.classList.add("new-row");
 });
```

It is adding a new class `new-row` to the row, and the class has this CSS Animation definitions:

```css
.new-row {
  animation: 1.2s forwards fade_in_and_settle;
}

@keyframes fade_in_and_settle {
  0% {
    opacity: 0;
    background: #fff;
  }

  50% {
    opacity: 1;
    background: #ff0;
  }

  100% {
    opacity: 1;
    background: #fff;
  }
}
```
It is just stating, at the very beginning (`0%`), how should the CSS style be, and also, at `50%`, and at `100%`.

The default behavior is, after the animation is complete, then the effect is removed and it is "reverted" back to before the animation.  Sometimes we want that behavior, and sometimes we want the effect to "stay" at its final state, even after the animation. Then the keyword `forwards` can to be used, like the following:

```css
.new-row {
  animation: 1.2s forwards fade_in_and_settle;
}
```
Without it, it would be back to before, and in this case, it is actually equally acceptable.

There are several other properties that can be useful. Refer to the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations) or [CSS: The Definitive Guide, 4th Ed](https://www.amazon.com/CSS-Definitive-Guide-Visual-Presentation/dp/1449393195), Chapter 18 for more info.  Some that are useful are:

- iteration count: it can be 1, 2, 3, or `infinite`, meaning repeat the animation and don't stop it.  The ReactJS spinning logo is done by `infinite` to make it always spinning.
- direction: it can be `normal`, `reverse`, and `alternate`. For example, if the requirement is to make the background go from green to red and back to green, and repeat, it can be `alternate` together with `infinite` above.
- timing function: it can be `ease`, `linear`, `ease-in`, `ease-out`, and even defined by our own cubic-bezier function. For more information, refer to the docs mentioned above.
Add Simple Analytics to a GatsbyJS website
Tags: gatsby, analytics
Published: 2021-02-15 19:52:28

I want to use analytics on my page for a long time. But using Google Analytics was a no go for me because of its’ privacy issues. So I looked out for privacy focused analytics software very early. Especially cookie-less analytics were something is something that I want to use. I don't like those cookie banners, so having a solution without one would be a great thing. [Simple Analytics](https://simpleanalytics.com) and [Fathom Analytics](https://usefathom.com) were solutions I liked. Both are bootstrapped indie companies which is something I value very much.

Simple Analytics is available in the [GitHub education pack](https://education.github.com/pack). It is possible to use it as a student for free for 1 year. So today was the day where I blocked the time to implement it on my [GatbsyJS](https://www.gatbsyjs.com) blog. In the following I will talk about how easy it is to add it to a GatsbyJS page.

## Installation
First you have to create an account with Simple Analytics. When you already have an account log into it. 
When you don't have a website added yet you will be redirected to the page where you can add one. Otherwise go to your dashboard and click on the **Add website** button. Then create add your website’s URL and hit the **Add website** button below the form.  

---
![add website button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6h4ncrz10mzp1r2gm24.png)  

---

To now add the `script` tags that are required to make the analytics work at the end of your `body` tag open up the `gatsby-ssr.js` file or create it in your Gatsby root directory. Inside of the file add the following lines:  
```js
export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"/>,
    <noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt=""/></noscript>
  ])
}
```  

`setPostBodyComponents`  will add the content of the array at the end of the `body` in the `html.js`  file created by GatsbyJS.

After that you can check if your page is able to build. If successful you can push your page to production. After finishing the GatsbyJS build and pushing it to the web, Simple Analytics will find your page automatically and will present you your website's dashboard. That's it. You successfully added Simple Analytics to your GatsbyJS site.

![simple analytics dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h0sb70b95kll6972t9e.png)

Thank you for reading, 
Niklas
MongoDB Marvels - Dancing with Dates - Series #12
Tags: mongodb, database, javascript, express
Published: 2021-02-15 19:47:46

MongoDB Marvels - Dancing with Dates - Series #12

# MongoDB - Working with dates

## Intro

If you insert a doc with no explicit PK (primary key) — which is by default a field with a _id key — Mongo will insert an autogenerated value for you.

One useful feature is that embedded in that PK is the ISODate.

We can extract it like this:
```js
  mgArr(dbEnum.nlpdb, collEnum.users_actions,
    { $addFields: { ts: { $toDate: "$_id" } } },
    lastInserted(1),
  )

```

We get this output:
```js
/*
@output

{
    _id: 60245842f36c37895594ebb0,
    actionCateg: 'fav',
    hw_id: 'distrail__01',
    user_id: '6024574e948c3b4a8cb99d2e',
    hw: 'distrail',
    isFav: true,
    ts: 2021-02-10T22:03:46.000Z
  }
*/
```

## Notes

Let me read in natural English what the query is doing:

Return an array from the mongo collection,
- but in the first stage of the pipeline, shape the resultset by adding a new field to it called ts (meaning timestamp, which will represent the original insert date of the record).

And the value of the new ts field will be retrieved from the _id field (the PK field).
Notice two things:
- we use the mongo $toDate operator as a utility function that extracts the date from the _id field.
Note the interesting syntax, which is when we want to reference a field key from the value side ({$MONGO_OPERATOR: VALUESIDE}), we prefix the key name with the dollar sign sigil. Since it's on the value side, it must be a string, so it's wrapped in quotes.

So to summarize, we added a field to our result set, whose key is "ts" and whose value is the extracted date from the _id field.

The output resultset has a new field called ts that is not in the document in the db collection. It was calculated on the fly.

This is a short example, but I wanted to explain it fully.


Not related to "dates" — but just to explain — the second stage (and last stage) is my lastInserted utility func which simply retrieves the last inserted doc from the collection.
Here's the source code for it if you're interested:
```js
/*
@param {number} lim - the count of the most recent inserted docs we want
@return {object[]} - an arr of two stages
*/
export const lastInserted = lim => {
  return [
    sortDesc("_id"),
    limit(lim),
  ];
};

```


## What's Next

As the Series continues we'll cover more interesting queries with dates.

For example, We can select sets of docs between dates, like monthly, weekly, daily, or hourly.

We can even create dimensions of time-series reports.

The limit is your imagination. :)
Adam L Barrett | ZDS 075
Tags: podcast, react, rxjs
Published: 2021-02-15 19:45:47

---
title: Adam L Barrett | ZDS 075
published: true
description: Adam L Barrett comes by ZDS to talk RxJS and React!!
tags: podcast, react, rxjs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l49s88bf1srvjsvnhvfz.png
---

{% youtube 0RFNAOmVAZg %}

Friend of the Show: Adam L Barrett stops by ZDS to Talk React and RxJS!!

=== Links ===
Adam's Twitter: https://twitter.com/adamlbarrett​
How it Should Have Ended: https://www.youtube.com/channel/UCHCp...​
Zack's Habit Tracker App: https://feb-cal-habits.web.app/​
Adam's Talk: "React Hooks: The Weird Ones": https://www.youtube.com/watch?v=HxY7S...​
Adam's Talk: "RxJS with React": https://www.youtube.com/watch?v=xUFxB...​
Positive and Negative Zero in JS: https://medium.com/coding-at-dawn/is-...​
90's Sega Tower of Power: https://www.youtube.com/watch?v=Y55ZB...​
Contemporary Mini Tower of Power: https://www.youtube.com/watch?v=MgoXE...​
Rich Hickey's Talk "Simple Made Easy": https://www.youtube.com/watch?v=oytL8...​
Interesting Talk From Adam Thornhill on Measuring Velocity/Tech Debt (I forget the name of this talk/presenter during the conversation): https://www.youtube.com/watch?v=fl4aZ...​
What is Zalgo: https://knowyourmeme.com/memes/zalgo​

=== Chapters ===
00:00​ Shameless Groveling for Likes
00:29​ Friend of the Show: Adam L Barrett
00:51​ Tools and Being a Proper Dad
03:50​ RxJS for Changing Properties in Angular && How Hooks fill that niche in React
10:30​ React as Synchronous Renders Based on Discrete State
16:27​ RxJS with `useEffect()` as a Way to Enhance React Goodness
31:02​ Context as React's Dependency Injection && Advantages to React Components Over Angular Components
39:01​ Side Conversation on Default Contexts for a React Context
48:45​ Exploring RxJS for Push Architectures in React
54:38​ Lack of Domain Specific Knowledge in React
1:02:18​ React Hooks vs. Classes and Learning the History of a Framework
1:05:00​ The Optimal Order To Learn Fundamentals
1:07:07​ How to Measure/Improve Velocity
1:14:50​ Cold and Hot Observables as Opposed to Cold and Hot Promise
1:23:50​ Asynchronicity in React and Summoning Zalgo
1:30:03​ Aside: New Methods to convert Observables to Promises
1:32:30​ React as a Framework, Isolation and Separation of Concerns
1:36:10​ The Robustness of Observables, and the Cost of RxJS
1:40:42​ NgRx as a Valuable Tool To Flatten the RxJS learning curve
1:48:22​ Facade and Adapter Patterns
iota: Initialize a C++ container with increasing values
Tags: cpp, computerscience
Published: 2021-02-15 19:36:42

In C++, when we want to initialize a container(say vector) with increasing values, we tend to use for loop to insert values like this: 

```
vector<int> array;
for(int i = 0; i < 10; i++) {
    array.push_back(i);
}
// array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
```

To achieve the same thing, we can use a function defined in the C++ Algorithm library, let's first see it in action before going into details: 

```
vector<int> array(10);
iota(array.begin(), array.begin() + 10, 0);
// array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
```

See, how easy it becomes to initialize a container with sequential values starting from any integer. Let's now move forward and know more about this function.

## Use

Include the required header file in order to be able to use the **iota** function. You can either include _bits/stdc++.h_ or include _algorithm_ and _numeric_ on the top of your .cpp file.

## Accepted function parameters

1. Starting address of the container
2. Address up to which the container needs to be filled with sequential values
3. Initial value to be assigned (after which it is auto-incremented and assigned)

> Note: This function doesn't return anything.

## Things to keep in mind

- The array must be initialized with some size before using this function.
- The second parameter (last address up to which values are filled) should not exceed the ending address of the container. 
- We can use `array.end()` as the second parameter for filling the whole container
- We can pass either an integer variable or a constant (as done in the above snippet)

For full reference, visit [here](https://en.cppreference.com/w/cpp/algorithm/iota)

If you find anything wrong or if you know some more exciting functions or other stuff related to C++, please drop a comment below so we learn together.

My Profile -

[Github](https://github.com/satyam1203)
[LinkedIn](https://linkedin.com/in/satyam1203)
Create A Chatbot GUI Application With Tkinter - Python Tutorial

Tags: python, vscode, ai, programming
Published: 2021-02-15 19:34:06

Python developers (and chatbots) - this is for you!Check out @python_engineer's new tutorial. It has everything we love so much: #programming, #AI, #chatbots and VSCode

 {% youtube RNEcewpVZUQ %}
How to view the raw markdown of a dev.to post
Tags: markdown, meta
Published: 2021-02-15 13:20:51

Sometimes on dev.to, you might come across an article that uses some interesting markdown or [liquid tags](https://docs.dev.to/frontend/liquid-tags/) and wonder how it was created. Well, wonder no more!

dev.to is built on top of the forem software, which has a [well-documented API](https://docs.forem.com/api/). Each path is resolved relative to `https://dev.to/api`, so to get information about an article, all you need to do is add [`/api/articles`](https://docs.forem.com/api/#operation/getArticleByPath) in front of the pathname (username and slug).

For example, information about this article can be found here:
https://dev.to/api/articles/lionelrowe/how-to-view-the-raw-markdown-of-a-dev-to-post-391b

The raw markdown can be found under the `body_markdown` field.
 
Alternatively, here’s a browser console-friendly snippet:

```js
;(async () => {
    const url = new URL(window.location)
    url.pathname = '/api/articles' + url.pathname
 
    const res = await fetch(url)
    const { body_markdown } = await res.json()
 
    console.log(body_markdown)
})()
```
Master in CSS in 2021
Tags: css, showdev, webdev, tips
Published: 2021-02-15 19:00:32

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)

Web design is one of the areas with the highest growth in recent years (if I will tell you, I have only been in this world for 3 years and I have never stopped because something new comes out every day 😄).

So I give you the key points to become an expert, I say expert, a complete MASTER in CSS and you can apply to any job today as a Frontend Developer (of course you should also know HTML and JS, but today we will see CSS).

## 1. CSS from Zero

**Make the web beautiful** with the only language created for design, start playing with this wonderful language and you will see how everything begins to take shape.

## 2. Flexbox and GridCSS

**Design flexible interfaces** with the system used by all CSS frameworks (Bulma, Bootstrap, Tailwind, etc).

## 3. Advanced CSS

Learn in depth the **various modules that css has**, such as things like pseudoElements or pseudoSelectors, among others.

## 4. CSS variables

**CSS has native variables with TOTAL browser support!** Learn to use them and you will be able to boost your design to a more dynamic and professional level (almost approaching programming as in other languages).

## 5. Responsive Web Design

Design websites and apps that **look perfect on any screen size**. Learn how your traditional designs can be scaled with the **MediaQuerys** to give specific styles for both laptop screens and mobile phone screens.

## 6. Animations with CSS

**Create animations optimized** for the web in 2D and 3D without programming, just with a few lines of CSS thanks to properties like _transforms_ and _animation_.

## 7. Preprocessors from Zero

Convert your styles **CSS into a programming language** (now yes) with preprocessors such as Less, Stylus or SASS (we could even say that Postcss but this is called a PostProcessor, something through which your final styles pass in order to optimize them more).





<center>
If you liked the content you can support me in:
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)

<center>
Want to earn free Bitcoins and Dogecoins? Click on the banner!
</center>

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)