teleren/devto huggingface dataset:
The Value in Response Objects
Tags: ruby
Published: 2020-06-07 22:18:26

The are many ways in how to return from a Ruby method. A method can use an explicit `return` keyword and return a value, or one can rely on Ruby's use of expressions to skip using `return` for brevity.

But there are also tactics in what to return as well. Periodically, a return value may need to have metadata about what it represents. Consider the situation of a call to a payment processor like Stripe. A wrapper method might look like this.

```ruby
def charge_card(card)
  charge = PaymentProcessor.charge(card)
  charge
end
```

Seems simple enough. However, the charge may be successful, or the charge may fail. The credit card CVV may be wrong or the payment processor may be entirely offline. The return value will differ in that case.

```ruby
def charge_card(card)
  PaymentProcessor.charge(card)
rescue => e
  nil
end
```

Returning nil from an external error is a fine short term solution, but over time may fail to be clear to other team members, or its meaning may be lost to time. In its current form, the method would need a comment for clarity on what `nil` means.

There's a better way. In fact, the web has been using it since the beginning. It's a [response](https://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html) object! In Ruby terms, a response class that looks like an HTTP response would have a `status` attribute, a `body` attribute, and any extra information needed.

```ruby
class Response
  attr_accessor :status, :body

  def success?
    status == :ok # similar to a 200 status
  end
end

def charge_card(card)
  charge = PaymentProcessor.charge(card)
  Response.new.tap do |r|
    r.status = :ok
    r.body = { charge: charge }
  end
rescue => e
  Response.new.tap do |r|
    r.status = :error
    r.body = { error: e.message }
  end
end
```

This implementation is more verbose. But that's ok since other programmers will have more clarity in what's happened to the charge. Instead of inferring what `nil` is or hoping that a charge object is returned, the return value will always be a consistent `Response` instance.

```ruby
response = charge_card(card)
if response.success?
  # do successful things
else 
  # retry, or do something else
end
```

In general, this form of data parcelling is known as a [value object](https://martinfowler.com/bliki/ValueObject.html), and helps represent data in more unique and extensible ways. It takes full advantage of Ruby's object-oriented features, and makes code more web-like in the process.
Wanted: Feedback on design
Tags: design, showdev
Published: 2020-06-07 21:41:18

So I am working on a website for my partner as part of the [parallel universe series](https://dev.to/adam_cyclones/a-modern-fe-stack-in-a-parallel-universe-4875). She wants a shop selling, I cant tell you just yet 🤫🥁.

Anyways I have this snapshot, its got some notes overlaid. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eak037xllmzofy7s5hno.png) 

The black lines are to help me out and the red text is notes.

Anyway as you can see the diamond shape 💍, I am trying to get some sort of heading to flow around that shape. I also want some sort of CTA and maybe the copy doesn't work, it doesn't matter so much at the moment. What do you think I should do here? do you hate it?

**I am no designer** (I made the graphic (and grew the plant from seed! 🌱) though, and the layout is all css and html, yay accessibility), please feel free to give me some pointers.
100 Days of SwiftUI — Day 17
Tags: 100daysofswiftui
Published: 2020-06-07 21:39:02

---
title: 100 Days of SwiftUI — Day 17
published: true
date: 2020-06-07 21:38:28 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-17/
---

I like, how the first project is structured: Yesterday, there was a little introduction with all the basics and today was [_implementation day_](https://www.hackingwithswift.com/100/swiftui/17). The task was to build a little form and do a pretty simple calculation.

Most of the time, SwiftUI makes total sense to me, although I'm still getting used to it. I also like, that you can see the result immediately in the preview pane. Feels like Xcode/Swift Playgrounds on steroids. What I really dislike are the error messages. Let's hope, that they will be improved after this year's WWDC.

<!--kg-card-end: markdown-->
Understanding Array.slice() in Javascript
Tags: javascript, codenewbie, beginners, webdev
Published: 2020-06-07 20:42:08

Array.slice() method returns a shallow copy of a part of an array into a new Array Object. 

The part is selected on the basis of the start index and the end index passed as a parameter to the slice method. 

## Syntax
> arr.slice(\[start_index\[, end_index\]\])

**start_index:** specifies the start index from where the array is selected for copying.
**end_index:** specifies the end index until where the array will be copied. The element at end_index is not selected. 

> Note: The original array is not modified by the slice method.

**Example:**
```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
arr.slice(0,3);
// [ 0, 1, 2 ]
// The element at the end_index is not selected
```

Let's learn about the slice method with a few more examples.

## The start index is undefined

When the start_index is undefined, start_index will be taken as 0.

```javascript
let arr = [0,1,2,3,4,5];
start_index = undefined;
end_index = 3
arr.slice(start_index, end_index);
// [0, 1, 2]
```

## The start index is negative

The negative start_index will be used as an offset from the end of the original array and the element is taken as the start. 

```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
start_index = -4;
end_index = 4;
arr.slice(start_index, end_index);

/* Counting 4 (the offset) from last of 
the original array is the element at index 2.*/

//last element that will be selected is at index before the end index ie. at index 3 of the original array. 

// output : [2, 3]
```

## The start index is greater than the end_index

If the start_index is greater than the end_index, an empty array will be returned by the slice method.

```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
start_index = 4;
end_index = 2;
arr.slice(start_index, end_index);
// []
```

## The end index is omitted
When the end_index is not specified, the array will be selected till the end.

```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
start_index = 4;
arr.slice(start_index);
// [4, 5]
```

## The end index is negative
As seen for the start_index, if the end_index is negative, it will be treated as an offset from the end of the array for the last element that needs to be copied to the new array.

```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
start_index = 1;
end_index = -2;
arr.slice(start_index, end_index);

/* Counting 2 (the offset) from last of 
the original array is the element at index 4.*/

//The array will be selected from the index 1. 
// output : [1, 2, 3]
```

## The end index is greater than the length of the array
When the end_index is greater than the end index of the array, the array will be selected until the last element for copying.

```javascript
let arr = [ 0, 1, 2, 3, 4, 5 ];
start_index = 1;
end_index = 8;
arr.slice(start_index, end_index);
//[1, 2, 3, 4, 5]
```

---
***This article was first published on [hackinbits.com](https://hackinbits.com/articles)***
Transcoding video with AWS Lambda and Elastic Transcoder
Tags: serverless, aws, tutorial, functional
Published: 2020-06-07 20:36:03

I recently completed a small project in which I used AWS resources to automate the process of transcoding 4K video files. With the combination of S3, Lambda, Elastic Transcoder pipeline and SNS I was able to do this task effortlessly. Once a file is uploaded to an S3 source bucket it is then converted and saved in the transcoded complete bucket. SNS notifies of the initiation of this process and of its completion. This is incredibly useful for image handling as well. Below are the steps I took to complete this, along with my findings once finished.

1. Before beginning this project, I created the initial resources needed to get things started. First, I created 3 separate S3 buckets and attached bucket policies to allow them to be accessed publicly. One bucket for the source uploaded content, one bucket for the completed transcoded files and lastly a bucket for thumbnail images to be saved.
2. The next step was to create and subscribe to a SNS topic. For this protocol I chose to use email and SMS notifications. Once this was complete I created the subscription and verified my email. You can also publish a test message through SNS as well to verify all notification sources are receiving the messages. 
3. With the initial sources setup it was now time to create and initiate my Elastic Transcoder pipeline. I named it and then set my input bucket as my S3 source bucket. For transcoded files I selected my transcoding completed bucket and finally for thumbnails I selected my thumbnails S3 bucket. Pipeline now initiated and I made note of my pipeline ID for later use.
4. Now on to the Lambda function creation. I created my function from scratch and used Python 3.7 (Boto3 SDK) for my runtime. For a role, I created a custom role and policy and created my Lambda function. 
5. At this point I configured an S3 trigger for my function. I made my source bucket the trigger and selected "All object create events". Essentially this will relay to Lambda that a file has been added and that my function has a task to complete. Now it's time to add the function code into the editor and save. Finally, I added an environment variable and made the key "PIPELINE_ID" and the value of the actual ID. 
6. Now it's finally time to test. I downloaded a few short 4K clips and uploaded the first to my S3 source bucket. I was notified via text and email that a transcoding job had begun. Also notified when completed as well. At this time I checked my transcoding completed bucket and my thumbnails bucket and verified the files were uploaded. Everything working properly and my simple transcoding project is complete. Finally I checked my CloudWatch log files and confirmed there as well.

This was a fun little project and could be incredibly helpful with image conversion as well. Lambda can be useful for tasks such as this and I plan to dive deeper with more complicated workflows. Thanks for reading! 

Jerry C. Mullis
TerminusDB Webinar - TerminusDB Community
Tags: devrel, community, database
Published: 2020-06-07 20:31:25

---
title: TerminusDB Webinar - TerminusDB Community
published: true
description: In TerminusDB, we have a lovely community and user group that is very active on Discord. We also have weekly webinars and WOQL tutorials. As an open-source software, we care a lot about our users and we are ready to put a lot of effort in developer relations. This week we will have our Developer Relations Lead - Cheuk Ting Ho to answer all questions related to DevRel, Community and working with TerminusDB.
tags: devrel, community, database
---
In TerminusDB, we have a lovely community and user group that is very active on Discord. We also have weekly webinars and WOQL tutorials. As an open-source software, we care a lot about our users and we are ready to put a lot of effort in developer relations. This week we will have our Developer Relations Lead - Cheuk Ting Ho to answer all questions related to DevRel, Community and working with TerminusDB.
I built side-project helps you find cool open source projects and join them
Tags: showdev, webdev, react
Published: 2020-06-07 19:47:24

tldr; Tool that let you find latest GH issues meant for newcomers and help you start contributing to the open-source

link: https://justcontribute.netlify.app

## Motivation

For some time I was thinking about joining some open-source project. I believe that's is a huge opportunity to gain some experience in real-life projects. 

But I was struggling in finding projects I can join. I'm a beginner so I was looking for some small less popular repos. It wasn't too easy, because I needed to browse GH typing some long weird queries, checking is there any open issue that I can handle, etc.

## My solution

I created site that let you provide programming language and popularity of issue that you want to get and it presents you issues that:
- are open
- have at least one of the "newcomers welcoming" label (good first issue, up for grab, easy, etc)
- doesn't have linked pull request
- no one is assigned to them
- conversation is unlocked
- are in public repos


## Tech stack

Front-end: react, scss
Back-end: node, express js


I built this whole thing in just 2 days so if you have any suggestions, feedback, or getting some errors please let me know in comments!
🧪 Periodic Table of Elements with React + CSS Grid
Tags: react, css, chemistry
Published: 2020-06-07 19:46:01

{% youtube c9nw5rWtMeQ %}

Hi, this is a short video tutorial [9:44] about building a Periodic Table of Elements with React + CSS Grid.

Resources:
* Code: https://github.com/muratkemaldar/periodic-table-css
* JSON data for Periodic Table: https://github.com/Bowserinator/Periodic-Table-JSON

Enjoy!
React - Synthetic blur event
Tags: react, javascript, webdev
Published: 2020-06-07 19:39:40

First, let's have a look at what the *blur* event actually is.

## Definition

> The blur event fires when an element has lost focus. The main difference between this event and focusout is that focusout bubbles while blur does not.
>
> -- <cite>[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event)</cite>

## Native browser behaviour

It is clearly saying that the *blur* event does not bubble up the DOM tree to all parent elements. I proved this by [a CodePen demo](https://codepen.io/andi1984/pen/dyGPoON).

## Behaviour within React

But today I found out together with my colleagues that within [React](https://reactjs.org/) the synthetic blur event **is** bubbling to the container component in the sense that `onBlur` on a parent component is getting triggered by it as you can see within [a CodeSandbox demo here](https://codesandbox.io/s/react-blur-synthetic-event-bubbling-7bb3p).

> React will bubble these events through its event model. So we can listen for focus and blur events at the root of a component and react to these events fired on its child nodes.
>
> -- <cite>[J. Renée Beach](https://medium.com/@jessebeach/dealing-with-focus-and-blur-in-a-composite-widget-in-react-90d3c3b49a9b)</cite>

So on the one hand this makes kind of sense within the [React](https://reactjs.org/) ecosystem, on the other hand not knowing that and following the native specs – which we all should follow – it can be quite confusing.

## Summary

In the end, React is breaking out of the standard, the specification – and it's not the [only issue with synthetic events](https://github.com/facebook/react/pull/17330#issuecomment-559978625). They are probably doing so for us, developers. It helps to mentally stay within their ecosystem, their logical rules which are also having advantages, but it is a risky discrepancy between [React](https://reactjs.org/) and [the W3C standards](https://www.w3.org/standards/).
8cc.wasi: Pure WASI C Compiler
Tags: webassembly, wasi, elvm
Published: 2020-06-07 16:46:57

---
title: 8cc.wasi: Pure WASI C Compiler
published: true
description: This is a WebAssembly System Interface (WASI) port of 8cc built on ELVM. In other words, this is a complete C compiler written in WASI.
tags: webassembly, wasi, elvm
//cover_image: https://direct_url_to_image.jpg
---

[8cc.wasi](https://github.com/sanemat/8cc.wasi) is a Pure WebAssembly System Interface (WASI) C Compiler.

## Compile C Code

Prepare your C code. Following is a 'Hello world' example.

```c
int putchar(int x);

int main() {
  const char* p = "Hello, world!\n";
  for (; *p; p++)
    putchar(*p);
  return 0;
}
```

8cc.wasi compiles C code into ELVM IR (EIR).
```
$ cat hello.c | wasmtime 8cc.c.eir.wasi > hello.eir
```
```
$ cat hello.eir
	.text
main:
	#{push:main}
	mov D, SP
	add D, -1
	store BP, D
	mov SP, D
	mov BP, SP
	sub SP, 1
(snip)
```

elc.wasi compiles EIR into WASI.
```
$ (echo "wasi" && cat hello.eir) | wasmtime elc.c.eir.wasi > hello.wasi
```

```
$ cat hello.wasi
(module
 (import "wasi_unstable" "fd_write" (func $__wasi_fd_write (param i32 i32 i32 i32) (result i32)))
 (import "wasi_unstable" "fd_read" (func $__wasi_fd_read (param i32 i32 i32 i32) (result i32)))
 (import "wasi_unstable" "proc_exit" (func $__wasi_proc_exit (param i32)))
 (memory (export "memory") 1025)
 (global $a (mut i32) (i32.const 0))
 (global $b (mut i32) (i32.const 0))
(snip)
```

Run hello.wasi and get a result!

```
$ wasmtime hello.wasi 
Hello, world!
```

## Refs
- [backend code for wasi](https://github.com/shinh/elvm/commit/9a563b8889e5710f78de1d4351343a755ef9b44c)
Display a list using SwiftUI
Tags: swift, ios
Published: 2020-06-07 19:08:44

### SwiftUI provides an easy and fast way to build user interfaces for apple devices.

This series will show you how to:  
 * Display an array in a list
 * Adapt the list to display using MVVM and Observables
 * Create a navigation link, to show the item details
 * Get the list from an API

## Create the project

Open Xcode and create a new project using SwiftUI as User Interface:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pfz2qe3r12khtdm7f5xk.png)

Replace the initial code in the file *ContentView.swift* with the code bellow:
```swift
import SwiftUI

struct ContentView: View {
    private var itemList = [  "iPhone",
                              "iPad",
                              "MacBook Pro",
                              "Macbook Air"  ]
    
    var body: some View {
        List {
            ForEach(self.itemList, id: \.self) { item in
                Text(item)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

# Explaining the code

What list does?
From apple:

>> *List
A container that presents rows of data arranged in a single column.*

So here, we are using List as a container for our declared array of strings variable:

```swift    
private var itemList = [  "iPhone",
                              "iPad",
                              "MacBook Pro",
                              "Macbook Air"  ]
```

And inside the list, we are looping all contents of the itemList array:

```swift
ForEach(self.itemList, id: \.self) { item in
    Text(item)
}
```

This means that for each item inside our array, we create a new Text() to display the value of that item.

What the ForEach loop is doing, is the same as this code:

```swift
List {
  Text("item 1")
  Text("item 2")
}
```

Hit the play button and this should be the final result:  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e2l6sewdg4xxduvy9d43.png)


Alright! You have now created a list of items using SwiftUI.
Next, let's use MVVM as architecture pattern with the help of Observables.

The complete code is available @ [Github](https://github.com/rfa1989/SwiftUIMVVM-GreatProducts/releases/tag/v1.0.0)
Announcement: Now on Twitch!
Tags: twitch, announcement, streaming
Published: 2020-06-08 00:27:30

---
title: Announcement: Now on Twitch!
published: true
date: 2020-06-07 19:00:00 UTC
tags: twitch,announcement,streaming
canonical_url: https://seankilleen.com/2020/06/announcement-now-on-twitch/
---

I’ve been [starting to stream on Twitch](https://twitch.tv/sjkilleen).

I’ve only done three sessions but it’s been a blast so far. I’ve been enjoying working/thinking out loud, reasoning through problems when I get stuck, and meeting others in the community.

The best part is, [my employer, Excella](https://excella.com) is allowing me to stream some of the work that I’m doing during the day, which makes it all the more possible.

I’m also [archiving the streams via YouTube](https://youtube.com/SeanKilleen), so you can feel free to check them out there if you miss a session.

[Follow me on Twitch](https://twitch.tv/sjkilleen), and let’s code together!
Is "developers' world" really that cool?
Tags: codenewbie, codingfulltime
Published: 2020-06-07 18:51:35


Imagine 15 years back, when we heard about softwares or system hacking. Like me, many of you might have thought "WOW!!!". It seemed like very cool thing and fun to control all systems and servers. But is it really so?

When movies show hackers helping cops to find way in the complex servers-net, script-writers forget showing a software team involved in creating that hacking tool. Or similarly when they show a future robot working every possible work for humans, they forget showing the team-discussions in naming every function involved in such roboCode. _Or is it writers decide not to show even glimpse of teams developing software, as whole software development is very complex task?_

What goes into developing a software is not just few lines of code, but actually sweat of people who are like warriors in a battlefield, juggling between product-owners and organisational-hierarchy.

This article is not to point all problems faced by developers and scaring newbies, but actually to let you know that __software development is more of an art__ which takes shape slowly. And it comes best when developers choose their own tools and work with relaxed mind.

Thankfully, time is changing and faster developments happening in codeWorld itself. Developers are also choosing alternative ways to show their art. Ways like freelancing, open-source-creation/contribution and startups, are to name a few.

Joining community events and conferences are best ways to know what is happening in devWorld and how to turn yourself into a great artist!!
🛑 7 Must Have Skills For a Top Automation Tester
Tags: testing, beginners, tutorial, webdev
Published: 2020-06-07 18:23:56

✅Join us - https://sendfox.com/thetestingacademy

In this video, We are discussing about Must Have Skills For a Top Automation Tester, This is Day 6 of the series of Automation Testing for Beginner.

✅ If you are new consider subscribing and follow day by day to become an Automation Testing expert in 30 days.

[![Skills For a Top Automation Tester](https://i.imgur.com/iBOLF44.png)](https://youtu.be/-Hc7jWGAyzM "Skills For a Top Automation Tester") 



- 🚀 Day 6 Task :  Skills to Succeed with Automation in Testing
- 🚀 Thread :  https://scrolltest.com/automation/day6
- 🚀 All Task List : https://scrolltest.com/automation/task
- 🚀 Watch Full Playlist: https://scrolltest.com/automation/playlist

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

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")