teleren/devto huggingface dataset:
How to add a swift package to iOS App using the Swift Package Manager
Tags: xcode, swift
Published: 2021-10-14 12:43:38

---
title: How to add a swift package to iOS App using the Swift Package Manager
description: Let's add a swift package to an existing iOS app. I'll be using the Swift Package Manager to add the dependency.
tags: ["xcode", "swift"]
published: true
---

{% youtube Zcv6rK8IXPQ %}

I'm going to show you how to add a swift package to your iOS app using the Swift Package Manager.

## First how to add a package to your app


To add a package you will need a **repository’s URL** or if the package is hosted on GitHub or GitHub enterprise and you’re logged in you can just search for the package.

There’s actually two ways.

### Here is way number 1:

1. Navigate to the target’s general pane
2. Click the `+` button in the `Frameworks, Libraries, and Embedded Content`
3. Click on `Add Other`
4. Choose `Add Package Dependecy`

### Here is way number 2:

1. Open the project
2. Go to the File Menu
3. Choose Swift Packages and enter the repo URL

## How to use the dependency?


To actually use the dependency, you will need to first import the package and then call the property you want.

## How to delete a package from your app

1. Navigate to the swift packages pane in the Project settings
2. Select the package to delete
3. Hit the `-` button

## When should you reach for an external dependency?


An external dependency aka package can make your life easier as a developer. Sometimes they can save you hours of coding and figuring out how something works.

I use one in iHog for OSC a network protocol that I have no idea how to actually implement in Swift. OSCKit allowed me to focus on other parts of the app and for the package to actually handle all the OSC communication between the app, the iOS device, and the Hog controller.

---

If you are finding these posts and videos useful, then please share this post or [buy me a coffee](https://geni.us/buy-maegan-a-coffee).

[![Buy Me a Coffee Link](https://assets.cctplus.dev/images/bmc.png)](https://geni.us/buy-maegan-a-coffee)


---

Want my posts directly to your inbox? 
Great! Sign up [here](https://cctplus.dev/#/portal)!
How to use localStorage API
Tags: javascript, beginners, tutorial
Published: 2021-10-14 12:43:09

*This post was originally published on [webinuse.com](https://webinuse.com/how-to-use-localstorage-api/)*
Probably, one of the easiest, to understand, JavaScript APIs is the localStorage API. Also, it is not only simple, but it is pretty effective and straightforward. `localStorage` is property of window object that allows us to work with Storage. Unlike `sessionStorage`, `localStorage` is permanent storage. This means that data will remain intact until we delete it or change it.

All of the modern browsers fully support `localStorage`.

![caiuse.com screenshot of localStorage JavaScript API support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57nt759nnw6wp6qt78di.png)

## Saving data to localStorage

The first thing, probably, that we will ever do is to save something to localStorage. Items are saved like key-value. Only String can be saved into localStorage. But that does not prevent us from saving anything we want, there.

{% codepen https://codepen.io/amersikira/pen/GRvJwQg %}

As we have mentioned earlier, only strings can be saved to `localStorage`. If we pass an iterger, it will convert to string. If we want to pass an object, we have to use `JSON.stringify`.

### Getting data from storage

Getting data from storage is as simple as saving. We only use one command `localStorage.getItem('key');` We use the same key that we have used when we saved an item to storage.

{% codepen https://codepen.io/amersikira/pen/VwzvKeY %}

### Update key in storage

Updating keys in localStorage is same as creating new.

{% codepen https://codepen.io/amersikira/pen/GRvJwQg %}

### Remove key from localStorage

Sometimes we need to delete some key. We can do this by using `localStorage.removeItem("key")`. This command completely deletes key from storage.

{% codepen https://codepen.io/amersikira/pen/zYdvKBe %}

If we want to clear entire `localStorage`, we can use following method: `localStorage.clear()`. As a result, everything from `localStorage` will be deleted, for current domain.

### Additional information

Like `Cookies` and `sessionStorage`, `localStorage` is linked to the domain. If the key is missing it will return `null`.

If you have any questions or anything you can find me on my [Twitter](https://twitter.com/AmerSikira), or you can read some of my other articles like [CSS Positions, the complete guide](https://webinuse.com/css-positions-the-complete-guide/).
Mengenal Bahasa Pemrograman Python
Tags: python, beginners, tutorial
Published: 2021-10-14 12:32:38

Bahasa pemrograman python pertama kali diciptakan oleh Guido van Rossum seorang programmer berasal dari Belanda direlease pada tahun 1991.

Asal muasal nama python bukan berarti dari nama jenis ular yang kita ketahui. Jadi dahulu ada group komedi Inggris bernama Monty Python dan bapak Guido ini adalah penggemar beratnya. Dari sinilah dia mendapat ide untuk memberi nama bahasa pemrogramannya “python”. 


Menarik ya teman-teman. Untung saja dia tidak mengenal group komedi asal Indonesia bisa-bisa saat ini semua orang belajar bahasa pemrograman Warkop.


## Python sering kali digunakan sebagai :

Pengembangan web (sisi server)
Python digunakan pada pengembangan aplikasi web pada sisi server dan web framework. Framework python yang sering digunakan dan populer adalah Flask dan Django

### Pembuatan Software
Karena python memiliki banyak library dan kompleks, kita dapat dengan mudah membangun suatu aplikasi seperti game, kalkulator, aplikasi painting  atau kalkulator ilmiah

### Matematika, Statistika
Dengan library seperty Numpy, panda, matplotlib kita bisa menyelesaikan persoalan matematika dan statistika, kemudian memvisualisasikannya. Python juga mempermudah kita dalam mengimport dan memanipulasi data.

### Machine Learning
Ada banyak modul dan library yang dapat digunakan untuk menerapkan Machine Learning di dalam Python. Contoh nya pytorch yang digunakan Facebook.

## Kenapa harus python ?

### Bekerja di berbagai macam platform
Kita dapat menginstall python dan menjalankannya di berbagai platform seperti Windows, linux, ubuntu

### Mudah dipelajari
Python layaknya bahasa inggris yang mudah dimengerti.

### Syntaks lebih efisien
Dibandingkan dengan bahasa pemrograman lain, sintaks pada python lebih sedikit sehingga skrip menjadi efisien.

### Multifungsi
Penggunaannya sangat luas di berbagai bidang.

### Disupport banyak library
Saat ini python menjadi bahasa pemrograman yang cuku populer karena banyak library yang dapat diakses

### Berjalan sebagai interpreter 
Python dapat digunakan untuk interpreter platform lain
evolution in open source
Tags: opensource, ruby, programming, webdev
Published: 2021-10-14 12:20:57

![evolution in open source](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5x6eciybnlveuq0ejm6.jpg)

happy october, open source contribute-r! pick your favorite thing in the world (or just any hobby) and prepend it with the word 'tober' and your in for a real treat this month;. whether it'd be ink, or hack, witchtober, dogtober, linetober, creamtober, plastober, catober, pinktober, woketober, birdtober, what have you - the world is your oyst(ob)er. remember to 'just be yourself'-tober.

---

further reading: centimentalcomics.com
Background images in TailwindCSS - the clean and easy way
Tags: tailwindcss, css, beginners
Published: 2021-10-14 12:12:26

My biggest issue with TailwindCSS was the ugly way of using background images with it. I had to inline `background-url` property and it was not clean. And I know I was not alone, because other frontend developers said the same thing. It looked similar to this:

```jsx
<section class="bg-accent-dark bg-cover"
  style="background-image: url({{ 'images/home/hero.jpg' | asset_url }})">
```

Note: We use liquid to generate url to an image placed on CDN. 

Couple days ago, when I was doing six different themes in TailwindCSS using six different configs (I will report my findings in another article) I discovered that it can be simplified. Because CSS file is also on CDN, and the background-image can be customized in TailwindCSS config ([read more](https://tailwindcss.com/docs/background-image#background-images)), it can be replaced with simple `bg-hero` after adding its definition into theme extend section:

```jsx
backgroundImage: {
  'hero': "url('../images/home/hero.jpg')"
}
```

Now, our hero element HTML looks like this:

```jsx
<section class="bg-accent-dark bg-cover bg-hero">
```

And I think its much cleaner! Reading documentation paid off :)

## Read more

If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website. 

{% link https://dev.to/platformos/using-webp-in-your-existing-webpage-809 %}

{% link https://dev.to/platformos/optimizing-images-for-the-web-18gc %}

{% link https://dev.to/platformos/3-tips-on-preserving-website-speed-5g0c %}
JavaScript Absolute Value - Math.abs()
Tags: javascript, tutorial, beginners
Published: 2021-10-14 11:58:21

In this short tutorial, we look at the JavaScript absolute value (math.abs()) method. We explain the syntax with a real-world example.

### Table of Contents - Absolute Value Python:
- [JavaScript Absolute Value](#javascript-absolute-value)
- [How to use the math.abs() function?](#how-to-use-the-mathabs-function)
- [Code and Explanation](#code-and-explanation)
- [Closing thoughts](#closing-thoughts-javascript-absolute-method)


## TL;DR - How to find the absolute value in JavaScript?

The math.abs() function is used to return the absolute value in JavaScript. It negates the native sign of a number and returns the relevant positive value.
```javascript
console.log(Math.abs(-2));

//Output = 2
```
## JavaScript Absolute Value:
JavaScript Absolute value is a method of the Math object in JavaScript. This method helps return the absolute values of a number. Absolute value or modules essentially means a non-negative value of x.

To understand the math involved let’s first understand what absolute value actually means. Absolute value is the distance between any number and 0 on the number line. Since it is the distance, there are no negative values.

Subsequently, when a 0 is passed, JavaScript returns 0 as the distance would also be 0.

## How to use the Math.abs() function?
Using the Math.abs() method is quite straightforward. The only thing that you have to keep in mind is that abs() is a static method of Math. Hence you would have to add the Math. prefix in case you want to use it.

### JavaScript Absolute Value - Syntax:
```javascript
Math.abs(x)
```
### Parameters:
X - A number

### Return Values:
- “x” if x > 0
- “x” if x < 0
- “-x” if x = 0

## Code and Explanation:
The best way to familiarise yourself with the JavaScript Absolute method is to practice and try breaking it. In the below code we have used math.abs() methods on a list of values.
```javascript
Math.abs(-10);     // 10
Math.abs(10);       // 10
Math.abs('-10');     // 10
Math.abs('');       // 0
Math.abs([]);       // 0
Math.abs(null);     // 0
Math.abs([2]);      // 2
Math.abs([1,2]);    // NaN
Math.abs({});       // NaN
Math.abs('Ten'); // NaN
Math.abs();         // NaN
```
Another important point to remember while using the math.abs() methods, is it converts strings containing a number and returns its absolute value.

## Closing Thoughts - JavaScript Absolute method:
This method is mostly used before displaying a particular value. A common example would be while displaying distance on a map. In cases where you cross your destination, you are not returned with a negative value but rather the absolute value from the destination.
Setting up your WordPress development environment in Docker
Tags: wordpress, docker
Published: 2021-10-14 11:55:10

## Prerequisites

Assuming you already know how to use docker and basics of WordPress theme and plugin developments. 
If you already don't know much you can check the following links.

* [Docker](https://docs.docker.com/get-started/) and [Docker Compose](https://docs.docker.com/compose/install/).
* [Introduction to Plugin Development](https://developer.wordpress.org/plugins/intro/)
* [Theme Development](https://codex.wordpress.org/Theme_Development)

## Goals
This is good practice not to touch WordPress core. All of our works will based on **themes** and **plugins** folders. So we will make a system where **themes** and **plugins** folders are accessible from out side of container so that if we change the plugin or theme code then the effect will be applied immediately on development site.

## Steps 
* Let's create `docker-compose.yml` file in our development folder.
* Define the services.
* Run `docker-compose up` command to up and running our development environment.

### Creating docker-compose.yml and defining services
For our development process we need three services container
* Database ( MySQL )
* WordPress
* phpmyadmin ( database browser )

`phpmyadmin` is optional we are using this if we need to browse the data for development purpose. You can skip it if you want.

Let's see how we can define these services. 
Edit the `docker-compose.yml' file and follow the steps.
* Define the docker compose version at the very top like this 

```version: "3.3"```
* Define database container

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

* Define WordPress container

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

* Define Phpmyadmin container

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

## Full docker-compose.yml code

{% gist https://gist.github.com/prappo/6540822466361b2c61a4661db7a087cd %}
On-Demand Development trends 2021
Tags: ondemandapp, ondemanddevelopment, webdev, android
Published: 2021-10-14 11:30:47

The increase in technology demand has made the changing trend a common thing. Every year, we get to witness so many amazing trends in mobile application development. This year is not going to be any different than others. We have summed up some of the most amazing mobile development trends that one will witness in the coming year.

Blockchain Technology –
The <a href="https://devtechnosys.ae/on-demand-app-development">On-Demand App development </a> is going to reach a new level with the soaring use of blockchain. It might be developed a long time back but in 2020, it managed to create fuzz.
However, in the coming year, it is going to be one of the major beneficial applications for investors and institutes that deal with finance. It is assumed that by 2024, the blockchain market will reach new heights with an increase of up to $20 billion.

On-demand application –
In terms of mobile applications, it is expected that more sectors are going to surge up in the coming years. The demand for the application has taken a new turn with the 24x7 marketing of business with smartphones.
Example:
Taxify and Uber applications when it comes to on-demand applications. Even in 2017, the overall business of on-demand applications was estimated at more than $106 million.

Chatbots –
The main issue with the companies and customers was a lack of communication. There was some hour of gap in replying to customers after they asked a question. But this won’t be the case in 2021 with the involvement of chatbots.
In 2019, we witnessed <a href="https://devtechnosys.com/mobile-app-development.php">custom mobile app development </a> coming up with the concept of chatbots that has some stored frequently asked question. This makes the reply instant and one was able to get replies given the best services provided. 

Virtual Reality –
Now comes the concept of VR that is surging for such a long time. However, it was not until 2020 that it actually gained popularity due to its amazing level of interaction.
This makes everyone understand that there is so much beyond the screen that makes it special. It has managed to enhance the experience of users and hence as a result of helping companies to thrive.

Mobile payment services –
The online payment gateways are increasing with time and have made it easy to make the transfer. This doesn’t mean that the banking platform is taking a step back but help is provided to the banking platforms. In 2021, the options of mobile payment will increase, and with the e-commerce market added to it, digitalization is a good idea. This is a more convenient way to deal with payment issues if any arise saving a lot of time and effort.

In 2021, we all can only assume what these applications can actually do. But the development companies understand the influence in a better way. So, it is opportune to Hire Dedicated Developers in Dubai than a local developer that might not be aware of the changing trends to reach the milestone.
Asp.net core Middleware Giriş.
Tags: dotnet, csharp
Published: 2021-10-14 11:23:22

Bu yazıyı daha önce hashnode hesabımdam yazmıştım. Bu serinin başlangıcı için iyi bir yazı olacağından buraya bazı değişikler yaparak alıyorum : 
https://hashnode.mustafasamedyeyin.com/middleware-nedir

# Middleware nedir ?

Asp.net core uygulamamızda her web uygulamasında olduğu gibi istekler yani request'leri ve cevaplar yani response'ları vardır.

Bu request ve response'u, asp.net core uygulamamızda taşıyan nesne: httpcontext nesnesidir.

Asp.net core uygulamamızda httpcontext nesnesinin üzerinde işlemler yapmamız sağlayan yapılara middleware denir. "Middleware"e "ara yazılım" da diyebiliriz.

Middleware'ler bir hat üzerinden dururlar. Bu "hat"a ise yazılımcılar "Pipeline" der.

Pipeline'ın zaten ingilizce'de boru hattı gibi bir anlamı var.

Yani middleware'leri bir pipeline'a yerleştiriyoruz(yani bir boru hattına yerleştiriyoruz gibi düşünebilir).

Bu pipeline'ı (ya da boru hattını) aşağıdaki gibi düşünebiliriz.

-----Middleware(1)-------Middleware(2)-------Middleware(n)----

Bu middleware'ler

1.)    httpcontext nesnesi üzerinde istediği işlemi yapabilir ve bir sonraki middleware httpcontext nesnesi aktarabilir.
2.)    httpcontext nesnesi üzerinde istediği işlemi yapabilir ve bir sonraki middleware httpcontext nesnesini aktarmadan kısa-devre(sort-circuit) yaptırabilir.

Middleware pipele'nının çalışma mantığı : Diyelim ki 4 tane middleware'imiz var bunlar: "middleware 1", "middleware 2", "middleware 3", "middleware 4" olsun :

İlk başta bir request gelir : "middleware 1" daha sonra "middleware 2" daha sonra daha sonra  "middleware 3" daha sonra "middleware 4" çalışır bundan sonra pipeline tersine döner "middleware 4" den sonra "middleware 3" daha sonra "middleware 2" ve yine en son "middleware 1" çalışır ve response döner. Aşağıdaki resimdeki gibi bu 4 tane middleware'i görselleştirebiliriz

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1gcq37b7ox92fs90wts.png)
 
Ben 4 tane middleware'i olan bir örnek verdim, siz bunu n taneye kadar çıkartabilirsiniz. Yani sayı 4 olmak zorunda değil, 10 da olabilir 15 de olabilir ama çizmesi biraz zor olduğundan ben 4 ile kısıtladım :).

Bir dahaki yazımda görüşmek dileğiyle.

En iyi dileklerim ile.

Mustafa Samed Yeyin.
Jetstream / Inertia redirect login with axios & intended
Published: 2021-10-14 10:55:29

If you have to use axios and need to catch 401 errors (unauthorized) and redirect to login but want to redirect back: simply route an inertia request to the current url and it will handle routing to login and set intended in the session

```js
.catch(errors => {
    if (errors.response && errors.response.status === 401) {
        this.$inertia.get(window.location)
    }
})
```
Deploy Kubernetes CronJobs with Helm and Google Cloud Build
Tags: kubernetes, helm, cloud
Published: 2021-10-14 10:40:59

---
title: Deploy Kubernetes CronJobs with Helm and Google Cloud Build
published: true
description: Kubernetes CronJobs with Helm and Google Cloud Build
tags: kubernetes, helm, cloud
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
Kubernetes CronJobs is a way to execute jobs in a specific time, Helm, as many of you know, is a way to manage your Kubernetes applications defining, installing, and upgrading even the most complex Kubernetes applications and the last one is Google Cloud Build - the CI/CD solution that Google Cloud offers to be used in our pipelines. 

Now, if you put it all together you have the magic:

{% youtube -3PQBt-Kb0Y %}

***

*You can always hire [our mentors](https://mkdev.me/en/specializations) and learn directly from them!*
Frontend, Backend and Fullstack In Software Development, explained.
Tags: beginners, programming, django, react
Published: 2021-10-14 10:37:35

You must have wondered what the differences are between a Frontend Developer, Backend Developer and a FullStack as a beginner or Web enthusiasts.
In this post, our example will be on Web Applications.
Without further ado let's delve in.🥳

#The Generic name.
Let's first talk about what leads to being either a **Frontend, Backend or Full Stack developer**, which is Software Development.

**Software development** is the process of creating computer software using one or more programming languages.

##Types of Software Development.
1. Web Development.
2. Web Application development.
2. Mobile Development.
[Read more](https://vocal.media/01/10-different-types-of-software-development)

#Web development vs Web Application Development.

The simple difference between them is,
Web development is more like building a less interactive software, like a site that simply tells you about a business [belovedtwins](https://www.belovedtwins.com), while Web Application Development is the creation of a high level interactive web software, e.g [facebook](https://m.facebook.com) or [Github](https://www.github.com/crypticwisdom).
Knowing this simple difference between Web development and Web application development.

#Building a Web Application.
In building Web Applications we should know the 2 parts of a Web Application, which are:
1. **Frontend** : in abstract, the frontend of a web application is simply the visible part of the application (User Interface) and more in-depth look is the feel (User Experience) of the web application. The person in charge of this part is called a **Frontend Developer**.

2. **Backend** : this is the logical part of the whole web application system, it is the more critical part of a web app. This include Payment Processing, User Data handling , A.P.I creation(resources meant to be accessed by mobile phones for the Mobile version of the particular web app or other software like Desktop apps.), Frontend integration and so on...
A backend developer handles all data coming from the frontend and the data is being processed, stored, or returned back as information to the user in the Frontend.

Having these 2 skills of a Frontend Developer and a Backend Developer in one person makes him a **FullStack Developer**😌.

Note: Frontend, Backend and FullStack terminologies in Web Application are also applicable in other Software Development Areas such as Mobile Application. 

If you find this article helpful please follow for more and also drop a comment on what topic(s) should be treated next. 

**How to know what kind of developer to become.**😌

**What Technologies should you use as a Frontend, Backend or FullStack Developer ? You wanna know ?**😌