teleren/devto huggingface dataset:
What’s the Difference between @ObservedObject and @StateObject in SwiftUI
Tags: swift, swiftui, ios
Published: 2020-12-23 23:39:46

---
title: What’s the Difference between @ObservedObject and @StateObject in SwiftUI
published: true
description: 
tags: #swift #swiftUI #ios
//cover_image: https://direct_url_to_image.jpg
---

<!-- wp:paragraph -->
<p><strong>@StateObject</strong> and <strong>@ObservedObject</strong> are very similar in that they both keep track of an objects state. The difference is <strong>@<strong>StateObject</strong></strong> is owned by the view it was created in where as <strong>@ObservedObject </strong>is owned by another view.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>An example of when to use <strong>@ObservedObject</strong> is to keep track of external classes so the view can be updated when a change occurs. We would want to use an <strong>@ObservedObject</strong> for something like fetching new data from an API or a database.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We want to use <strong>@StateObject</strong> when we want the view to keep track of its own objects state. A example of how we would use <strong>@StateObject</strong> is if we had something like a number counter in a view and we wanted to keep track of the count as the numbers changed.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I hope this helps you better understand the difference between when to use <strong>@ObservedObject</strong> and <strong>@StateObject</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For a deeper dive into <strong>@StateObject</strong> vs <strong>@ObservedObject</strong> checkout these great articles by <a href="https://www.donnywals.com/whats-the-difference-between-stateobject-and-observedobject/">Donny Wals</a> and <a href="https://swapnanildhol.medium.com/stateobject-vs-observedobject-in-swiftui-40499592853">Swapnanil Dhol</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading and happy coding 👨🏻‍💻👨🏻‍💻👨🏻‍💻</p>
<!-- /wp:paragraph -->
3D Realism Hobby
Tags: watercooler
Published: 2020-12-23 23:35:26

So in my spare time I like to make 3D art, I have done this for years and now blender has become so strong that I can do this... for free!

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

This is a still from my animated candle which uses noise to animate a flame, it looks pretty real, I also added noise to the lighting to give that candle flicker. once Its all done I will upload a video to share.

Also I am making a web version in GLTF - that is the pert of a hobby that extends development for me, but I enjoy it a lot.

Oh yeah I probably showed this one too:

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

Happy holidays!
Deploy certain files/folders without resetting (i.e. redeploying) the entire site in GFirebase?
Tags: firebase, webdev, help, watercooler
Published: 2020-12-23 23:08:33

Is there any way to deploy certain files/folders in a way with the GFB CLI (Google Firebase CommandLine Interface) so that I don't have to "reset" (redeploy) my entire website?

I've currently been modifying my website, and the changes aren't ready, and stupid enough, I didn't back up the old files (and really don't wanna download the site (if there is a way), just to do this), and was wondering if I could just add/mod a single file/dir without changing the whole site.

<div alt="Thanks! Cheers!">
<b><center><b>Thanks!<br/>Cheers!</b></center></b>
</div>
No-Code Portfolio Site Template With Notion
Tags: codenewbie, portfolio, design
Published: 2020-12-23 23:06:01

As many of you know not all jobs in tech require or involve coding because of this sometimes it is difficult or costly for some people to create a portfolio site. I decided to make a No-Code Portfolio Site Template with my favorite tool: Notion App. 

This is great for anyone that does not know how to code or is a beginner and wants to have a place to showcase their skills, work, contact information etc. 

If you are more of a visual learner I have also recorded the process and you can watch the video here on my Youtube Channel. 

{% youtube dRzqJzFVQXE%}

You can also use the template link to duplicate the template and use it for your own work.

**_Template Link:_** 
https://www.notion.so/Portfolio-8c55795820164012abfb6ea3b50baf5f

The portfolio has different sections that you can use to display your contact info, social links, soft skills, and much more. With the embed tool, you can even include your blog posts, or youtube videos, and other websites that you would like on your site. If you are a designer you can even include works from Figma. 

You can customize the template to include your own details. 

If you are interested and have any questions lets talk feel free to [contact me](https://www.instagram.com/brendamichellle/).
DO Hackaton Log #3
Tags: dohackathon, react, typescript, node
Published: 2020-12-23 22:54:57

Hi devs,

My latest addition to my hackaton project has been the implementation of user authentication through the GitHub OAuth API. Users can now start a session with their accounts to gain access to restricted pages and also destroy their sessions and sign out.

![Sign in demo](https://dev-to-uploads.s3.amazonaws.com/i/ln9gfkcdyqbot8m6xswg.gif)

The way it works is quite simple: when we register an OAuth application with GitHub we can generate a link that will show the authorization screen, we can also set a callback URL that GitHub will redirect to after the user accepts. When the user is redirected, GitHub adds a code to a query parameter of our callback URL. This code is sent to my application server where it can be traded for a token. Since the scope of my application is empty, this token can only really be used to read publicly available data on the user that tried to sign in, but if our application had more in-depth integration with GitHub's services we could add other things to the scope and take actions on behalf of the user, such as creating repos, commenting on issues etc. After the application reads the user data it checks to see if that user already exists in our database, if it doesn't it creates a new one, if it does it simply updates that user's information. The server can finally emit a JWT for that user and return it with some session information.

On the front end side of things, I am using the context API to keep session information and persisting it trough the browsers local storage (I realize this isn't the end-all solution for JWT safe-keeping but it will be improved upon later).

I'd love it if you gave it a try at [this link](https://dbug.xyz/) and let me know what you think.

Have a great hackaton!

{% github yvesnrb/dbug no-readme %}
Migrate Create React App to Razzle
Tags: discuss, react, razzle, ssr
Published: 2020-12-23 22:49:54

---
title: Migrate Create React App to Razzle
published: true
description: Migrate CRA to Razzle 
tags: discuss, react, razzle, ssr
//cover_image: https://direct_url_to_image.jpg
---

I have a project which was built using Create react app. I need now a server rendering for my App I found about Razzle it is the most simple method to implement.

I have the /src which has all the components in addition a folder for images Also a few stuff in the public folder. And node_modules folder last I have the dependencies in the package.json

Should I just copy paste them to Razzle? Which I have tried and I get errors webpack_require and TypeError: cannot read property 'prototype' of undefined?

What is the best way to convert to Razzle?

Thank you
C# İle Generic Sınıflara Giriş
Tags: genericclass
Published: 2020-12-23 22:44:22

>Generic sınıflar OOP programlama yaparken C# ta kurtarıcı bir özelliğe sahiptir. Bu yüzden genericleri çok iyi anlamamız gerekiyor.

**Generic nedir ?**

Örneklerle açıklamaya çalışayım.

>Kurduğumuz bir `CRUD` operasyonlarını içeren yapıyı her nesne için tekrar tekrar yazmamak için onu bir tip kullanmaya zorlamadan generic bir yapı oluşturarak her nesnemize uyarlanabilir hale getireceğiz.

Customer sınıfımızı ve onun Crud operasyonlarını içeren DAL interface'i üzerinden gidelim.
```
  interface ICustomerDal  
  {
        List<Customer> GetAll();
        Customer Get(int id);
        void Add(Customer customer);
        void Update(Customer customer);
        void Delete(Customer customer);
  }
```

ICustomerDal customer classı için crud operasyonlarının imzalarını tutan bir interface. b

Burada bir sıkıntımız yok ancak aynı işlemlere ihtiyaç duyan birden fazla sınıfımız olunca ve işlemler birbirine çok benzeyince;
```
  interface IProductDal  
  {
        List<Product> GetAll();
        Product Get(int id);
        void Add(Product product);
        void Update(Product product);
        void Delete(Product product);
  }
```

>Tip (customer,product) kısmını generic bir yapıyla halledebilirsek eğer bize çok faydası olacaktır.

Yeni bir interface oluşturuyorum ve ismini Irepository koyuyorum.

```
    interface IRepository<T>
    {
        List<T> GetAll();
        T Get(int id);
        void Add(T entity);
        void Update(T entity);
        void Delete(T entity);

    }
```
Yeni interface'imizin içerisine aynı metodları koyuyorum. Bu sefer listelerde gördüğümüz tip belirme olayını interface'in isimlendirme kısmında görüyoruz.

<T> Bunun anlamı ben implemente edildiğim yerden bir tip alacağım ve içerimde bulunan metod ve alanlarda bu T yerine ne geldiyse onları uygulayacağım.

**Kullanım Şekli**

Artık ICustomerDal ve IProductDal interfacelerimizi boş bırakıyoruz ve Irepository implementasyonu gerçekleştiriyoruz.

```
    interface ICustomerDal:IRepository<Customer>
    {
       
    }
    interface IProductDal:IRepository<Product>
    {
        
    }
```
>Görüldüğü gibi çalışacağımız tipi implemente ederken söylüyoruz ve kolayca uygulamış oluyoruz. Artık ortak operasyonları IRepository içerisine sadece product sınıfına veya customer sınıfına özel olan işleri ise onların interfaclerinde yazıyoruz ve aynı yapıyı daha az kod, daha sürdürülebilir bir yapı ile kurmuş oluyoruz.
2ways for making nested form in Rails
Published: 2020-12-23 22:35:27

---
title: 2ways for making nested form in Rails
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---


## 1. fields_for
- Simple way


```erb
<%= form_with(model: rental_form, local: true) do |f| %>
  <%= f.fields_for(:terms, rental_form.terms) do |t| %>
  <div class="row my-3">
    <div class="col-11 mx-auto text-center border shadow">
        <h3>Term</h3>
        <div class="row">
          <div class="col-3 border-right">
            Start ~ End
          </div>
          <div class="col">
            <%= t.date_field :start %>
            ~
            <%= t.date_field :end %>
          </div>
        </div>
    </div>
  </div>
  <% end %>
<% end %>
```

### it needs 2 methods
About the `terms_attributes` method.
- It should be as a public method.
- It is called from `initialize` of the ActiveModel, so you need to include ActiveModel

```rb
class Contracts::RentalForm < ApplicationForm
  attr_accessor :terms
  def terms_attributes=(attributes)
    self.terms = attributes.map{ |_, term_attributes|
      Contracts::Rentals::Term.new(term_attributes)
    }
  end
end
```

```rb
class ApplicationForm
  include ActiveModel::Model
end
```

Example of the params
```rb
attributes #=> {"0"=>{"id"=>"5", "start"=>"2020-12-23", "end"=>""}, "1"=>{"id"=>"6", "start"=>"2020-12-23", "end"=>""}}
```

## 2. manual setting
- You don't need to implement the `terms_attributes` method.

```erb
        <% rental_form.terms.each.with_index do |term, index| %>
        <div class="row">
          <div class="col-3 border-right">
            Start ~ End
          </div>
          <div class="col">
            <%= f.date_field "[terms][#{index}][start]" %>
          </div>
        </div>
        <% end %>
```
100 Days of Code ~ Day 1
Tags: 100daysofcode, webdev, javascript, challenge
Published: 2020-12-23 22:34:06

Today marks the first day of the holiday break for the full-stack coding bootcamp I TA for at Northwestern University and in an effort to encourage the students to continue coding, I challenged them with [100 Days of Code](https://www.100daysofcode.com/) challenge by kicking off the first 30 days of it with Wes Bos's [JavaScript30](https://javascript30.com/).

I recently started some self learning of TDD with React by starting a course on Udemy: [React Testing with Jest and Enzyme](https://www.udemy.com/share/101ZdQA0oddV9QR3Q=/) so I finished the section I was currently working on before completing the first activity for JavaScript30.

In addition to challenging the students, before getting the job as TA with the bootcamp, it had been over a year since I graduated from the course myself and I had falled off the coding bandwagon so I also intend to use this challenge to refresh myself on a lot of the basics and again develop a habit of coding regularly!
Svelte after Sapper - The Svelte Ecosystem
Tags: svelte, sapper
Published: 2020-12-23 22:15:20

## What is the story?

After a recent Svelte conference is was announced the Svelte team will stop working on Sapper (the official Svelte equivalent of Next/Nuxt). The reasons cited were the following:

- The Code Base Was Getting Difficult to Work With
- New Web Technology made it compelling to rebuild.

So, you can continue to use Sapper in its current form but the Svelte Team will be working on a successor currently known as SvelteJS Kit. The goal of this project is to create a unified Svelte template instead of the prior Svelte and Sapper templates that may have been a confusing distinction to newer Svelte devs. This new Svelte template will use Snowpack which is a newer bundler that embraces ES6 modules making for a much faster and pleasant development experience over bundlers like Rollup, Webpack and Parcel.

Right now SvelteJS Kit has not been officially released although you can play with an early version of it, so what should you use for Svelte Projects in the meantime?

- [Svelte JS Kit](https://www.npmjs.com/package/@sveltejs/kit)

## Option 1 - Plain Old Svelte

- OG Svelte: ```npx merced-spinup svelte projectName```

- Svelte with Snowpack: ```npx merced-spinup snowsvelte projectName```

The above commands will spin up a basic Svelte project, but will not have the Server Side Rendering and Static Site Generation features that framework like Sapper had.

## Option 2 - Keep Using Sapper

- Sapper Markdown Blog Template: ```npx merced-spinup sappermarkdown projectName```

Sapper in its current form is a still fine useable framework even if eventually it will grow stale. So if you wanted to create a markdown blog or portfolio website why not use Sapper. I'm sure people will fork the Sapper code and maintain very similar alternatives. The command above will spin-up a template I made for creating Markdown Blogs/Portfolio websites.

## Option 3 - Elder.js

There is a whole world of 3rd party Svelte based frameworks and Elder.JS is a static site generator that promises support at least till 2023-2024. It's currently stable and projection ready.

- ```npx degit Elderjs/template elderjs-app```
- [Elder.Js](https://github.com/Elderjs/elderjs)

## Option 4 - Routify

Routify is framework for client side routing in Svelte with it's own starter template and workflow!

- ```npx @roxi/routify init```
- [Routify](https://routify.dev/)

## Option 5 - Plenti

Plenti is a standalone Static Generator using Svelte for templating.

- [Plenti](https://plenti.co/?ref=madewithsvelte.com)

## Option 6 - JungleJS

A static site generator using GraphQL and Svelte, I imagine this would be the Gatsby/Gridsome equivalent in the Svelte world.

- [JungleJS](https://www.junglejs.org/)

## Option 7 - Celesite

Celestite isn't a SSG but a tool for using Svelte for templating with Crystal based application. If you aren't familiar, Crystal is a compiled typed languages with a syntax VERY similar to Ruby.

- [Celestite](https://github.com/noahlh/celestite)
Welcome Thread - v104
Tags: welcome
Published: 2020-12-23 22:06:34

---
title: Welcome Thread - v104
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Turtle Howdy](https://media.giphy.com/media/aKqgengsvz1XrkH8Yi/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
What Makes a Good Designer? with Lisa Sy & Kuan Luo
Tags: discuss, podcast
Published: 2020-12-23 22:00:59

---
title: What Makes a Good Designer? with Lisa Sy & Kuan Luo
published: true
description: A preview of this week's episode of DevDicsuss, plus some easy listening links.
tags: discuss, podcast
series: DevDiscuss Season 3
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5pwanucj25o9d2z9zqiy.png
---

> **Listen to S3E7 of DevDiscuss right here on DEV:**

{% podcast https://dev.to/devdiscuss/s3-e7-what-makes-a-good-designer %}

A good application is inseparable from a superb visual experience — as developers, we can learn a _lot_ from designers. 

In this week's episode of DevDiscuss, @Jess and I got a chance to do exactly that. 

### We were joined by two guests who have a ton of insight into the crucial relationship between design and development.

- **[Kuan Luo](https://twitter.com/kuanluo)**, designer and entrepreneur, currently on a learning sabbatical. Her last project was Elpha, an online community for women in tech.

- **[Lisa Sy](https://dev.to/lisasy)**, Lead Product Designer at Forem

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/devdiscuss/id1513053883)
- [Spotify](https://open.spotify.com/episode/6gCVF45MNCX8eCLpbjbCDi)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzI0?sa=X&ved=0CAQQkfYCahcKEwiQxM3qjOXtAhUAAAAAHQAAAAAQAw)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s3e7-what-makes-a-good-Awl3FYTNxgm/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=159631666)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [Transcript](https://devpods.herokuapp.com/podcasts/devdiscuss/episodes/75)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- _Our season three sponsors, [Triplebyte](https://triplebyte.com/a/YU8fSn0/d), [PluralSight](https://www.pluralsight.com/product/skills/free), and [Rudderstack](https://rudderstack.com/)_!

# 🗣️🗣️🗣️
Video: How to deploy Blazor WebAssembly to GitHub Pages
Tags: blazor, aspnet, dotnet, github
Published: 2020-12-23 21:53:12

---
title: Video: How to deploy Blazor WebAssembly to GitHub Pages
published: true 
description: With ASP.NET Blazor WebAssembly you can create .NET applications that run completely inside of the browser. The output of a Blazor WASM project are all static files. You can deploy these applications to various static site hosts like GitHub Pages. In this video you learn how to deploy Blazor WebAssembly to GitHub Pages.
tags: Blazor, aspnet, dotnet, github
cover_image: https://swimburger.net/media/zl3ltmv4/blazor-github-social.png?anchor=center&mode=crop&width=1000&height=420
canonical_url: https://swimburger.net/blog/dotnet/video-how-to-deploy-aspnet-blazor-webassembly-to-github-pages
---
With ASP.NET Blazor WebAssembly you can create .NET applications that run completely inside of the browser. The output of a Blazor WASM project are all static files. You can deploy these applications to various static site hosts like GitHub Pages. In this video how to deploy Blazor WASM to GitHub Pages, manually and automatically with GitHub Actions:
{% youtube nNxII6jvPvQ %}

If you prefer written content, check out my blog post: [How to deploy ASP.NET Blazor WebAssembly to GitHub Pages](https://swimburger.net/blog/dotnet/how-to-deploy-aspnet-blazor-webassembly-to-github-pages).
GCP Essentials :: Cloud Marketplace
Tags: gcp, googlecloud, cloud, cloudcomputing
Published: 2020-12-23 21:52:39

Suppose you want to spin up an application without worrying about configuration of deployment settings like virtual machine instances, storage or network settings, google cloud marketplace is what you are looking for. However, you can modify many of them before the launch.

You can visit this website and search for your application. https://cloud.google.com/marketplace

The marketplace also contains third-party enterprise applications that might be billable, for example MongoDB cluster. 

The billing model would go like **`GCP RESOURCES CHARGES + APPLICATION CHARGES + TAXES = AMOUNT TO BE PAID`**, you will have to at least pay for the GCP resources you are using and some applications can be free of cost. 

**Note** For paid applications, you will see the estimates (excluding networking costs since those will vary based on how you use the application) of their monthly charges before you launch them.

No more talks, let's **"host a ghost blog using cloud marketplace"**

Select your project from GCP console and goto, https://console.cloud.google.com/marketplace/browse

Browse wordpress and click on "Ghost"

![](https://i.imgur.com/N8XTcW2.png)

So if you want to check the pricing, you can scroll down and see the detailed pricing schemes. Then click on Launch button

![](https://i.imgur.com/efcs0pX.png)

I have selected free tag, so here I would have to only pay for the GCP resources only

See how effectively you can configure your application. Select the options as per your needs, scroll down and hit "Deploy"

![](https://i.imgur.com/atPzsMw.png)

Wait for google to setup the application for you. Use the [Deployment Manager](https://console.cloud.google.com/dm/deployments) to see the status of the deployment

After the deployment, you can configure the application as per your need

![](https://i.imgur.com/te8UyjH.png)

This is the at least you need to do to run the application :P

The best thing is, if you want to login the server or want more information related to deployment, google always backs your support

![](https://i.imgur.com/Pa6y0Gd.png) 


I am waiting to see what have you deployed using the marketplace and how you are using it. Hit me up at the following

+ Email: tbhaxor@gmail.com (Recommended)
+ Twitter: [@tbhaxor](https://twitter.com/tbhaxor)
+ GitHub: [@tbhaxor](https://github.com/tbhaxor)
+ LinkedIn: [@gurkirat--singh](https://www.linkedin.com/in/gurkirat--singh)
+ Instagram: [@_tbhaxor_](https://instagram.com/_tbhaxor_)