teleren/devto huggingface dataset:
{emayili} Interpolating Message Content
Published: 2021-09-25 11:10:39

---
title: {emayili} Interpolating Message Content
published: true
date: 2021-09-03 00:00:00 UTC
tags: 
canonical_url: https://datawookie.dev/blog/2021/09/emayili-interpolating-message-content/
---

![{emayili} Interpolating Message Content](https://datawookie.dev/blog/2021/09/emayili-interpolating-message-content/featured.jpg)

A small new feature added to [`{emayili}`](https://github.com/datawookie/emayili): the ability to interpolate content into the email message body.

## Load Package

Load the `{emayili}` package and create a message skeleton.

```
library(emayili)

options(
  # Always print message body.
  envelope_details = TRUE,
  # Print message from pipeline.
  envelope_invisible = FALSE
)

# Create a message skeleton.
#
email <- envelope()
```

## Body

Now let’s look at different ways to add a text body.

If you know precisely what your message is going to say, then you can just write it straight into the message body.

```
email %>% text("Hello Alice!")

Date: Fri, 03 Sep 2021 09:07:10 GMT
X-Mailer: {emayili}-0.4.17
MIME-Version: 1.0
Content-type: multipart/mixed; boundary="1133f2d1f303af212e1f293e2c361c"

--1133f2d1f303af212e1f293e2c361c
Content-Type: text/plain; charset=utf-8
Content-Disposition: inline
Content-Transfer-Encoding: 7bit

Hello Alice!

--1133f2d1f303af212e1f293e2c361c--
```

But what if a part of the message is stored in a variable? Use the `{glue}` syntax for variable interpolation.

```
name <- "Bob"

email %>% text("Hello {name}!")

Date: Fri, 03 Sep 2021 09:07:10 GMT
X-Mailer: {emayili}-0.4.17
MIME-Version: 1.0
Content-type: multipart/mixed; boundary="1133f2d1f303af212e1f293e2c361c"

--1133f2d1f303af212e1f293e2c361c
Content-Type: text/plain; charset=utf-8
Content-Disposition: inline
Content-Transfer-Encoding: 7bit

Hello Bob!

--1133f2d1f303af212e1f293e2c361c--
```

This should make generating automated (yet personalised!) emails a lot simpler. For example, here’s how you’d go about creating emails from a data frame with columns holding names and email addresses.

```
tribble(
  ~email, ~name,
  "alice@google.com", "Alice",
  "bob@yahoo.com", "Bob"
) %>%
  pwalk(function(email, name) {
    email <- envelope(to = email) %>% text("Hello {name}!")
    print(email)
  })

Date: Fri, 03 Sep 2021 09:07:10 GMT
To: alice@google.com
X-Mailer: {emayili}-0.4.17
MIME-Version: 1.0
Content-type: multipart/mixed; boundary="153ce203c1ff10232f22237eb5"

--153ce203c1ff10232f22237eb5
Content-Type: text/plain; charset=utf-8
Content-Disposition: inline
Content-Transfer-Encoding: 7bit

Hello Alice!

--153ce203c1ff10232f22237eb5--
Date: Fri, 03 Sep 2021 09:07:10 GMT
To: bob@yahoo.com
X-Mailer: {emayili}-0.4.17
MIME-Version: 1.0
Content-type: multipart/mixed; boundary="92832121424fb5133d2a1220371b"

--92832121424fb5133d2a1220371b
Content-Type: text/plain; charset=utf-8
Content-Disposition: inline
Content-Transfer-Encoding: 7bit

Hello Bob!

--92832121424fb5133d2a1220371b--
```

Unleash your inner spam king.
Build quality in
Tags: qa, codequality
Published: 2021-09-16 08:09:39

---
title: Build quality in
published: true
date: 2021-09-03 00:00:00 UTC
tags: qa,quality
canonical_url: https://jhall.io/archive/2021/09/03/build-quality-in/
---

> Cease dependence on inspection to achieve quality. Eliminate the need for inspection on a mass basis by building quality into the product in the first place.  
> — W. Edwards Deming

Is “quality assurance” a separate stage in your software development pipeline? This is a “smell”, an indicator of deeper problems. It’s non-agile. In fact, it’s the epitome of waterfall! It may not be wise to immediately remove this stage, but you should begin looking for ways to eliminate “quality” as a _stage_, by finding ways to build quality in from the beginning.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to add a number type annotation to a variable or a constant in TypeScript?
Tags: typescript
Published: 2021-09-03 00:00:00

---
  title: How to add a number type annotation to a variable or a constant in TypeScript?
  published: true
  tags: TypeScript
  date: Fri Sep 03 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-number-type-annotation-to-variables-constants-in-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-c93e14a5994dc660b9d209b43b902a61.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-number-type-annotation-to-variables-constants-in-typescript)
  
To add a number type annotation to a variable or a constant, you can declare the variable or constant followed by a `:` (colon) symbol and then the type `number` in TypeScript.

For example, let's say we have a variable called `myNumber` and want to only have the `number` type as the values. To do that we can annotate the type `number` to the `myNumber` variable like this,

```ts
// add number type to a variable
let myNumber: number;
```

After initialization, let's assign a number value of `100` to the variable `myNumber`. It can be done like this,

```ts
// add number type to a variable
let myNumber: number;

// assign a number value to the myNumber variable
myNumber = 100; // ✅ allowed
```

As you can see from the above code TypeScript allowed us to assign the number value of `100` to the variable `myNumber` since the allowed type for the `myNumber` variable is `number`.

Now let's try to assign another value of `string` type `Hello World!` to the `myNumber` variable to see what happens,

```ts
// add number type to a variable
let myNumber: number;

// assign a number value to the myNumber variable
myNumber = 100; // ✅ allowed

// assign a value of type other than a number
myNumber = "Hello World!"; // ❌ not allowed. Type 'string' is not assignable to type 'number'.
```

As you can see that the TypeScript will throw an error saying that the `Type 'string' is not assignable to type 'number'.` which is also what we want to happen.

### Bonus

Most of the time TypeScript will try to infer the type of the variable from the value it is assigned.

For example, let's declare a variable called `myFavNum` and assign the `number` value of '1000' without actually declaring the type `number` as we did above. It can be done like this,

```ts
// Typescript infers the type from
// the value it is assigned
let myFavNum = 1000;
```

Now if you hover over the variable `myFavNum` we can see that TypeScript has automatically got that type of the variable `myFavNum` is of type `number`.

Since the TypeScript has already got the type is of `number` value and whenever we try to reassign a value other than the type `number`, The compiler will throw errors like from the above.

See the execution of the above codes live in [codesandbox](https://codesandbox.io/s/add-number-type-to-variables-in-typescript-eb9mg?file=/src/index.ts).

That's all 😃!

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

---
Effective Go on GCP: Lean containers with ko on cloud build
Tags: googlecloud, go, gcp
Published: 2021-09-02 23:56:00

---
title: Effective Go on GCP: Lean containers with ko on cloud build
published: true
description: Using ko we will use that to create lean containers from our go code without a docker file
tags: googlecloud,go,gcp
//cover_image: https://direct_url_to_image.jpg
---

## What is ko?

`ko` is a technology that allows for building simple go applications into a container.

As long as the application does not need any os level package dependencies, ko is an easy and streamlined way to create
simple go applications as container. To read more check out the [github repo](https://github.com/google/ko) for ko.

## Using ko on gcp

We will focus on using cloud build, gcr and cloud run for our usage of ko in this example. There is a couple extra steps
involved in being able to use ko on cloud build, but the process should be straight forward.

Using the cloud-builders-community repo, we will grab the `ko` builder and run it through our projects cloud build
pipeline. I have this step in my makefile

```makefile
.PHONY: setup-ko-gcr
setup-ko-gcr:
    git clone git@github.com:GoogleCloudPlatform/cloud-builders-community.git --depth=1;
    gcloud builds submit ./cloud-builders-community/ko --config=./cloud-builders-community/ko/cloudbuild.yaml
    rm -rf ./cloud-builders-community
```

Now when this is done, we will have the ko builder available to us under our private gcr repo
of `gcr.io/[project-id]/ko`.

Next we will look at our applications `cloudbuild.yaml` file.

```yaml
steps:
  #  using our ko builder we will build our application that lives in ./cmd/ko
  - name: gcr.io/$PROJECT_ID/ko
    entrypoint: /bin/sh
    env:
      - 'KO_DOCKER_REPO=gcr.io/$PROJECT_ID'
    # we write the result of ko publish to a txt file so we can persist the variable between steps
    args:
      - -c
      - |
        echo $(/ko publish --preserve-import-paths ./cmd/ko) > ./ko_container.txt || exit 1

  # Deploy container image to Cloud Run
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    entrypoint: /bin/bash
    args:
      - -c
      - |
        gcloud run deploy ko \
        --image=$(cat ./ko_container.txt) \
        --region=us-central1 \
        --platform=managed

```

From us running `gcloud builds submit --config=./cmd/ko/cloudbuild.yaml` we will have our image uploaded to gcr and
deployed to cloud run!

You can view the full reference repo here https://github.com/amammay/effectivecloudrun
how to install TailwindCSS via NPM (all steps explained)
Published: 2021-09-02 23:53:04

Hey tailwind CSS fans, I know most newcomers use CDN, so I thought of making a quick guide on how to install tailwindCSS via npm so you can use it for your vue or react js project or even HTML files.
for a deatiled in depth tutorial you see [this](https://www.youtube.com/watch?v=QoI-4Ep3Auo)

The first step is to make a folder where the tailwind CSS will reside

    mkdir tailwind_with_npm

now, go inside the folder

    cd .\tailwind_with_npm\

Now make a package.json file

    npm init -y

Now install tailwindCSS package and some other packages with npm

    npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Now create a `index.html` file and `style.css` file

Inside the style.css file paste the below code and leave the html page for now

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

Now the we are going to to generate a fully compiled Tailwind CSS file from style,css

    npx tailwindcss -i style.css -o tailwind.css

Now we are going to use the compiled tailwind.css file inside our index.html, to do that paste the below code in your html file

    <!doctype html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link href="tailwind.css" rel="stylesheet">
    </head>
    <body>
    <p class=”text-red-900”> Hello world </p>
    </body>
    </html>

Now open the html file in your browser, and if you see the *hello world* written in red, congrats tailwind CSS is working fine.

You may find this video helpful for a better and more in-depth understanding

{% youtube QoI-4Ep3Auo %}
Add clickable anchor links to headers in Nuxt Content
Tags: nuxt, tailwindcss
Published: 2021-09-02 21:49:18

When you're browsing documentation sites, you'll often see that there is a little link or hashtag icon that appears when you hover over header text. 

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

These are awesome because they link to the anchor tag for that header, making that specific section of documentation easier to share with others. 🤝

I created [Cleavr's documentation site](https://docs.cleavr.io) a while back using the [NuxtJS Content module](https://content.nuxtjs.org/). If you visit their site, you'll notice they also have this feature enabled. 

So, of course I wanted to do it for Cleavr's docs!

It's relatively easy to add, as there is an un-styled `a href` tag with classes `icon` and `icon-link` that you can tap into. 

You'll just need to add some styles to expose the link. 

I saw there was a reference on [Create a Blog with Nuxt Content](https://nuxtjs.org/blog/creating-blog-with-nuxt-content) that tells you how to display it, but it only does half the job as I want the icons to only display when you hover over the header text. 

If you are using Nuxt Content and TailwindCSS, here is a quick way to make it work: 

## Add an icon to static directory
For example, I added [the hero icons link icon](https://heroicons.com/): `static/icons/link.svg`

## Update CSS
Next, I updated the `main.css` file with the following: 

```css
.icon.icon-link {
  @apply absolute  opacity-0 h-4 -ml-6 w-10 bg-no-repeat;
  background-image: url('/icons/link.svg');
  margin-top: 6px
}

h2:hover .icon.icon-link, h3:hover .icon.icon-link, h4:hover .icon.icon-link, h5:hover .icon.icon-link {
  @apply opacity-100;
}
```

And that's it! 

--- 

For the hover over opacity, if you know of a cleaner looking way to do that, please comment below! 🙏
Break into tech via an internship
Tags: career, beginners, codenewbie, student
Published: 2021-09-02 23:34:58

---
title: Break into tech via an internship
published: true
description: Want to get started in tech, but don't know where to start? Start here with this trio of modules that takes you from skilling yourself up, interviewing for a role to growing that role into a full-time position.
tags: career, beginners, codenewbie, student
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhjgf6bhu9wobv2e9f2m.jpg
---

Are you looking to get into tech? Don't know where to start? Start here, with this 3-part module series on everything you need to know to from starting in tech to landing an internship to turning that into a full-time position. 

Here the learning path [Start a career in tech](https://docs.microsoft.com/en-gb/learn/paths/start-career-in-tech/)

- [Get noticed](https://docs.microsoft.com/en-gb/learn/modules/career-get-noticed/) Grow your tech skills and learn where and how to network, even as a student

- [Successful interviewing](https://docs.microsoft.com/en-gb/learn/modules/career-interview/) prepare for different types of interviews, tech and non tech ones

- [From intern to full time position](https://docs.microsoft.com/en-gb/learn/modules/career-growth/). Grow in your role as an intern, and turn that into a full-time position.

 

Here from [Eleanor Lewis](https://www.microsoft.com/en-gb/videoplayer/embed/RE4OPAi?postJsllMsg=true&autoCaptions=en-gb), intern that now works full-time at Microsoft.
The 7 Core Advantages of SEO
Published: 2021-09-02 23:12:01

We have nailed down an extensive list of 52 advantages to just 7 core advantages of SEO.

The 7 Core Advantages of SEO; 
#1 SEO anticipates the future
#2 SEO finds people ready to buy 
#3 SEO is long-term
#4 SEO is an inbound game
#5 SEO is grounded in the truth
#6 SEO drives significant results
#7 SEO provides strategic direction

I would be interested to hear what you developers think, did I miss anything from the list.

You can find the full post here: [The 7 Core Advantages of SEO](https://concoursemarketing.com/advantages-of-seo/)
Redux: What is Provider?
Tags: redux, react, javascript, statemanagement
Published: 2021-09-02 23:00:45

## Today we are talking about Provider!

:sparkles::sparkles::sparkles:

Provider is a <strong>component</strong> given to us to use from the <strong>react-redux node package</strong>.

We use Provider in order to pass <strong>the store</strong> as an attribute. By passing the store as an attribute in the Provider component, we are avoiding having to store <strong>the store</strong> as props. 

As we know, applications can be very complex and extensive, thus having many React components. Provider eases the pain of having to pass the store as props into each component. ***This ultimately dries our code, saves time, and eases readability.*** 

Let's take a look at Provider in action: 

```js
//index.js

import { Provider } from "react-redux"

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider >,
  document.getElementById('root')
)
```

As you can see this is a small piece of code. Yet, it encompasses our entire project: every component and all of the state + props in our application. 

***See? I told you Provider dries up our code.*** 

Now let me explain what is happening in this bit of code:
1. Import Provider component from the 'react-redux' node package. 

2. Using ReactDOM.render() we pass in two (2) arguments:
   * Provider wrapping our top-level component 'App'.
   * the HTML element in which we are rendering the first argument. 

3. The Provider component wraps our top-level component, so as to say "every child component of your App component will have access to the store".

4. We pass our "store" constant to a store attribute. (The creation of our store constant is not pictured). 

:dizzy::dizzy::dizzy:
## Vocabulary

* <strong>the store</strong>: given to us from Redux; it is the single location where an application's state is stored. 
* <strong>Redux</strong>: a state management library. 
*  <strong>component</strong>: an individual unit of UI given to us by React -- helps to separate concerns + responsibility. 
* <strong>props</strong>: data passed from parent component to child component in React. 
* <strong>node package</strong>: contains all the files you need for a module. 
* <strong>module</strong>: JS libraries with prewritten code that provides us with built in behaviors + methods. 


:dizzy:Feel free to ask any questions:dizzy:
:dizzy:Continue the discussion below:dizzy:


:sparkles:Thanks For Reading!:sparkles:
Repositórios de dados abertos para programadores
Tags: database, opendata, opensource, github
Published: 2021-09-04 13:18:37

---
title: Repositórios de dados abertos para programadores
published: true
date: 2021-09-02 22:31:16 UTC
tags: database,OpenData, opensource,Github
canonical_url: https://mazer.dev/repositorios-de-dados-abertos-para-programadores/
---

Awesome Data Table References é um repositório de minha responsabilidade, onde faço curadoria de referências para tabelas de dados abertos de instituições e órgãos brasileiros e mundiais. 

Sempre que é necessário criar um campos de escolha de municípios, estados brasileiros, buscas por CEP, identificação por raça ou cor, os desenvolvedores se vêem construindo estes dados manualmente, muitas vezes com códigos diversos de tabelas cadastrais base.

Atualmente o repositório fornece os arquivos de dados para baixar em versões originais CSV, XLS, ODS, XML ou JSON.

O repositório é constantemente atualizado com melhorias, sendo que um dos itens de roadmap é a organização em modelos de dados prontos, com dump em SQL para facilmente serem incorporados em bases MySQL, PostgresSQL, SQLite, MongoDB, etc.

Organizações com dados disponíveis: IBGE, INEP, Governo Brasileiro.

O post [Repositórios de dados abertos para programadores](https://mazer.dev/repositorios-de-dados-abertos-para-programadores/) apareceu primeiro em [MAZER.DEV](https://mazer.dev).

{% github nunomazer/awesome-datatable-references %}
How to: Connect a MS Bot Framework chatbot to MS Teams using Azure
Tags: tutorial, azure, chatbot
Published: 2021-09-02 22:09:08

For this tutorial I'd like to show how you can attach a chatbot to a channel in MS Teams.

**Step 1:**
To start in Azure we need to create an Azure Bot. This is a service that is going to allow us to seamlessly integrate with our MS Teams instance. Is defines settings and configurations, for connecting the bot to MS teams. Here are the settings that I had used to deploy the Azure Bot:
![Azure Bot Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lafjb7j6kvs0tj2jglca.PNG)
 
It is worth mentioning that I had set the option 'Microsoft App ID' to 'Create new Microsoft App ID' instead of using an existing app registration. You can use an existing one if you need to but, I didn't want to go and create a new one manually. 


**Step 2:**
Next we need to configure the Azure Bot to connect with the messaging endpoint of our bot. To do this we will start by going to the Configuration panel and setting the messaging endpoint of our bot.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c05cu8i67gtonsux65t.png)
The rest of the settings should be fine in the Configuration panel. Don't forget to click apply afterward. 
It is also worth noting that in you App Service for your bot you need to add the app settings for: 'MicrosoftAppPassword' and 'MicrosoftAppId' with values from the Microsoft App registered with the Azure Bot. This is so that the two can authenticate with each other.
You can test if the configuration is correct at this time by going to the 'Test in Web Chat' panel and messaging your bot.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtgsi1mpx83vbjuj3m9u.png)


**Step 3:**
Next up we need to configure the channels, so that we can access our bot on teams.
To do this we need to go to the Channel panel and then click on the MS Teams icon. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hi67ti30zxfbbajey1ls.png)
From here its just a matter of ticking some boxes well.. only one that being Microsoft Teams Commercial under messaging. The rest of the defaults are fine. Next it is on to testing the bot in teams. This is just two clicks away. First click on channels then on 'Open in Teams'. You should be presented with the 'Join Conversation' page in MS Teams.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb4fndpqzw2hbzhw1r95.png)
Open in teams, and you can see...
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7nttafgahinabdgcvhl.png)
 
As you can see we can contact the bot through a channel in MS Teams. From here, you start contacting your bot through chats, using the new chat box at the top of the screen in Teams.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeewjs6w9w8204u2z8h5.png)
 

<br/><br/>
If you found something useful in the blog post feel free to leave a like I'd really appreciate it.
You can also connect with me on [Linkedin](https://www.linkedin.com/in/albert-bennett/) as well if you'd like.
Hey!
Published: 2021-09-02 22:08:11

# Why I Made This:
This blog is kind of an impulse decision on my part. When COVID-19 hit, I was stuck in home and had a lot of time on my hands. I wanted to try something new and sense I had some time a blog was the best choice.

**To Be Honest**: I really don’t know what I’m going to write about specifically, but I’ll hope you will join my along my journey.

# Thank You
Thank you, yes *you*, for taking the time out of your day to come and read this.