teleren/devto huggingface dataset:
Add custom fonts to react native (expo) app
Tags: reactnative, expo, fonts, usestate
Published: 2019-11-03 23:39:55

# STEP 1:

### 1. In your assets folder (or anywhere you prefer) create a new 'fonts' folder.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pyi0po5si3a96dpcvp84.jpg)

### 2. Go to https://fonts.google.com/ (or any other fonts library) and download your preferred font or multiple fonts.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/blzz61mlv4kyqfv22kyu.jpg)

### 3. Extract the TrueTypeFont (.ttf) file to your fonts folder. (If you are using VSCode text editor, you can drag the extracted files directly into the editor.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vggqr8y0hr72izwtyhuk.jpg)

### 4. I added three different fonts: 'Roboto-Bold.ttf', 'Roboto-Italic.ttf' and 'Roboto-Regular.ttf'.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f5e5b4ro520bo0vt8kiu.jpg)


# STEP 2:

## In your project root, using the command prompt, install expo-font with following command: expo install expo-font

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8hs0ucqfew55bte0670g.jpg)

# STEP 3:

### 1. In your App.js import following:

import * as Font from 'expo-font';
import { AppLoading } from 'expo';

### 2. Write following function 

const fetchFonts = () => {
  return Font.loadAsync({
    'roboto-bold': require('./assets/fonts/Roboto-Bold.ttf'),
    'roboto-italic': require('./assets/fonts/Roboto-Italic.ttf'),
    'roboto-regular': require('./assets/fonts/Roboto-Regular.ttf')
  });
};

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dz62myvi2pk4s8uzm7wg.jpg)

I am using the 'roboto-bold', 'roboto-italic' and 'roboto-regular' fonts. You will use the name of the font you downloaded.

### 3.Add state

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9i6esmr8fjul9rfzflnj.jpg)

### 4. Add if statement to check if the fonts loaded and style the text components to check if your custom fonts are working.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jxr16b1i3v0z8dcjkdfd.jpg)


# You should see the different custom fonts on your screen:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mkjbho294as1292ee1ei.jpg)


If you have any additional questions or suggestions, feel free to leave a comment! :)
Configuring a custom domain in Azure
Tags: azure, dns
Published: 2020-04-24 16:20:06

---
title: Configuring a custom domain in Azure
published: true
date: 2019-11-03 17:28:35 UTC
tags: Azure,DNS
canonical_url: https://irina.codes/configuring-custom-domain-in-azure/
---

Configuring a custom domain in Azure very easy, if you know what to configure. There are domain bindings, TXT records, A records, and we don’t deal with them on a daily basis.

Your AppService plan must be at least B1, to allow custom domains and SSL bindings.

Once you have your application deployed, you must create a DNS Zone that will allow you to link your existing custom domain to your AppService.

So in order for your website to work in every situation, with your custom domain, you will need to add 4 record sets:

- an A record type with www as the name and your website assigned IP as a value
- an A record type with @ as name and your website assigned IP as the value(this will be already created, but make sure is there)
- a TXT record type with www as a name and [yourwebsite] .azurewebsites.net as the value
- a TXT record type with @ as a name and [yourwebsite].azurewebsites.net as the value

#### Adding an A record

![adding an A record set](https://irina.codes/wp-content/uploads/2019/11/adding-recordset.png)

#### Adding a TXT record set

![adding a TXT record set](https://irina.codes/wp-content/uploads/2019/11/adding-txt-record.png)

You need to have these 4 records in order to allow your website to be accessible with www, and without it. Like coolwebsite.com vs www.coolwebsite.com.

In my case, my website couldn’t be accessed from a few corporate networks. Unfortunately, it took a while until I realized what is happening.

I tend to access websites without using www in front of the domain. It’s easier to write, and Google Chrome has the tendency to suggest pages ![🙂](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f642.png)

There are a few firewalls or corporate networks that will prevent your website from being loaded if the DNS is not resolved for both options, and you might not even know it

DNS propagation might take a while, but you can use tools like    
[https://www.whatsmydns.net/](https://www.whatsmydns.net/) .

Using this application you can select any record you want to check to make sure it is propagated.

The post [Configuring a custom domain in Azure](https://irina.codes/configuring-custom-domain-in-azure/) appeared first on [Irina Scurtu](https://irina.codes).
Define your Kubernetes namespaces now!
Tags: kubernetes, devops, bitesize
Published: 2019-11-03 22:50:17



Yeah, but why?

Namespaces help us divide the cluster resources between multiple users, as well as help split the resource quote.
This is important for when we want to use Kubernetes in production and share the cluster with many products/teams.

### How do we do it?
![](https://media1.tenor.com/images/9fd7a286a869f89a3c3587a8965b7197/tenor.gif?itemid=4350446)

#### Prerequisites:
1. Kubernetes cluster - [Quick start with aks](https://docs.microsoft.com/en-us/azure/aks/kubernetes-walkthroughr?WT.mc_id=k8s-devto-adpolak)
2. [Kubectl](https://kubernetes.io/docs/tasks/tools/install-kubectl/) command line installed
   


Define the namespace using a YAML file -:

```yaml
{
  "apiVersion": "v1",
  "kind": "Namespace",
  "metadata": {
    "name": "development",
    "labels": {
        "name": "development"
        }
    }
}
```

In the example, we call the namespace - development.
Name the file - namespace-dev.json



From the command line, run:
```bash
kubectl create -f namespace-dev.json
```
This command will actually create the namespace.

Check yourself with this command - it will show you all the namespace:
```bash
kubectl get namespaces --show-labels
```

Let's spin pods. But first, check what already exists:

```bash
kubectl config view
```

Get the current context:
```bash
kubectl config current-context
```

Let's say we got back _dev_cluster_ as the current context.
This will return the cluster context name and we'll use it to define the development namespace for our context:

Use set-context to set the context with new name **dev** under the namespsace of development:

```bash
kubectl config set-context dev --namespace=development \
  --cluster=dev_cluster \
  --user=dev_cluster
```


Switch to the new context:

```bash
kubectl config use-context dev
```

Now everything you'll do will take place in this context with the defined namespace.



![](https://media1.tenor.com/images/095051a92b83613601093c59ce6b0108/tenor.gif?itemid=3567342)

**This was K8s namespaces in under 2 min**, part of K8s bitesize series.
5 Must Listen Web Dev Podcasts for Stallions and Code Newbies Alike
Tags: podcast, beginners, webdev
Published: 2019-11-03 22:44:33

If you're a developer, let's face it - you probably don't read the docs 😅. Instead, put on one of these podcasts to learn what's happening in the web development community! This list is in no particular order.

## [Syntax](https://syntax.fm/)

[Wes Bos](https://twitter.com/wesbos) and [Scott Tolinski](https://twitter.com/stolinski) are the hosts of this show. They both create online courses and are great at explaining complex tech in a way that's easy to understand. This is a must listen for someone learning to code because it has a little bit of everything for you to dig into.

## [Shop Talk](https://shoptalkshow.com/)

If I'm in the car this is my go to podcast because of the depth they go into on a singular topic. Ever wanted to talk about GatsbyJS [for an hour straight](https://shoptalkshow.com/episodes/364/)? You got it. [Chris Coyier](https://twitter.com/chriscoyier) and [Dave Rupert](https://twitter.com/davatron5000) do a great job with the show and always have interesting guests.

## [Javascript Jabber](https://devchat.tv/js-jabber/)

A really fun podcast that focuses on the Javascript ecosystem. There's a lot of variety to the show that helps you learn different topics fast. One week could be machine learning and the next week design systems.

## [React Podcast](https://reactpodcast.simplecast.fm/)

You need to listen to this podcast if you use React. The information that's on this show isn't located in the docs or the internet. I listen to this podcast a bunch because it gives me an idea of where the React ecosystem is headed. They have people from the React Core team on fairly often as well.

## [Snacks Daily](https://open.spotify.com/show/5RllMBgvDnTau8nnsCUdse?si=0tNhUqHSTQqpRwE8w8r_2g)

Wait, this isn't a web development podcast! You're right, but they talk about tech companies and startups. It's a great way to get introduced to the business side of web development in fifteen minute snacks!

{% youtube 4DRPtRskboc %}

What are your go to podcasts? Let us know in the comments below.
PyDevTo - unofficial dev.to api for python
Tags: python, showdev
Published: 2019-11-03 22:34:07


> Dev.to has a pretty awesome community for sharing coding knowledge. I wanted to republish my posts to them (and also link to the comments) so I made this library, and in the interest of sharing decided to opensource it for anyone to use.

[PyDevTo](https://github.com/lpellis/pydevto) is a a wrapper around the [dev.to api endoints](https://docs.dev.to/api/), with a few helper functions to help with the distribution of articles.

### Features


* Implements all endpoints from <https://docs.dev.to/api/>


* Implements a few other api endpoints not documented but available in the source, such as users and follow\_suggestions.


* Includes a helper method to convert html to dev.to specific markdown, including support for dev.to specific embeds such as YouTube.



## Installation

Use the package manager [pip](https://pip.pypa.io/en/stable/) to install pydevto.

```pip install pydevto```

## Usage

Make sure you have an api key to use the authenticated endpoints. You can get your key from <https://dev.to/settings/account> (You can use pydevto without an api key for some functions, such as the public articles)

```python
import pydevto
api = pydevto.PyDevTo(api_key='MY_KEY')
api.articles()  # returns list of your own published articles
```
## Methods
```python
import pydevto
api = pydevto.PyDevTo(api_key='MY_KEY')
api.public_articles(page=None, tag=None, username=None, state=None, top=None)  # Return list of public (published) articles
api.public_article(id)  # Return a single public (published) article given its id
api.articles(page=None, per_page=None, state="published")  # Return a list of user articles
api.create_article(...)  # Create an article
api.update_article(id, ...)  # Update an article
api.user(id=None, username=None)  # Return user information
api.follow_suggestions(page=None)  # Return list of follow suggestions
api.tags(page=None)  # Return list of tags
api.webhooks()  # Return list of webhooks
api.webhook(id)  # Return single webhook with id
api.create_webhook(source, target_url, events)  # Create a new webhook
api.delete_webhook(id)  # Delete  a webhook with id
```

PyDevTo contains a helper function to convert html to dev.to specific markdown. ([https://dev.to/p/editor\_guide](https://dev.to/p/editor_guide)) It supports images with captions using the HTML figcaption tag, and converts embeds such as YouTube to dev.to specific liquid tags.

```python
>>> import pydevto
>>> pydevto.html_to_markdown('<h1>Heading</h1') 
>>> '# Heading\n\n'
>>> pydevto.html_to_markdown('<iframe src="https://www.youtube.com/embed/kmjiUVEMvI4"></iframe>') 
>>> '\n{% youtube kmjiUVEMvI4 %}\n'  
```
{% github https://github.com/lpellis/pydevto %}
Let me know if you run into any issues.

> PS I originally published this post at <https://loftie.com/post/pydevto-unofficial-devto-api> and used this very library to make this post :)
🏷️ Truncate String with Ellipsis in CSS
Tags: css, design
Published: 2019-11-03 22:22:59

The front-end developers sometimes need to redesign the screen in order to truncate string with ellipsis in CSS technology. The best possible solution is the following:

```css
.truncate-format {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```
Command-Line Flags with Go-Lang
Tags: go, flags, cli
Published: 2019-11-03 22:11:54

---
title: Command-Line Flags with Go-Lang
published: true
description: Command-line flags are a common way to specify options for command-line exercutables or programs. Go provides a flag package supporting basic command-line flag parsing.
tags: Go-Lang, Go, Flags, CLI
---

Command-line flags are a common way to specify options for command-line exercutables or programs.

Go provides a flag package supporting basic command-line flag parsing.

Flags are defined using flag.String(), Bool(), Int(), etc. Depending on the intended datatype.

```
First argument — Flag name
Second argument — Default value
Third argument — help message for flag nameinstances := flag.Int(“instances”, 5, “number of deployed instance”)
```

After all flags are defined, call

```flag.Parse()```

to parse the command line into the defined flags.

Command line flag syntax

The following forms are permitted:

```
-flag
-flag=x
-flag x // non-boolean flags only
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tg31fio6y47bkuaft2vs.png)

```
$ go build flags.go

./flag -h
  -instances int
        number of deployed instances (default 5)

$ ./flags -instances 7 
```
Access the PostgreSQL in Docker Container
Tags: docker, postgres
Published: 2019-11-03 21:16:17

---
title: Access the PostgreSQL in Docker Container
published: true
description: 
tags: Docker, PostgreSQL
---

The use of Docker containers made our lives so easy. Not only the work of the sysadmin but work of the developer too.

However, these days I had to access the PostgreSQL that runs in a Docker container and had a bit of trouble, by inexperience and lack of knowledge until then.

Well, all is hard when we don't have the knowledge to do it. And to access the PostgreSQL in a Docker container is a piece of cake.

Firstly, we need to check if the container is up! We can do it with the following command line:

```bash
docker container ps
```

The answer to this command is: 

```bash
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES

56fa1b0f91d7        ba5ab22916de        "docker-entrypoint.s…"   24 hours ago        Up 5 minutes        0.0.0.0:5442->5432/tcp   my_database
```

With the container running, as shown above, it is enough to run the following command line:

```bash
docker exec -it my_database bash
```

Where `my_database`, in this case, is the Docker container NAME. We cuold use the container ID instead of the container NAME. In this context, we enter the container as the root user and now we can run the following command line:

```bash
psql -U postgres
```

Ready! We are in PostgreSQL and we can create users, databases, tables and all we need to do our work. This fact is demonstrated by the change of the prompt to:

```bash
postgres=#
```

I hope this small tip helps another person the same way it helped me as well.
Lessons after 1 Week with React Native
Tags: react, reactnative, javascript, newbie
Published: 2019-11-03 21:04:15

React Native seemed like the best choice for me as I prototype an app. The one thing standing in my way was the fact that.... I have never used React. 

Still, it seemed like a waste of time to first try to learn React, which I had no opportunity to use, and THEN apply what I've learnt to React Native... long story short, seven days later I feel like I'm getting the hang of things.



Lesson #1 - React Native is not a web wrapper

If you have heard of or used Cordova (I actually used this technology to make a few apps back when I was in Uni), React Native is not it. The javascript itself is not being wrapped in some shell and displayed on android/iOS! The code you write in React Native is *translated* to actual native code. To further emphasize this, you can chose to stop using react native and continue in your native language of choice instead. Which leads me to lesson 2...

Lesson #2 - Code with your platform(s) of choice in mind

As I alluded to above, development in react native translates to native, platform specific code. For this reason I've found it useful to focus on the platform I'm aiming for. For now, I am focusing on iOS and learning about CocoaPods, and all of the specific actions Apple requires to get  successful build. (Bonus tip, ensure that you open the .xcworkspace version of your app in XCode) 

Lesson #3 - Restart and refresh your simulator

You know the old adage... Have you tried turning it on and off again?

If you are depending on the feedback from the simulator to see how you are going, I encourage you to regularly close and restart your bundler process and your simulator (sometimes even delete the app from the simulator). I can't tell you how much time I lost initially, trying to clear or find the solution to errors that were simply to be solved by giving the setup a refresh. 

For iOS development - pod deintegrate, then pod install (cd into the iOS folder first) has solved many an issue.


Lesson #4 - Linking - sometimes it's automatic, sometimes it's not

At a time before my start with React Native, you had to link dependencies yourself. Nowadays, the React Native CLI auto-links, but not for every dependency! Some have yet to switch over, and so I encourage you to read the docs of your new module carefully to see if you have to run react-native link dependency-name in order to add the modules. 


P.S Overall this has been fun, so much fun that I could barely put it down to stop and reflect on the lessons for this week. Let me know if I should continue sharing my newbie perspective and visit my twitter page @JaniquekaJohn for more frustration, random tweets and OMG It Works! moments as I continue on this journey.

P.S.S I am also learning things about react through learning React Native, during this journey, such as the component lifecycle (which is actually about to change from your typical componentWillMount etc) Let me know if I should write about learning React through React Native!
Securing your docker images with Github actions for FREE!
Tags: docker, security, github, devops
Published: 2019-11-03 20:18:34

---
title: Securing your docker images with Github actions for FREE!
published: true
description: Its free, no brainer!
tags: docker, security, github, devops
---

Securing you containers is massively important and the consequences of not 
doing so will put your customers at risk. However it is really difficult to do with out paying top dollar or having an experienced DevOps team to constantly monitor your images and apply patches.

As developers we want to build our products and build them fast, so if we can automate this process so that we're only notified when they're issues then great!

So today we're going to secure our images using Github actions and [Phonito.io](https://phonito.io) for free!

### What are Github actions?

> GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

Pretty awesome huh! and you don't have to manage infrastructure like that nasty Jenkins!


### What is Phonito.io

Phonito.io is a vulnerability scanning tool for the everyday developer, it scans numerous databases and informs you of the latest vulnerabilities and for CI integrations its FREE to use!

Even if you've never built a Github action before this is a great place to start

## So let's get started
 - Go to the "Actions" tab of a Github repo.
 - Either add a new workflow by copying the yaml below or add the `Scan with Phonito Security` step after your Docker build from this example workflow.

```yaml
name: Build & Scan Docker Image
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1

      - name: Set tag var
        id: vars
        run: echo ::set-output name=docker_tag::$(echo ${GITHUB_REF} | cut -d'/' -f3)-${GITHUB_SHA}

      - name: Build the Docker image
        run: docker build . --file Dockerfile --tag myapp:$@{{ steps.vars.outputs.docker_tag }}

      - name: Scan with Phonito Security
        uses: phonito/phonito-scanner-action@master
        with:
          image: myapp:$@{{ steps.vars.outputs.docker_tag }}
          phonito-token: ${{ secrets.PHONITO_TOKEN }}
```
 - Next thing we need to do is get our API key from Phonito.io, 
     - Register at [Phonito.io](https://phonito.io)
     - And get your API key 🔑 


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mz4fbd6kov0emun2x493.gif)

 - Add that API as a secret with the name PHONITO_TOKEN to your repo.

### And thats it 🎉

Next time you push to your repo this scanner will run and check for any vulnerabilities that you have. Its as simple as that and FREE so there is no excuse to release software which is insecure!! :)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gq4vqni45mcwop43nuo7.png)


If you're stuck look at this [example repo](https://github.com/phonito/phonito-github-actions-test) or raise an issue [here] (https://github.com/phonito/phonito-scanner-action).
Reusable components with scoped slots in vue
Tags: vue, javascript, components, webdev
Published: 2019-11-03 20:15:07



## What are slots first of all?
If you are not familiar with slots in Vue I suggest looking at the [slots documentation](√)  in short, slots in Vue are a way to pass markup into a component directly from the parent to child component

## So, what’s a scoped slot?
Scoped slots allow us to take this one step further by allowing data in the child component to be used by the parent. In turn, allowing the content to be displayed differently

This can be helpful when creating a reusable component that shares functionality but needs different variations of UI. 

Let's take a look at an example:

```html
// photo-gallery component
<template>
<div>
	<h1>{{title}}</h1>
	<div class="photo-gallery">
		<slot v-bind:items="photos"></slot>
	</div>
</div>
</template>

```

imagine that this component is called `photo-gallery` its job is to retrieve data from a photos API and store it in a piece of local data called `photos` 

```javascript
// template for photo-gallery...
</template>

<script>
export default {
data () {
	return {
		photos: [  
			.....
```

we set up the outline by defining all the things we want any instances of photo-gallery to share. Such as having a title and a gallery container with custom styling.

When we use this component we have access to its photos using the `items` property that was defined in `v-bind:items=“photos”`  basically saying “pass the photos as `items` “.

When you use this component now it looks like this

```html
<photo-gallery>
	<template v-slot="props">
		<ul class="alt-gallery">
			<li class="alt-photo" v-for"item in props.items"></li>
		</ul>
	</template>
</photo-gallery>
```


We are given access to the photos by using `v-slot=“items”`  then we loop over each photo or “item” and create a  `alt-photo` list item.

Using this approach we can create multiple instances of the photo-gallery and can even make components for each instance like `gallery-list` and `alt-gallery`  while passing the photos array into them like this

```html
<photo-gallery>
	<template v-slot="props">
		<gallery-list
			:photos="props.items"
		/>
	</template>
</photo-gallery>
```

Takeaways:
Using scoped slots, we delegate common functionality and markup to the scoped component. Then on each instance, we can change the way our data is represented visually.

[Slots — Vue.js](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots)
[cover image](https://css-tricks.com/using-scoped-slots-in-vue-js-to-abstract-functionality/)