teleren/devto huggingface dataset:
Day 36 of 100 Days Of Swift UI
Tags: swift, swiftui, 100daysofcode
Published: 2021-04-19 06:55:49

I just completed day 36 of Hacking with Swift's 100 days of Swift UI.

Today I learnt about a new type of swift UI property annotation called the Observedproperty. I also learnt about user defaults and the codable protocol.

So far we have been using the `@State` property to represent the states of our app. The `@State` works only with variables and structs. The reason why Structs work so well with the `@State` property is because Structs are constant. That means anytime a property of a struct changes its value, the struct is destroyed and created again. Whenever the struct is created again, the `@State` property is assigned a new struct and this causes SwiftUI to redraw the views on the screen. 

Since Structs are value types. They can't be shared between views as each view would have its own copy of the struct. 
For this, we have to use classes to model our states. But since classes are not constants we can't use the `@State` annotation with classes.  This is because when properties of a class change their value the class is not destroyed and created again.

In order to use classes to model our states, we have to use a new kind of annotation called the `Observedproperty`

```swift
class User: ObservableObject {
    @Published var firstName = "James"
    @Published var lastName = "Bond"
    var age = 50
}
struct ContentView: View {
   @ObservedObject var user = User()

    var body: some View {
        VStack {
            Text("Your name is \(user.firstName) \(user.lastName).")

            TextField("First name", text: $user.firstName)
            TextField("Last name", text: $user.lastName)
        }
    }
}
```

The code above uses a class to model the state of a screen. In order to use classes to model the state of your screen, you need three things:
* Your class must conform ObservableObject protocol.
* You need to tell SwiftUI which properties of your class you want it to observe for changes. You do this with the `@Published` annotation. As you can see the `age` property of the User class isn't marked with the `@Published` annotation. That means whenever we change the value of the `age` property, SwiftUI will not redraw our views.
We also need to annotate our class in the view with ` @ObservedObject`
Iconic developers | part 3 🏹🎅😳
Tags: discuss, webdev, watercooler, programming
Published: 2021-04-19 08:09:26

# The new iconic developers is here!

Thanks @technoglot, @theowlsden and @nefomemes
Keep it up!

I hope there will be three more in the comments so we can continue this list 😊😊

Maybe some ideas:
😴🤐🤒😵🥴🐱‍👤🙈🙉🙊


---
## 🏹 The Bug Buster
Name says it all: that person on the team that is a master in bug squashing. No pesticides needed: their eyes are enough. No bug is safe from them!

#### Habitat
They live inside IDE's and have static code analysis for breakfast, lunch, and dinner. Code quality is their utmost priority!

#### Best to ask for
Advice on how to exterminate bugs. They can sniff them from miles away! 👃🏻

#### Needs works on
Working on actual features! Squashing bugs is important, but we've got a product to ship! 📦These features won't take care of themselves!

> [Based on this comment](https://dev.to/technoglot/comment/1denf)

---

## 🎅 The tools Santa
Do you have a problem you don't know how to solve? They have a tool for you.

#### Habitat
Your everyday office, forums, anywhere really. If you have a question, they are there to answer with a tool (a new software, library, etc).

#### Best to ask for
An over-engineered solution to a problem. They have experience with a whole lot of tools.

#### Needs works on
Tone it down a bit. Not everything needs to be solved with a new tool.

> [Based on this comment](https://dev.to/theowlsden/comment/1delm)

---
## 😳 The branch breaker
Look out! This developer will break your branch. A mistake like running git reset HEAD when they should have used git reset --soft HEAD  is not uncommon..

#### Habitat
Mostly found behind a terminal looking like 😥. Searching for a fix for the made mistakes, hoping no one will ever find out what they did.

#### Best to ask for
Helping you fix git mistakes, they’ve been there and know how to get you out!

#### Needs works on
Admitting their mistakes instead of (trying to) cover them up.

> [Based on this comment](https://dev.to/nefomemes/comment/1dfbk)

---
Leave yours in the comments!
10 Awesome CSS Resources
Tags: beginners, webdev, productivity, codenewbie
Published: 2021-04-19 08:01:01

A list of few CSS resource that help me design the CSS code better. I will give you a brief intro to each resources listed here, its better to play with each of the resources, it can help you design the code better and help to understand how the code works. 

1.[Clippy](https://bennettfeely.com/clippy/) : A great resource for CSS shapes generation.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnvyxwplu4ieg4gu5q9m.png)


2.[Code Pen By AnchorIdeas](https://codepen.io/AnchorIdeas/full/GQbrgp/) : A flexbox visualizer with code generator.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocj0gzz6ng7c3xhc2u0j.png)


3.[Code Pen By Carolineartz](https://codepen.io/carolineartz/full/ogVXZj) : An interactive box model visualizer.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjr4zq79h6u3kc73alm2.png)
 
4.[Keyframes](https://keyframes.app/animate/) : This website help you in generating CSS animation code, you can play with various animations option and generate code for it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn6jr8xpt5ee3hvzkv5w.png)

5.[Screensizemap](https://screensizemap.com/) : A screen size comparison for your responsive design.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqimqz26vmfrmro8ez8s.png)

6.[CSSduotone](https://cssduotone.com/): This site help you to apply an overlay to your image.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ojyhpv2qu98nvaldtdh.png)

7.[CSS Doodle] (https://css-doodle.com/) : A web component for drawing patterns with CSS.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5odw01wgi8f7coxtdy1.png)

8.[CSS Ruler](https://katydecorah.com/css-ruler/) : An interactive visual size comparison generator. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/389lgm641u345ztduhf8.PNG)

9.[Easing.co](https://easings.co/) : Test common easing curves on a range of interfaces. Or generate your own custom bezier curve.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/timphetnsj0vsn06wdup.PNG)
10.[Neumorphism.io](https://neumorphism.io/) : Generate Soft-UI CSS code
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il1ajjlq2pq0k5niuwsu.PNG)

{% link https://dev.to/kiranrajvjd/19-simple-hover-animation-using-css-1l36 %}
{% link https://dev.to/kiranrajvjd/20-awesome-css-code-generators-27gp %}
{% link https://dev.to/kiranrajvjd/awesome-35-svg-resources-for-your-next-web-project-5c15 %}
{% link https://dev.to/kiranrajvjd/10-best-javascript-based-github-repos-for-web-developers-49pc %}
What are special features and advantages of Apache Spark 2.0 over earlier versions
Published: 2021-04-19 07:53:56

The unique highlights and benefits of Apache Spark 2.0 over prior forms are: 

In this adaptation of Apache Spark 2.0, DataSet and DataFrame APIs are blended. 

Apache Spark 2.0 is quicker than its previous forms, with much more spotlight on Parquet and reserving that will help in accomplishing more yield. 

Apache Spark 2.0 is the main form that will zero in on ETL, which something the past variants were definitely not. 

This variant presented organized streaming and numerous extraordinary highlights. On the off chance that you wish to find out about Apache Spark, I would propose you look at the Apache Spark instructional exercise, and assuming you are wanting to break into this area, I would recommend you look at the Spark Certification [Spark Certification](https://intellipaat.com/apache-spark-scala-training/) from Intellipaat
10 Year Open Source
Tags: opensourceproject, zentao, opensourcestory
Published: 2021-04-19 07:43:26

From my first open-source project, I have developed or participated in a variety of open-source software. From the ignorance at the beginning to my startup of an open-source software company, then to make profits out of open source software, I have learned a lot along the way. Therefore, I would like to share my experience and lessons learned with open-source software developers and authors.
https://www.zentao.pm/blog/10-Year-Open-Source-942.html
4 Awesome Tools That Help You To Manage You CSS Code Better
Tags: css, webdev, beginners, productivity
Published: 2021-04-19 07:22:26

I mentioned 4 tools that will help you to code CSS better. If our CSS code contain mistakes and we use the code in production as we were unable to find the errors, restructuring the CSS after deploying will be expensive and time consuming. These tools help us to format, organize and sort our CSS Code better, which would help to find error and other pattern issues.

1. [Sanitize.css](https://csstools.github.io/sanitize.css/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbqvft4kwd9lo836jo3u.PNG)
Sanitize.css is a CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults. It is developed alongside normalize.css, which means every normalization is included, and every normalization and opinion are clearly marked and documented.

2. [Purgecss.com] (https://purgecss.com/configuration.html#configuration-file)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asl33myk8ssas1e14jtc.PNG)
PurgeCSS is a tool to remove unused CSS. It can be part of your development workflow. When you are building a website, you might decide to use a CSS framework like TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc.

3. [CSS Shrink](https://cssshrink.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax2385vjqmisx11jnlhz.PNG)
This site help you to shrink your CSS code, I mean size of the CSS code.

4. [CSS Lint](http://csslint.net/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y7v06nqnx27a1qsjsm6.PNG) CSS Lint help you to find errors and give you warning about possible broken code pattern.

If you have any better resources let me know, happy coding

You can check more web development resources below. 
1. [20+ Awesome CSS Code Generator Resources](https://dev.to/kiranrajvjd/20-awesome-css-code-generators-27gp)
2. [40+ Awesome SVG Resources for Web Developers](https://dev.to/kiranrajvjd/awesome-35-svg-resources-for-your-next-web-project-5c15)
3. [15+ Awesome CSS Animation Resources](https://dev.to/kiranrajvjd/15-awesome-css-animation-resources-4mhi)
4. [10 Awesome CSS Resorces](https://dev.to/kiranrajvjd/10-awesome-css-resources-14mh)
5. [Awesome CSS Layout Resources](https://dev.to/kiranrajvjd/awesome-css-layout-resources-for-beginners-508a)
6. [25 Awesome Google Fonts](https://dev.to/kiranrajvjd/25-awesome-fonts-from-google-fonts-40im)
My new favourite programming font: iA Writer Mono S
Published: 2021-04-19 07:17:20

![IMAGE 2021-04-19 10:14:14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8t3mtymdrkevgjn473t.jpg)

My new favourite programming font is iA Writer Mono S:
https://github.com/iaolo/iA-Fonts/tree/master/iA%20Writer%20Mono

P. S. Also check out how they announced this and other fonts:
https://ia.net/writer/blog/a-typographic-christmas
Add remote server location to Ubuntu Nautilus using SSH
Tags: ubuntu, ssh, vps, nautilus
Published: 2021-04-19 06:46:03

In this post I described how to connect remote VPS server with local Ubuntu nautilus. I am using Ubuntu 20.04 and for the VPS or remote server I've been using Oracle Cloud Infrastructure. 
In this post I am not going to write the process of creating cloud instance on OCI. For demonstrating the connection I've create a cloud instance with the following parameters-

| Parameter names | Properties |
| --- | ----------- |
| Instance name | media-server |
| Image | Ubuntu minimal 20.04 |
| Public IP | 152.67.xxx.xx |

When creating the instance I downloaded the private ssh key
![Oracle cloud instance private key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l88u1tfhtxo0vsvr6hz.png)

Here are the steps for connecting remote server to Ubuntu 20.04 Nautilus -

### Step 1
To use ssh key with .key file extension we need to convert it to .pem file using this command
``` bash
$ openssl rsa -in path/to/private.key -text > private.pem
```
### Step 2
Now create and edit config file in ~/.ssh folder
``` bash
$ gedit ~/.ssh/config
```
The config file should contain Host name, User name, port and the private key (.pem file) path. In my case the config file contains these lines -

```
Host media-server  
  HostName 152.67.xxx.xx
  User ubuntu
  Port 22
  IdentityFile /path/to/private.pem
  Compression yes
```

### Step 3
Now we need to change the access permission for the .pem file and .ssh folder using the following two command -
``` bash
$ sudo chmod 600 /path/to/private.pem
$ sudo chmod 755 ~/.ssh
```

### Step 4
Now open Nautilus and go to *Other loaction*. 
There is a *Connect to server* input field at the bottom.
Enter your host title followed by ssh://.
In my case I entered `ssh://media-server` in the input.

![Ubuntu nautilus connect to server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wh5jqu2oey20u1yc4z57.png)

Now press *Connect*. Within few seconds Nautilus will mount the server location. 
Congrats 🎉. You have now full access to your remote server files and folders through your local Ubuntu nautilus. 

![Ubuntu nautilus remote server connection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ykenkwlq02mxjztx5nc.png)

You can also connect Ubuntu terminal with your remote server using this command -
``` bash
$ ssh media-server
```
Or in nautilus, by right clicking inside any remote folder you will have two options -
`open in remote terminal`
`open in local terminal`



By connecting local file manager (nautilus) with remote server we can now create, edit or delete any files or folders using the GUI of nautilus. This helps to easily navigate to different folders at remote server. Also opening terminal at any remote folder location never been so easier. 

Thank you for reading my first post at dev.to.
Don’t use global static objects - avoid race condition in SSR Angular 🏎
Tags: angular, ssr, 5days5blogposts, concurrency
Published: 2021-04-19 06:41:51

**Instead of using a global static object, you should create an injectable service. Otherwise in SSR server two apps bootstrapped for two concurrent http requests can change and read that object at the same time. It’s prone to race condition.**

Sometimes it’s not so obvious we’re using a static global object, especially when we import it from a 3rd party library. 

### 3rd party library `i18next`

In an Angular project I imported the translations engine from the 3rd party vanilla JS library: `import i18next from ‘i18next’`. Then in an `APP_INITIALIZER` I set the active language `i18next.changeLanguage(urlLang)` based on the URL param, for example `site.com/en/` or `site.com/jp/`. Then this language was used behind the scenes to translate labels in the components, i.e. `i18next.t(‘translation.key’)`. 

### Race condition

When the SSR server received 2 http requests *in a row* and handled them *concurrently* in one NodeJS process - `site.com/en/` and `site.com/jp/` - the global current language was set first to English, and then immediately overwritten to Japanese. The components of both apps were rendered a little later, so both were using Japanese for translating labels. Therefore a user requesting an URL `site.com/en/` could get a response in Japanese, which was a bug. 

### Bugfix

To fix it I needed to create a fresh `i18next` instance `i18next.createInstance()` for each bootstrapped app. So I wrapped it in an injection token provided in the app’s root injector:

```typescript
import i18next from ‘i18next’;

export const I18NEXT_INSTANCE = new InjectionToken('I18NEXT_INSTANCE', {
  providedIn: 'root',
  factory: () => i18next.createInstance(),
});
```

Then this instance could be accessed only by the injectable classes (components, services, …) inside the same bootstrapped app: 

```typescript
constructor(
  /* ... */
  @Inject(I18NEXT_INSTANCE) protected i18next
) {}
```
Freshdesk Integration with Mailchimp
Published: 2021-04-19 06:26:01

You can easily integrate Freshdesk with Mailchimp and perform the following tasks:

Add new Freshdesk users as subscribers to Mailchimp:
Freshdesk-Mailchimp integration, all-new Freshdesk users will be added as subscribers to your Mailchimp list

Add or update Mailchimp subscribers for new contacts in Freshdesk:
This integration makes it easy by automatically adding a subscriber in Mailchimp when there is a new contact added in Freshdesk.
Share Typeform Entries To Emails Via Gmail
Published: 2021-04-19 06:11:27

Typeform Gmail Integration:
Using this, every time a new Typeform entry is completed, Quickwork will send a new email via Gmail. 
Share Typeform Entries To Emails Via Gmail

{% youtube u-PpBpJjpu8 %}

You can start creating your automated/integrated workflows here- https://automation.quickwork.co/#/
Email Alerts using Gmail and Freshdesk

Published: 2021-04-19 06:09:17

Gmail Freshdesk Integration:
Quickwork | Tutorial: Send Gmail Email For New Freshdesk Tickets
{% youtube xMqm6tEIWfY %}

Quickwork | Tutorial: Create New Freshdesk Tickets When We Receive New Emails On Gmail

{% youtube fwDxf8Ddh3c %}
You can start creating your automated/integrated workflows here- https://automation.quickwork.co/#/
Lead notifications using Salesforce and Slack
Published: 2021-04-19 05:58:45

Using this integration, new Salesforce opportunities created are automatically posted to a Slack channel and shared with your team. 
Get Slack Notifications For New Salesforce Opportunities
{% youtube 1cVM-ruc7I0 %}
Quickwork helps companies integrate multiple systems and applications, to design delightful user journeys using Quickwork automation builder. Quickwork automation builder is an API-driven, zero-code, DIY tool, enabling any user to design and implement workflows with ease and speed.
Lead notifications using Salesforce and Slack

Published: 2021-04-19 05:57:12

Some of the top productivity apps are:
Google Sheets: Google Sheets is a spreadsheet program included as part of a free, web-based software office suite offered by Google within its Google Drive service.
{% youtube JWeNCqN6KkA %}

Google Calendar: Google Calendar lets you organize your schedule Using Quickwork you can automatically add new Shopify orders to your CRM as they are created. This Integration will automate new Shopify orders created to Salesforce as new leads.
Add New Shopify Orders To Salesforce As Leads
 
Quickwork helps companies integrate multiple systems and applications, to design delightful user journeys using Quickwork automation builder. Quickwork automation builder is an API-driven, zero-code, DIY tool, enabling any user to design and implement workflows with ease and speed.
Setting up a Ruby on Rails Project
Tags: devjournal, rails, ruby
Published: 2021-04-19 05:32:40

Before setting up a Ruby on Rails project, you have to make sure that you have the latest version installed on your machine. If you have Ruby installed, check the version by typing 

    ruby -v
    // then type 
    gem --version

If you get an error that means you don't have Ruby, download the installation package from https://rubyinstaller.org/. Follow the link and then run the installer.

Now that's done, its time to set up the Rails installation,

    gem install rails

Create a new repo on GitHub. Clone the repo in your command line, within the directory you want to type this line of code,


    rails new *name of your app or project*
    // ex: rails new myProject

Now after you open your vscode, you can start the rails server to see your work live with the command

    rails server // or rails s

#Optional

The above steps set you up with blank files and folders so you can start building from scratch. But, there is an option where you can scaffold folders and files for an already setup MVC structure with a database as well.
 
    rails generate scaffold Project name:string 


That's it! Youre all set up with the bare bones of a Ruby on Rails application. Let me know if there are any other clarifications you would like me to go over! Enjoy!
Why you shouldn't be a full-stack engineer
Tags: webdev, career, fullstack, junior
Published: 2021-04-19 04:47:20

Everybody is hiring full-stack engineers! Startups and big corporations throw big salaries for hiring such profiles. But let me tell you why you shouldn't contribute to that trend.

## 1. "Full-stack" is too vague 🌊

In the beginning, the label full-stack was coming with another precision: which stack? Nowadays, we just consider a full-stack having the mastery of front-end and back-end. But **there is no one stack**.  <br>
Back-end systems are composed of plenty of micro-services and integrations of different sorts. A front-end can be a website, a mobile app, a smartwatch app, etc. There are also dedicated stacks for Analytics and QA. So which stack are we talking about?

## 2. You are fooling yourself into thinking you are capable of everything 🎭

This is for a simple reason: **time**.  <br>
While you should always learn and improve, you can't overpromise. You are an important actor in the risks' evaluation! Put your overconfidence aside, and ask yourself: "Am I alright if I am wrong?" 

## 3. Employers underestimate what being a full-stack engineer would actually mean 👨‍💼

In the past, being a full-stack meant working with HTML/CSS/JS on a LAMP (Linux, Apache, MySQL, PHP) stack. And use FTP to update your site. <br>
Today full-stack means having the mastery of HTML, CSS, JS, SASS, React, NPM, Shell, Docker, Python, Linux, MySQL, Redis, AWS S3, AWS EKS, AWS EC2, Google Analytics, Selenium, Git, Travis CI, Kubernetes, etc. <br>
There are many and many. And that **makes our job more complicated than ever**.

<br>
So in the end, what should you be? My answer is **a software engineer**. He/she is versatile by definition. Also, as a software engineer, you won't be trapped in any role and be able to grow your skills in the directions you want.


------------------------------------------------


Photo by <a href="https://unsplash.com/@eklektikum?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Iva Rajović</a> on <a href="https://unsplash.com/s/photos/stack?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>