teleren/devto huggingface dataset:
The Swift Programming Language Companion: Properties Part 2
Tags: ios, swift, beginners
Published: 2020-06-27 12:42:05

This article is part of a series on learning Swift by writing code to The Swift Programming Language book from Apple. This is the fifth article in Section 2 (here is [Section 1](https://app-o-mat.com/post/swift-programming-language-companion-section-1))

Read each article after you have read the corresponding chapter in the book. This article is a companion to [Properties](https://docs.swift.org/swift-book/LanguageGuide/Properties.html).

This is Part 2 of the Properties companion. It builds on [Properties Part 1](https://app-o-mat.com/post/swift-book-companion-properties-1), so read that if you have not and do the exercises. The exercises in this chapter require that you have done those already.

### Set up a reading environment

If you are jumping around these articles, make sure you read the [Introduction](https://dev.to/loufranco/the-swift-programming-language-companion-introduction-4k0a) to see my recommendation for setting up a reading environment.

We can continuing using the page we made for Part 1 ("10-Properties").

### Exercises for Properties

At this point, you should have read [Properties](https://docs.swift.org/swift-book/LanguageGuide/Properties.html) in The Swift Programming Language. You should have a Playground page for this chapter with code in it that you generated while reading the book.

#### Exercises

The chapter covers how to declare Properties inside of Structures and Classes. In Part 1, we had exercised for stored properties, computed properties, and Type properties.

In Part 2, we’re going to look at Property Observers.

For these exercises, we are going to continue with the code we built in the last chapter.

In your Playground write code to do the following in the same playground that you used for Properties Part 1:

1. Declare a `Player` class
2. Add a `var` property to `Player` called `currentSong` that is of type `Song?` (we created `Song` in the last chapter)
3. Add a `didSet` property observer to `currentSong`. In it, print the title of the `currentSong` with “ is playing” appended to it (use String interpolation)
4. Construct a `Player` and set `currentSong` to a few different `Song` values.
5. In your `didSet`, when the new value is `nil`, print “No song is playing”
6. Set `currentSong` of your `Player` object to nil

#### Next

The next article will provide exercises for the [Methods](https://docs.swift.org/swift-book/LanguageGuide/Methods.html) chapter.
Search and sort of articles are confusing to me
Tags: devto, question
Published: 2020-06-27 12:26:32

Reading dev.to for a few days now. After reading some fresh posts, often I want to check some topics of interest using a search. But my first impression is that it just doesn't feel right. Mostly its about getting old articles in results, so quickly I have nothing more to read on the topic, ot it just appears like it, or Im doing it wrong.

Here is a story of my first impressions...

Day 1)
I'm interested in "aws" topics. I know there's #aws tag for it, let me find it. Menu - tags... Oh, list is huge, lets try to search for a tag... Nope. search above searches the site, not tags.
Ok, lets go alphabetically... Nope, they're not alphabetically sorted. Well, I'm not browsing all those. Let's search for '#aws', yes! Got it. Wait ... Too many articles are 2 years old. It cannot be that. Open first article, click on #aws tag...  Aha, completely different thing.

Day 2)
I've read top #aws articles, let's dig deeper. I want to see articles on AWS Sam. Hmm, can I search by tag? Let's search for: #aws sam
Good... But hey... Again top articles are 2 years old. There must be more on dev.to on Sam!? Scrolling down I realize there are newer articles deep down. Uh, don't want that. I've read all articles at the top, how am I going to continue reading tomorrow? I don't have a clue how those articles are sorted. It seems that list in search results and list created by clicking on the #tag are sorted differently, and there's no "sort by date" in any. I don't see the other way but to go through complete list every day, not to miss new ones but continuing to read beyond the point where I stopped yesterday.

There must be something about this on dev.to. Let me search for: #devto sort
Whaaat!? I get list of people in results? Confused. Maybe this is just displayed when there are no search result to display? Let me try searching for: 'gshdyejsjsieheh'...
Oh, now i get "no results match that query". So what's with that people in search results. Still confused 

Day 3)
Dev.to just appears like it has less (and older) content than it really has. At least in my use scenario. I mostly use homepage and 'latest' and a few tags I subscribed to. I feel like I'm missing something.

What am I getting\doing wrong?
PyLadies Dublin June 2020 Virtual Meetup Video && PyLadies in general
Tags: pyladies
Published: 2020-06-27 12:14:58

Last night I found the "Upload Video" in my dev.to dashboard. 🙌 I used the Liquid tags to include the Vimeo video in a previous post because I was pretty sure the upload video button was not available before as I searched high and low in my dashboard.

{% link whykay/pyladies-dublin-june-2020-virtual-meetup-l98 %}

I was curious what it would look like with a video that was uploaded to dev.to. 

##### Quick dets about the June meetup
* When: Tue, Jun 16. 2020 (18:30 - 19:30)
* Event page: [meetup.com/PyLadiesDublin/events/270123006/](https://meetup.com/PyLadiesDublin/events/270123006/)

##### Apologies for duplicate posts, I'm still trying things out. 😅

# BTW...

I also created the PyLadies Dublin Organisation. If anyone PyLadies members wants to join, let me know. I created a separate account (pyLadiesdub_vicky) as a proposal (possibly) to manage the PyLadies `insert other chapter` dev.to organisations, in a hope that there might be interest in pulling various chapters to post their dev articles while the main [pyladies.com](https://www.pyladies.com/) is the hub for all things PyLadies (they have a blog there too). 

They also track their various Global PyLadies projects on https://github.com/pyladies.

They also have a very active slack group which you can join, get involved, chat, ask questions, and find awesome Python/PyLadies resources - https://slackin.pyladies.com/ (I certainly find it invaluable as a PyLadies organiser). 

They are pretty busy at the moment, and they are adding a bit more structure to PyLadies (global) organisation:-

* [PyLadies Global Council](https://www.pyladies.com/blog/Help-us-decide-our-PyLadies-Projects-and-PyLadies-Global-Council-Selection-Process/help-us-with-pyladies-project-and-council-selection/)
* [Join PyLadies as a member](https://docs.google.com/forms/d/e/1FAIpQLSfknZgGu8HRA9UXiKoD0MWZ-vxOMHKRK5kJ_iK67tZq2pV6Qg/viewform)

**And if you are interested in getting involved in the global team, as a starter, I do recommend heading over to slack and joining in the fun! 😊**
React Hooks Video | Create Youtube Player -1
Tags: react, hooks, webdev, showdev
Published: 2020-06-27 12:01:21

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel.

We had earlier converted the YouTube player to use Redux. I am changing the project to use React Hooks instead of the class based components.

And here is my first YouTube video.

{% youtube i2hzZUW2eac %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.

You can also read the complete blog here -

https://thewebdev.tech/youtube-hooks-1
Daily Developer Jokes - Saturday, Jun 27, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-06-27 12:00:21

---
title: "Daily Developer Jokes - Saturday, Jun 27, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Jun%2027%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259bf358c4.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Hey officer! How did the hackers escape?

___A:___ No idea. They just ransomware.
 -->
Origin of Javascript - YoYoCode
Tags: javascript, beginners, information
Published: 2020-06-27 11:39:42

Hello everyone, today we'll discuss the origin of JavaScript.

Firstly, we are going to know which language it is replaced within the Web world.

Java was in huge demand in the 1990s and just too big to learn. So, they came up to have a scripting companion for Java on the web, so here in Netscape communications, Eich Brendan (hired on contract for this project), they had 2 things in their minds.

1. pick the right set of features.
2. a direct line to those who made the calls.

About the 2nd point, because they had a limited time to take a lot of important decisions had to be made to make it available. In this context JavaScript, a.k.a Mocha was born. They integrated the working prototype into Netscape Communicator. In a short time, it is renamed to LiveScript.

In December 1995, Netscape Communications and Sun closed a deal: Mocha/LiveScript would be renamed JavaScript, which would be presented as a scripting language for small client-side tasks within the browser, while Java is promoted as a bigger, professional tool to develop rich web components.
As at that time, Netscape was quickly becoming the preferred browser, while the Internet Explorer was being developed by Microsoft. At that moment web standards were not strong. So, Microsoft implemented its own version of JavaScript called JScript.

The Netscape's implementation of JavaScript also received an internal name. The version released with Netscape Navigator 2.0 was known as Mocha. This new version of Netscape's JavaScript engine was called SpiderMonkey. It is still the name of the JavaScript engine found in Firefox, Netscape Navigator's grandson.
For several years, JScript and SpiderMonkey were the premier JavaScript engines. The features implemented by both, not always compatible. Now you understand why Internet Explorer was quirky in terms of JavaScript and Web world.

Major Design Features:


Although JavaScript was born in a hurry, several powerful features were part of it from the beginning. These features would define JavaScript as a language and would allow it to outgrow its walled garden despite its quirks.


"JavaScript is still one of the most successful languages ever, always bet on JavaScript."

Thanks for reading this, here in the next post we'll get to know about JavaScript language and its syntax.
Car
Published: 2020-06-27 11:34:14

Madrazi Car Spa Is A Brand Which Is Literally Going To Change The Way People Think About Car Washing. We Love Cars , Clean Cars And We Are Chennai's Leading On-Demand [Car Wash Service](https://www.madrazicarspa.in), Dedicated To Provide Quality Service, Customer Satisfaction At A Great Value.​

##WE CARE ABOUT YOUR CAR

Checkout our recent posts below:
[Best Car wash shampoo in India](https://www.madrazicarspa.in/top-5-car-wash-shampoo-india-2019/)
[Best Car vacuum cleaner in India](https://www.madrazicarspa.in/best-car-vacuum-cleaner-in-india/)
[Best Car wax in India](https://www.madrazicarspa.in/best-car-wax-in-india/)
[Best Car wrapping in Chennai](https://www.madrazicarspa.in/car-wrapping-in-chennai/)
[Best Car cleaning cloth in India](https://www.madrazicarspa.in/best-car-cleaning-cloth-in-india/)
[Best Car cleaning kit in India](https://www.madrazicarspa.in/best-car-cleaning-kit-in-india/)
[Best Car and bike washing machine in India](https://www.madrazicarspa.in/best-portable-car-bike-washing-machine-india/)
[Best Car disinfectant spray in India](https://www.madrazicarspa.in/best-disinfectant-spray-for-car-in-india-2020/)
Spread Operator และ Rest Operator ในภาษา JavaScript
Tags: javascript, thai, beginners
Published: 2020-06-27 11:02:55

#Spread Operator คืออะไร ?
  Spread Operator เป็นการกระจายค่าออกมาเพื่อนำไปใช้ในส่วนอื่น
**ถ้าเป็น Array**
```js
const a = [1,2,3]
const b = [...a,4]
```
`...a` เป็นการกระจายค่าทั้งหมดในตัวแปร a
เปรียบเสมือน `const b = [1,2,3,4]`
ดังนั้นเมื่อแสดงผลออกมาจะได้
```js
console.log(b) // [1, 2, 3, 4]
```

**ถ้าเป็น Object**  จะคล้าย ๆ กัน
```js
const myName = { name: "A" }
const person = {...myName, myAge: 20}
```

#Rest Operator คืออะไร ?
  Rest Operator เป็นการเขียนในส่วนที่เป็นตัวแปรที่รับเข้ามาในฟังก์ชัน
โดยที่ไม่จำเป็นต้องเขียนไว้ว่าจะต้องรับค่ามากี่ตัวแปร
แต่จะสามารถเขียนเป็น ... เพื่อให้ parameter ที่รับมาทั้งหมดเก็บไว้ในที่เดียว
ตัวอย่างเช่น
```js
const filter = (...args) => args.filter(arg => arg > 5)
console.log(filter(1,2,3,4,5,6,7,8,9))
```
ผลลัพที่ได้คือ ` [6, 7, 8, 9] `
HTTP Request Method
Tags: java, springboot
Published: 2020-06-27 10:31:42

HTTP is effective communication for requests and responses between clients and servers. The message that is sent by a client to a server is what is known as an HTTP request. Client can send requests with various methods by the following table.

Method | Description
--- | --- 
GET | GET is the most used requests in HTTP request methods. GET is used to request and retrieve information from the server.  Requests using GET should only retrieve data.
HEAD | HEAD is similar to GET but it transfers the status line and header section without having message-body in the response.
POST|  POST is used to send data to the server to create or update a resource by using HTML form.
OPTIONS | OPTIONS is used to indicate the communication options for the target resource.
PUT | PUT is similar to POST and the PUT method replaces all current representation of the target resource with the request.
DELETE | DELETE is used to delete current representations of the target resource indicated by a specific URI.
TRACE | TRACE is similar to POST and PUT but it performs a message loopback test along the path to the target resource.
PATCH | PATCH is similar to POST and PUT and the main purpose of PATCH is used to partially modify the resource.
Coronavirus Tracker in Python? Get current COVID-19 Cases
Tags: python
Published: 2020-06-27 10:29:21

```python
# Author: codesnail

from covid import Covid
import matplotlib.pyplot as pyplot

covid = Covid()
print("Want data of specific country (press: 1)")
print("World data (press: 2)")
ch = int(input("Enter your choice: "))

if ch == 1:
    country = input("Enter your country name: ")
    data = covid.get_status_by_country_name(country)
    cadr = {
        key: data[key]
        for key in data.keys() & {"confirmed", "active", "deaths", "recovered"}
    }

    n = list(cadr.keys())
    v = list(cadr.values())
elif ch == 2:
    cadr = {
        "confirmed": covid.get_total_confirmed_cases(),
        "active": covid.get_total_active_cases(),
        "deaths": covid.get_total_deaths(),
        "recovered": covid.get_total_recovered(),
    }

    v = list(cadr.values())
    n = list(cadr.keys())

print(cadr) # print data


pyplot.title("Corona Tracker")
pyplot.bar(range(len(cadr)), v, tick_label=n)
pyplot.show()
```

Explanation: [codesnail](https://www.codesnail.com/coronavirus-tracker-in-python/)
Redirect all url with # from HashRouter to BrowserRouter
Published: 2020-06-27 10:07:18

I changed HashRouter to BrowserRouter and now I would like to redirect all urls to remove # from them. (Url are in e.g. mailing - so I have to do it).


I found a similar topic to this, but none of the solutions there works for me.

```
import { BrowserRouter } from 'react-router-dom'

class Index extends Component {

    render() {

        return (
<BrowserRouter>
  <Switch>
    <Route exact path={"/"} component={() => <HomePage />}/>
    <Redirect from='/#/bus/:category' to '/bus/:category' />
    <Route exact path='/bus/:category' component={BusCategory} />
  </Switch>
</BrowserRouter>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));
```
It's redirecting only to HomePage.

Next solution also not working: 

```
import { BrowserRouter } from 'react-router-dom'

class Index extends Component {

    render() {


 const history = useHistory()

  if (location.hash.startsWith('#/')) {
    history.push(location.hash.replace('#', '')) // or history.replace
  }

        return (
<BrowserRouter>
  <Switch>
    <Route exact path={"/"} component={() => <HomePage />}/>
    <Route exact path='/bus/:category' component={BusCategory} />
  </Switch>
</BrowserRouter>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

```
and the last one also nothning :( 

```
import { BrowserRouter } from 'react-router-dom'

class Index extends Component {

    render() {

        return (
<BrowserRouter>
  <Switch>
    <Route exact path={"/"} component={() => <HomePage />}/>
    <Route exact path='/bus/:category' component={BusCategory} />
    <Route path={"/bus/:category"} render={({ location }) => <Redirect strict to={location.hash.replace('#', '')} />} />

  </Switch>
</BrowserRouter>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));
```


I've probably already tried all the options, if anyone can help me I'll be extremely grateful.
javascript optional chaining
Tags: javascript, tricks
Published: 2020-06-27 09:55:27

---
title: javascript optional chaining
published: true
description: how to fetch object safe
tags: Javascript, Tricks
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4q56d1194l88u8kkyvzu.jpg)

You may write code in **javascript** like this:

```javascript
if (foo && foo.bar && foo.bar.baz) {
	foo.bar.baz();
}
```

We want to call `baz()` but first need check if `foo` , `foo.bar`, `foo.bar.baz`  present.  i think this is a little bit more prolixity. 

Now you can write code like 

```javascript
foo?.bar?.baz() 
```

That all, just need use `?.` operator, this called **optional chainning**.  you need do something in **babel** config 

```javascript
// babel.config.js
module.exports = {
  env: {
  		.....
      plugins: ['@babel/plugin-proposal-optional-chaining']
    }
  }
}
```

### More **optional Channing** example:

#### Dealing with optional callbacks or event handlers

```javascript
function doSomething(onContent, onError) {
  try {
   // ... do something with the data
  }
  catch (err) {
    onError?.(err.message); // no exception if onError is undefined
  }
}
```

#### Optional chaining with expressions

```javascript
let nestedProp = obj?.['prop' + 'Name'];
```

#### Array item access with optional chaining

```javascript
let arrayItem = arr?.[42];
```



You can found more api [optional chainning](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)

Hope it can help you :)
Fixed: Create React App -Template Not Provided Using Create-React-App
Tags: react, javascript, createreactapp, programming
Published: 2020-06-27 09:24:05

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

You are likely to run into an unusual problem when trying to run create-react-app in your projects.

I recently encountered “A template was not provided” as shown below during create-react-app, my understanding is that the bug occurs because ***npm install -g create-react-app*** installed globally and you need to uninstall it globally using ***npm uninstall -g create-react-app*** in your terminal.

***npm create-react-app*** installs package run throughout the lifecycle of a project while ***npx create-react-app*** (x stands for eXectute)downloads and installs packages temporarily and allow npx to install with the latest version.

**The  process to fix error:**

***npm uninstall -g create-react-app*** will remove project files. However, the following process will make sure the error doesn’t come up during your next installation. 

Next, run: ***which create-react-app***, this will show you where it is installed.

Mostly, your projects installations will be at ***/usr/bin*** directory location such as **/usr/local/bin/create-react-app.**

Finally, run ***rm -rf /usr/local/bin/create-react-app***, which will completely delete react project and don't forget to use ***sudo*** command for Linux administrative rights.

Your **" template not provided"** should be fixed. You can run the following commands below:  
+ ***npx create-react-app my-app***
+ ***npm init react-app my-app***
+ ***yarn create-react-app my-app***

Happy hacking!

Please share your result, if this was helpful.
Go + Vuetify
Published: 2020-06-27 09:23:55

I've been trying to learn Go for a while now, but in a very haphazard way. One of the most engaging and successful tutorials I found was [Davy Wybiral's series](https://www.youtube.com/playlist?list=PLmxT2pVYo5LDMV0epL4z4CUbxvIw6umg_) from a few years ago. I learned quite a bit from following those videos.

Building on the application I built following Davy's tutorial, I wanted to add Vuetify for some easy styling. I found this post about using Vue.js without having to install a development environment, simply embedding the JavaScript into `index.html`: {% post sorincostea/vue-js-if-you-re-not-a-frontend-developer-2534 %}

I found I could do the same with Vuetify. There were a few things that tripped me up though, and I wanted to write them down to remember them for later.

## Include the required assets

Fonts and CSS are added to `<head>`.

```html
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <title>{{ .Title }}</title>
  ...
</head>
```

The Vue.js and Vuetify scripts are added at the bottom of the page `body`.

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
```

You'll also need to start a Vue.js instance:

```html
<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify()
  })
</script>
```

## Add the app

Everything exists inside the `#app` div:

```html
<div id="app">
  <v-app>
  </v-app>
</div>
```

## Include the material icons

This one threw me for a long time: although the Material icon *fonts* are included in the code above, the *icons* are not. Add the icons to the page's `head` with this:

```html
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
```

## Go and Vue template tags clash

Re-define the Vue.js template tags from `{{ item }}` to `${ item }` as follows. Just include this in the JavaScript that instantiates the app:

```javascript
delimiters: ['${', '}']
```
Day 1: Data Types
Tags: python
Published: 2020-06-27 09:18:21

The first day of code got underway well. Pythons datatypes are str(string), int(integer), float(float) and bool(boolean), however only three of those were being tested today. 

This challenge tested my knowledge of inputs and outputs, of datatypes int, float and str. After inputting the data, the next part of the challenge was using the + operator to add the sum of the two integers together and the same with the float, and to concatenate both the string values. 

Heres my code:

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