teleren/devto huggingface dataset:
Interview: Strategic Goals of Developer Relations
Tags: devrel
Published: 2022-08-23 15:29:13

---
title: Interview: Strategic Goals of Developer Relations
published: true
date: 2021-12-17 17:58:28 UTC
tags: DevRel
canonical_url: https://maxkatz.org/2021/12/17/interview-strategic-goals-of-developer-relations/
---

[![Photo by Skitterphoto on Pexels.com](https://katzmax.files.wordpress.com/2021/12/bull-center-bulls-eye-darts-15812.jpg)](https://katzmax.files.wordpress.com/2021/12/bull-center-bulls-eye-darts-15812.jpg)
_Photo by Skitterphoto on Pexels.com_

I was interviewed by [Pandium](https://www.pandium.com/) about strategic goals of Developer Relations. [Read the interview](https://www.pandium.com/blogs/strategic-goals-of-developer-relations-interview-with-max-katz).
Programming Advent Calendar
Tags: programming, choosetochallenge
Published: 2021-12-17 17:53:17

Hey all,
This is a late post because I've only just created my account! Should really have been here at the start of December, but it's here now!

I have created a programming advent calendar. It was made as a Python advent calendar, but you can use any programming language really.

> Visit - https://advent-calendar.dillonb07.is-a.dev

Happy Coding,

DillonB07
Create Simple Portfolio Website using HTML CSS | Portfolio Website Source code
Tags: html, css, javascript, webdev
Published: 2021-12-17 17:28:11

First and foremost, we need to make the backbone of our website, an HTML file. I made the HTML file and named it ‘index.html’. Since we'll be using CSS as well, in the same folder I made a CSS file, named ‘styles.css’. In the index.html, we need to give the following lines of code.

```
<!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <link rel="stylesheet" href="./styles.css">  
   <link rel="preconnect" href="https://fonts.googleapis.com">  
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  
   <link rel="preconnect" href="https://fonts.googleapis.com">  
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  
   <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;400;700&family=Poppins:wght@200&display=swap"  
     rel="stylesheet">  
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">  
   <title>Portfolio</title>   
 </head>  
 <body>  
 </body>  
 </html>  
```
If you’re using VS Code and have an HTML extension installed, you just need to type ‘!’ and press enter. If you’re not, feel free to copy paste these lines. Discussing about them is not necessary, just know that they let the browser know you're trying to run a webpage. Also, they are importing all the CSS you'll be writing in 'styles.css'.
 
Now take a look at what we’re building.read more[][(https://www.codewithrandom.com/2021/12/simple-portfolio-website-using-html-css.html)]
Utilizing context to load data in Gatsby at runtime
Tags: gatsby, javascript, react
Published: 2021-12-17 17:26:45

If you are building a website on Gatsby it is very likely that you will want to load data from an external source, i.e. database.

There are two ways to do it with Gatsby:

1. **Load data i build time**: the data is loaded during site build and then it is queried through Gatsby GraphQL. This approach works well for static data that doesn't change often.
2. **Load data at run-time**: the data is loaded at runtime via APIs. This approach works well for dynamic data.

But even for this specific task there are multiple ways to do it. There are blogposts and that have specific components pull data from API whenever the component is displayed/mounted/.

Pros: the component data is alway up to date.

Cons: whenever user makes the component to unmount, for example when user clicks on another page within the website. If the API performance is not very good, for example.

Below we will take a look at how you can use contexts to load data through API on site load and make it accessible for all components.
How to install and run Swift on Linux
Tags: swift, linux, ubuntu, programming
Published: 2021-12-17 17:14:51

# How to install and run Swift on Linux

A step by step guide on how to install Swift on Ubuntu 20.04.

## Setup

Download Swift from https://swift.org/download/ -> select the Toolchain archive for **Ubuntu 20.04**



Extract the archive, then open **~/.bashrc** and append this line:

```sh
PATH="/.../<absolute-path-to-the-extracted-swift-folder>/usr/bin:$PATH"
```


Reload **.bashrc** with `source ~/.bashrc`



Install the required dependencies. See https://swift.org/download/#using-downloads -> Linux -> Installation -> Install required dependencies (for Ubuntu 20.04)

```sh
sudo apt-get install \
          binutils \
          git \
          gnupg2 \
          libc6-dev \
          libcurl4 \
          libedit2 \
          libgcc-9-dev \
          libpython2.7 \
          libsqlite3-0 \
          libstdc++-9-dev \
          libxml2 \
          libz3-dev \
          pkg-config \
          tzdata \
          uuid-dev \
          zlib1g-dev
```




Test it, in a terminal:

```sh
swift --version

# you should see something similar to
Swift version 5.5.2 (swift-5.5.2-RELEASE)
Target: x86_64-unknown-linux-gnu
```


## Create an example app



Make a folder:

```
mkdir swift-app
cd swift-app
```




Then generate an empty project with:

```sh
swift package init --type executable
```




build it:

```sh
swift build
```


and run the executable:

```sh
.build/debug/swift-app

# or
swift run

# it should print Hello, world!
```
Customize Linear’s Slack Notifications
Tags: integrations, saas, linear, slack
Published: 2021-12-17 16:34:29

---
title: Customize Linear’s Slack Notifications
published: true
description: As a software developer, you can build flexible and customizable integrations between Linear and Slack using Fusebit. 
tags: Integrations, SaaS, Linear, Slack
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t97pnysr6bel7yij1qnc.png
---

As a software developer, you can build flexible and customizable integrations between Linear and Slack using Fusebit. These integrations can be as complex as summarizing the status and updates of all the Linear issues in your Slack workspace or as simple as sending a congratulations message in Slack when you complete a new issue in Linear.

For example, receiving the following Slack message:

![Slack and Linear integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci70mkbrvdc1fa7iapgs.png)

You or your engineering team can run this integration by clicking [here](https://api.us-west-1.on.fusebit.io/v2/account/acc-f64569d3c8c14166/subscription/sub-1431c8fd3dc14cbe/integration/linear-slack-notification/api/service/start)

To learn more, check out the [full blog post](https://fusebit.io/blog/customize-linear-slack-notifications/)

## Run the Integration
Finally, when you or somebody on your team completes a Linear issue, you will see a congratulations message on a Slack channel! You can go beyond and customize the Linear-Slack integration as you want, creating common Slack alerts, automated tasks, or the workflow of your preference.

### Looking for more integrations?
If you are a developer looking to create flexible and powerful integrations using other SaaS platforms or tools, check out [Fusebit](https://fusebit.io/) and follow us on [Twitter](https://twitter.com/fusebitio)!
CSS Attribute Selectors
Tags: webdev, css, beginners, tutorial
Published: 2021-12-17 16:24:36

![CSS Attribute Selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4d5fucjcs02ocx008288.jpg)CSS Attribute Selectors. An attribute selector in CSS is utilized to pick any HTML elements with some particular attribute value or attribute. This is an excellent technique to style any HTML elements by making an attribute selector arrange them based on some single attributes and the single attribute selectors which is selecting those elements with the same attribute values or attributes. In our last article we discussed about [Types of CSS Selectors](https://dev.to/elinabey/types-of-css-selectors-1007)

**Example: ** As we know that styles the HTML tags with their tag names, ID names, class names, etc. These will apply the settings to the complete tag or complete class or complete id names within the page.

##How does Attribute Selector work in CSS?
CSS attribute selector is operating based on attribute preference given to a specific selector. 

##CSS Attribute Selectors
1.[attribute] Selector
2.[attribute~="value"] Selector
3.[attribute="value"] Selector
4.[Attribute$=” value”] selector
5.[attribute*="value"] Selector

###[attribute] Selector
This is used to pick an HTML tag with the wanted attribute only.
```HTML
<a href="#">Home</a>
<a href="#" target="">Services</a>
<style>
a[target] { /*This will color the a tag with target attribute*/
color: blue;
}</style>
```
###[attribute~="value"] Selector
This is used to pick HTML elements with wanted attribute value holds a given word anyplace in the selector.
```HTML
<style>
[class~=soft] {
color: hotpink;
border: 2px solid #eee;
font-size: 18px;
}
</style>
<p class="soft">Attribute ~ Selector:  This is utilized to select HTML elements with needed attribute and value.</p>
```
###[attribute="value"] Selector
```HTML
<style>
p[class="psoft {
color: hotpink;
border: 2px solid #eee;
font-size: 18px;
}
</style>
<p class="soft">Attribute Value Selector:  This is used to select HTML elements with needed  attribute and value.</p>
```
###[Attribute$=” value”] selector
```HTML
<style>
[class$="soft"] {
color: hotpink;
border: 2px solid #eee;
font-size: 18px;
}
</style>
<p class="soft"> Attribute $ Selector: This is used to select HTML tags whose attribute value ends with particular value.</p>
```
###[attribute*="value"] Selector
```HTML
<style>
[class*="soft"] {
color: hotpink;
border: 2px solid #eee;
font-size: 18px;
}
</style>
<p class="soft"> Attribute * Selector:  This is used to select HTML elements whose attribute value starting with specified value anywhere in the attribute.</p>
```

I shared this post from [CSS Attribute Selectors](https://softcodeon.com/css/css-attribute-selectors.htm) you can read in detail from there.

If you have any question please help to improve. Thank you.
Actioncable's websocket on ssl
Published: 2021-12-17 16:19:29

I was using actioncable to use websocket in my react application interact with RoR backend. Everything was going smooth during the development because I was over http.

Once I deployed to the production, I realized I need a proper path for backend because my React application on port 443 is trying to connect to backend hosted in http port. So I decided to prefix the backend routes with "/api_backend". Afterwards I mapped "/api_backend" url with proxy_pass in Nginx.

So everything was on the SSL, React front end as well as RoR backend.

The problem still persisted. The websocket I used in development is on http. ws:// connections throws errors in frenzy. There are misleading discussion on the internet which told me to change the config in the client browser. Finally I came to realize http connection need to upgrade to websocket connection which can be achieve modifying the header in Ngnix.

```text
        location /api_backend/cable{
                proxy_pass http://127.0.0.1:6001;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
        }
```

As shown in the above, I was setting the two headers which is "**Upgrade**" and "**Connection**". **$http_upgrade** contains the text "websocket" in my case. And I was setting "Connection" header to the type of "Upgrade". As soon as I saved and restarted the Nginx, the websocket was working on ssl with wss:// protocol.

Photo Credit: Gunfight | N.C. Wyeth (American, 1882-1945)
Iya Elepo App Part 2
Tags: radzen, blazor
Published: 2021-12-17 15:46:30

In this video, I demonstrate how to accept configure controls that are used to process images in RADZEN.
I also show you how to finetune the validation controls generated by RADZEN.
I show you how to configure security using aspnet tables.  I also show you how to create application roles.
Source code and database files can be found at https://github.com/benjaminsqlserver/IyaElepoAppLessonTwo

{% youtube cYDfvG0UoGc %}
Java 的常數
Tags: java
Published: 2021-12-17 15:34:50

很簡單，在宣告前加個 final 關鍵字就是常數，如同多數程式語言，常數的命名習慣上全大寫。

```java
final int MY_ANGEL = 689;
```

常數建立後是不能修改的，編譯時會檢查。
Scope in JavaScript(var, let, const)
Tags: javascript, webdev, beginners
Published: 2021-12-17 15:27:22

Scope in JavaScript is divided into the Block Scope, Function Scope and the Global Scope.

## Starting with the Global Scope
```
// Global scope
var a = 1;
let b = 2
const c = 3
console.log(`Global Scope ${a} ${b} ${c}`)

```

- This is a global scope and everything is fine, if you console.log the value

## Function Scope

```
// Global scope
var a = 1
let b = 2
const c = 3

//Function scope
function num() {
  var a = 10
  let b = 22
  const c = 5
  console.log(`Function Scope ${a} ${b} ${c}`)
}
num()

console.log(`Global Scope ${a} ${b} ${c}`)
```
So inside the function scope we get our `10, 22, 5` while in the global scope we still get our `1, 2, 3,` because they are different variables in different scope.

- `Var` is a **Function scope** It means they are only available inside the function they’re created in, or if not created inside a function, they are ‘globally scoped..

```
var a = 1;
let b = 2
const c = 3

for(var a = 0; a < 10; a++) {
  console.log(a)
}
console.log(`Global Scope ${a} ${b} ${c}`)
```
- The value of `var a = 10` in the global scope.
- The `var a` in the loop actually changes the value `var a` in the global scope which is not good, that's the reason `let` and `const` was created.

**NOTE:** `var` is kind of wired, that's one of the thing that lot of people didn't like about JavaScript. it causes security risks and it can cause confusion if you have some variables in the global scope.

## Block Scope

```
// Global scope
var a = 1
let b = 2
const c = 3

// Block Scope
if(true) {
  var a = 6
  let b = 7
  const c = 10
  console.log(`Block Scope ${a} ${b} ${c}`)
}
console.log(`Global Scope ${a} ${b} ${c}`)
```
What do you think the global scope `var a` result will be? 

- The result will be `var a = 6` because after declaring the `var a = 1` on the global scope it was change in the block scope.

- Notice the `let and const` **didn't change**, in the global scope they retain their values and also in the block scope.

**Benefit of let & const**
- They aren't scoped to the function, they are scoped to the block.
- **What is the block?** A block is a set of opening and closing curly brackets.

## Points to Take
- `var` is function scope.
- `let` and `const` are block scope.
- Function scope is within the function.
- Block scope is within curly brackets.
You never lose the basics...
Tags: programming, productivity, tooling
Published: 2021-12-17 15:03:53

As someone who works with multiple platforms and multiple languages I often have to fall back on some sort of commonality and hit the basics.

On Windows that often was Batch, early on, then Windows versions kept advancing until PowerShell became installed by default.

With Unix versions, and docker instances, that became Shell scripting.  This has been the default for awhile now when I at times don't know, or have no control over, what a Team will use for their testing.


![Old Toolbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfyhq02rizju3cd48cm5.jpeg)
Since I only have control over the tool, not often how its used, there are requirements I can make for people to use what I, or my Team, produce.  Though I often have to stop making demands so Teams can have flexibility for what they want to do, and still provide them something they can use.  That's when I fall back on the basics.

Shell scripts work well in the environment I work on, a mix of Mac OSX, AWS Cloud instances, build systems using Ubuntu, and maybe in the future GCP.  Finding something that works on all usually means finding a simpler and simpler solution, to make something that works everywhere (remember "write once, use everywhere"?) requires one to be creative and flexible.

It's still amazing how powerful, and how much use, you can get out of simple shell scripts even today.  The basics NEVER go away, and are something you should never forget.
Auto activate and deactivate python venv using zsh
Tags: zsh, python, venv, chpwd
Published: 2021-12-17 15:01:10

---
title: Auto activate and deactivate python venv using zsh
published: true
description: 
tags: zsh,python,venv,chpwd
cover_image: https://logodownload.org/wp-content/uploads/2019/10/python-logo-1.png
---

When I found out about python venv (`apt-get install python3-venv`) I became an instant addict. It's clean, it's built-in and it's explicit.

Now every time I create a new project folder I automatically run `python3 -mvenv venv && source ./venv/bin/activate`.

But typing `./venv/bin/activate` and then `deactivate` is too much work for my lazy programmer head.

So I decided to finally invest 10 minutes to free me from activating and deactivating python's env every time I enter or leave a folder with my standard `./venv` folder:

```zsh
#---------------------------------------------- chpwd pyvenv ---
python_venv() {
  MYVENV=./venv
  # when you cd into a folder that contains $MYVENV
  [[ -d $MYVENV ]] && source $MYVENV/bin/activate > /dev/null 2>&1
  # when you cd into a folder that doesn't
  [[ ! -d $MYVENV ]] && deactivate > /dev/null 2>&1
}
autoload -U add-zsh-hook
add-zsh-hook chpwd python_venv

python_venv
```

edit: just figured out that deactivating was working because of other stuff installed in my shell. Now it's a bit more agressive but works 100%
Advent of Code 2021 Python Solution: Day 16
Tags: adventofcode, python, algorithms
Published: 2021-12-17 12:06:31

I was too busy to solve this challenge (but I tried for around 30min) and I did not even want to skip a day so, I had to look over other people's code. 
The following code is taken from [here](https://github.com/SiddhantAttavar/Competitive-Programming/tree/main/Other%20Contests/Advent%20Of%20Code%202021/Day16). All credit goes to the author of this repository. 

### Part 1

```python
data,data1=get_data(day=16)

data = '''38006F45291200'''.splitlines()
data=data1[0].splitlines()

s = bin(int(data[0], 16))[2:]
n = len(s)
if n % 4 != 0:
    s = '0' * (4 - n % 4) + s
n = len(s)
res = 0
c = 0

while c < n and '1' in s[c:]:
    v = int(s[c: c + 3], 2)
    res += v
    c += 3
    t = int(s[c: c + 3], 2)
    c += 3

    if t == 4:
        num = ''
        while s[c] == '1':
            num += s[c + 1: c + 5]
            c += 5
        num += s[c + 1: c + 5]
        c += 5
        num = int(num, 2)
    else:
        l = int(s[c], 2)
        c += 1
        if l == 0:
            num = int(s[c: c + 15], 2)
            c += 15
        else:
            num = int(s[c: c + 11], 2)
            c += 11

print(res)
```

### Part 2

```python
from functools import reduce

funcDict = {
    0: sum,
    1: lambda a: reduce(lambda x, y: x * y, a),
    2: min,
    3: max,
    5: lambda a: int(a[0] > a[1]),
    6: lambda a: int(a[0] < a[1]),
    7: lambda a: int(a[0] == a[1])
}

def evaluate(u):
    if packets[u][1] == 4:
        return packets[u][2]

    res = []
    for v in graph[u]:
        res.append(evaluate(v))
    return funcDict[packets[u][1]](res)

s = bin(int(data[0], 16))[2:]
for i in data[0]:
    if i != '0':
        break
    s = '0' * 4 + s
n = len(s)
if n % 4 != 0:
    s = '0' * (4 - n % 4) + s
n = len(s)
c = 0
packets = []

while c < n and '1' in s[c:]:
    v = int(s[c: c + 3], 2)
    c += 3
    t = int(s[c: c + 3], 2)
    c += 3
    
    if t == 4:
        num = ''
        while s[c] == '1':
            num += s[c + 1: c + 5]
            c += 5
        num += s[c + 1: c + 5]
        c += 5
        num = int(num, 2)

        packets.append([v, t, num, c])
    else:
        l = int(s[c], 2)
        c += 1
        if l == 0:
            num = int(s[c: c + 15], 2)
            c += 15
        else:
            num = int(s[c: c + 11], 2)
            c += 11
    
        packets.append([v, t, l, num, c])

stack = []
graph = [[] for _ in range(len(packets))]

for i, u in enumerate(packets):
    if len(stack) > 0:
        p = stack[-1]
        graph[p].append(i)
        packets[p][3] -= 1
        if packets[p][3] == 0:
            stack.pop()

    while len(stack) > 0:
        p = stack[-1]
        if packets[p][2] == 0 and packets[p][3] <= u[-1] - packets[p][-1]:
            stack.pop()
        else:
            break

    if u[1] != 4:
        stack.append(i)

print(evaluate(0))
```
Converting a React project to TypeScript - Avoid pain by using correct file extension
Tags: react, typescript
Published: 2021-12-17 14:52:31

I recently decided to make the switch from writing pure JavaScript to writing TypeScript going forward. Like with all things that one can learn, watching all the tutorials in the world won't make much difference unless you actively apply your learning. That much is true for me, at least.

To that end, I decided to convert one of my React projects to TypeScript. To accomplish that I did some research and eventually settled on using [ts-migrate](https://github.com/airbnb/ts-migrate), from the good folks at Airbnb. According the project homepage

> _ts-migrate_ is intended to accelerate the TypeScript migration process.

The migration process itself is not difficult if you just follow the instructions on the project homepage. However, having followed the instructions, I still experienced a lot of avoidable pain which were directly traceable to file extensions.

Before running ts-migrate against your React codebase, you want to get your file extensions right. Small point, but big pain if not done. Normally, when I write React, I take the liberty of naming all files with a `.js` extension. This is all okay since the `vs-code` linter is smart enough to know which files should supposedly have a `.jsx` extension. The real pain comes when all your component/container files end with `.js` and you run ts-migrate against them. In my case, some of the files were converted to `.tsx` but the majority were converted to `.ts` extension. Consequently, there was a lot of avoidable errors that prevented the project from compiling. This cost me time going through dozens of files to remove those errors. Eventually, I also had to rename the affected files. Luckily, I found this [Batch Rename](https://marketplace.visualstudio.com/items?itemName=JannisX11.batch-rename-extension) utility in the `vs-code` marketplace.

So lesson learned going forward - sure I still have some projects I may convert - is to rename all my react component files with a `.jsx` extension before attempting a migration.
Why is Agile Software Development Crucial for Building Solutions?
Tags: agile
Published: 2021-12-17 14:51:51

Agile is one of the most prominent project management methodologies organizations use regardless of size, scale, and nature. The methodology helps brands unify their procedures, address user concerns, boost collaboration, and promote test-based development.
Introduced in 2001, Agile can mitigate organizational risks and improve product quality, all within a span of multiple Sprints. However, despite the abundance of benefits incurred by Agile, many still do not understand the concept or its advantages.
If you are one of them, read through the blog to understand Agile and how it can assist your business.