teleren/devto huggingface dataset:
Speed up Karma and Jasmine tests with ChromeHeadless
Tags: testing, codenewbie
Published: 2020-12-19 23:00:02

I'm working with Jasmine and Karma, because it is the default tool set for testing in Angular. It works but one downsize is the browser by default for tests runner.

The browser is a bit slow for running and in the CI it impacts time of executing, we can speed up our tests using ChromeHeadless and puppeter with karma.

## Install packages

First install karma-chrome-launcher and puppeteer.

```bash
npm i -D puppeteer karma-chrome-launcher
```

## Configure karma

Edit karma.conf.js and add the puppeter path and set the ChromeHeadless as default browser.

```js
process.env.CHROME_BIN = require('puppeteer').executablePath()

module.exports = function (config) {
  config.set({
    ....
    browsers: ['ChromeHeadless'],
    ...
  });
};

``` 

Karma is ready to use ChromeHeadless from terminal.

```bash
dany@dany:~/Documents/danylab$ ng test
⠙ Generating browser application bundles (phase: building)...19 12 2020 22:48:06.285:WARN [karma]: No captured browser, open http://localhost:9876/
19 12 2020 22:48:06.289:INFO [karma-server]: Karma v5.1.1 server started at http://localhost:9876/
19 12 2020 22:48:06.289:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
19 12 2020 22:48:06.294:INFO [launcher]: Starting browser ChromeHeadless
✔ Browser application bundle generation complete.
19 12 2020 22:48:09.314:WARN [karma]: No captured browser, open http://localhost:9876/
19 12 2020 22:48:09.406:INFO [Chrome Headless 88.0.4298.0 (Linux x86_64)]: Connected on socket ipYKV7Bm7wf_o-d0AAAA with id 12690576
Chrome Headless 88.0.4298.0 (Linux x86_64): Executed 9 of 9 SUCCESS (0.166 secs / 0.13 secs)
TOTAL: 9 SUCCESS
```
## That's it!
Hopefully, that will give you a bit of help with speed up your tests with Jasmine and Karma. 

If you enjoyed this post, share it!
C# Advent 2020 – ASP.NET Core API Endpoints
Tags: development, api, ardalis, aspnetcore
Published: 2022-06-15 17:24:11

---
title: C# Advent 2020 – ASP.NET Core API Endpoints
published: true
date: 2020-12-19 22:59:00 UTC
tags: Development,API,Ardalis,ASPNETCore
canonical_url: https://barretblake.dev/2020/12/c-advent-2020-asp-net-core-api-endpoints/?utm_source=rss&utm_medium=rss&utm_campaign=c-advent-2020-asp-net-core-api-endpoints
---

MVC is a mess. Controllers in one folder, views in another, services in another, models and viewmodels in yet other folders. Related files are all over the place. Trying to piece together these related pieces can be a real pain. Steve 'ardalis' Smith has come up with another way: ASP.NET Core API Endpoints

The post [C# Advent 2020 – ASP.NET Core API Endpoints](https://barretblake.dev/2020/12/c-advent-2020-asp-net-core-api-endpoints/) first appeared on [Barret Codes](https://barretblake.dev).
Why am I studying Software Engineering?
Published: 2020-12-19 22:54:32


   When I worked for an airlines in Korea, I participated in numerous projects. One of the biggest projects was data migration from old system to new ERP. At that time, I had to spend a lot of time with software engineers as a financial analyst. 


   My first motive has started there. They, the engineers, were always pursuing "efficiency". I was the one trying to tell them all the very and the finest details. However, they just collected only the most important parts of my words and transferred as data. Efficiency, conciseness and obviousness; every time when I worked, these were the first words that had come to my mind and that engineers were always dealing with those words.

   The second motive has started from a little personal. Here, I want to be a little honest. During the data migration project, I had to go to work on weekends as well; however, the engineers were alway at home! I felt so lonely and envious of them. They were working remotely and socializing each other. 
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0bw26c31yvmb5t8n0m2h.jpg)
   There are a lot of reason why I decided to change my career and to study a new field 'software engineering'. I have a three years old son and he is always the one who gives me the most powerful motivation. Whenever I carefully look at him, he makes me want to live a life just like as he lives now: Learning everyday new things, meeting and socializing with new people everyday, and for the last, being a creative painter(engineer).
Dev.to View Count Day 2 -- Collecting Data
Tags: dohackathon
Published: 2020-12-19 22:28:14

Took a break for a few days but back at it today for Day 2 of this Hackathon!

Last time I decided that I would use Rails, so today, let's start setting up a Rails app. We'll start on the backend for collecting the data from the Dev.to API, and we'll make our way to the front-end later.

To get started, I generated a Rails app using the `rails new` CLI.
Commit: [53c6c89c](https://github.com/coreyja/devto-view-count-graphs/commit/53c6c89c251b4cc269d47327ef8f31615f4f785e)

From here, I installed [DelayedJob](https://github.com/collectiveidea/delayed_job/) and [DelayedJobActiveRecord](https://github.com/collectiveidea/delayed_job_active_record), which are my default tools for running background jobs in Rails. I do this in my database to avoid running a separate service and I also get co-transactionality between my business logic and my job enqueuing. I'm really just using it for this project since it's what I'm most familiar with, and I don't want to have to spin up something like Redis if I can avoid it.
Commit: [3ecd413](https://github.com/coreyja/devto-view-count-graphs/commit/3ecd413ef685b033795baca6b81469c013209a53)

Now let's set up the models we need! For the moment, we are going to have a single user, so we aren't even going to model that, and just go right into Articles. `Articles` matches the terminology used in the [dev.to API docs](https://docs.dev.to/api/), so that is what I ended up naming the table. Here we record the name and a few other pieces of data about the articles.
Commit: [1fae1ad](https://github.com/coreyja/devto-view-count-graphs/commit/1fae1ade939e81bf8a0339d4ee66124aca608f57)

Since that we have a model, it's time to start hitting the API and getting some data. So I created a simple job to hit the `articles/me` route and persist each article to the DB. Here I took the time to make sure pagination worked nicely to grab any number of articles. I might have been able to do this later, but I wanted to solve it while I was thinking about it and playing with the API.
Commit: [31b4a99](https://github.com/coreyja/devto-view-count-graphs/commit/31b4a996e8a5f1934f345b310f8879522f36f2d4)

Next, I needed a model to actually hold the view and comment count data. This needs to be separate from Article cause we need to keep a historical record of the statistics. I created the `ArticleStats` table, such that a single Article will have many ArticleStats.
I also augmented the job I created before to generate a new Stat row on each run.
Commit: [99c8765](https://github.com/coreyja/devto-view-count-graphs/commit/99c87652c6d4bde9cc4fa392e1c2417c2789dd35)

And with all that, I'm gonna call it a day! Looking forward to the next time I work on this, I think we'll be ready to try getting this hosted on the Digital Ocean App Platform.
Check back for more updates soon!

Photo by <a href="https://unsplash.com/@giabyte">Gia Oris</a> on <a href="https://unsplash.com/s/photos/start">Unsplash</a>
How to fix the CORS issue in Vuejs
Tags: vue, cors, frontend, javascript
Published: 2020-12-19 22:24:51

Imagine the first day in which you want to connect and implement API(s) from the back-end into your front-end project. Suddenly when you call those API(s) something going wrong, and you likely see this error in your console.
```
Access to XMLHttpRequest at ‘http://api.back.end/data' from origin ‘http://localhost:8080/' has been blocked by CORS policy.
```
Boom, everything breaks down. This is a nightmare for developers. But how we can deal with this? Before to solve the problem we should deep dive into this error.

#Why do we get CORS error? What really is CORS?
This is a common policy on the web we call it *same-origin*, which means web applications should interact with other services from the same origin. But sometimes it is required to send a request to another service-- server, back-end, API, and etc. CORS makes it possible to set a specific header on the request to the server. you can read widely about [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).

In my case, I was serving my Vuejs project on `localhost` and the API service was running on the server. As you can guess they're were from different *origins* completely against the *same-origin* policy as I mentioned. We assume you haven't any access to change the Back-end configuration.

#so, How we can deal with CORS error?
Yes, we should have *same-origin*, But how? Hopefully we can achieve this easily with Vue CLI. In my case, the Front-end project was running on `localhost:8080`. We actually need to proxy the API requests to the Back-end during development.

To config this setting, you should put the proxy URL into this file `vue.config.js` if you haven't this file yet in your project, first, you need to create the file right beside the *package.json* in the root of the project.
```
// vue.config.js
module.exports = {
  // options...
}
```

Inside `module.exports` you can put your configuration using `devServer` object. Because we want to config our development server to proxy API requests to the Back-end Endpoint.
```
// vue.config.js
module.exports = {
  devServer: {
        proxy: 'http://api.back.end',
    }
}
```
> This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://api.back.end.

Now you need to terminate your app and run it again so that new configurations will be applied to the server. Just that, easy peasy lemon squeezy :))

You can find other configurations here [Vue configurations](https://cli.vuejs.org/config/#devserver-proxy).

If you want to get rid of this issue temporarily just install this chrome extension [CORS Unblock](https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino).
Typos are a bctih
Tags: react, bootstrap, modal
Published: 2020-12-19 22:20:12

Errors, when programming, are a dime a dozen.  It can be frustrating when you're unsure why the error is showing up in the first place.  Was it because the usage of a certain variable was incorrect?  Maybe I didn't import anything?  Do I just not understand how to use this method correctly?  The possibilities could be many and trying to find what went wrong is very similar to trying to find Waldo in a "Where's Waldo?" book.  

It is exceptionally annoying when you figure out that the cause of all your headaches and misery is a simple typo.

I am in the process of creating an Instagram clone as a personal project to use in my portfolio/resume.  I was passing data from a JSON file to be used by different React components.  While mapping the data in my PostIndex component I set the variables in camelCase 
```
imageUrl={this.props.image_url}
userName={this.props.username}
caption={this.props.caption}
```
Then, when setting the data to use in my modal component, I couldn't understand why the data was not passing
```
<Card.Title>{props.userName}</Card.Title>
```
Lo and behold!  when setting the variables to be used for my modal, I needed the names to be spelled the same! Once I fixed this issue
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ldwy6ycsbiczenj37bk7.png)
all became right in the world again.
JavaScript Functions
Tags: javascript, functional, functions, youtube
Published: 2020-12-19 22:20:10

Summary: In this tutorial,  you'll learn how to create a function in JavaScript and invoke/call it or start/make it work or activate  it.
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/urm5u4atwzkgzoe37lkm.png)
# What is a function?
A function is like a machine
* 1 takes input 
* 2 processes it
* 3 gives output  

# If you are a visual person. Here's a video.
{% youtube MJC3G9YN_yw %}

# If you like reading. Below is the written version of the video.
## 1 Create a Function in JavaScript
To create a function in JavaScript, use the word
* `function`. 
* Then give your function a name like `doSomething`
* a pair of parentheses like `()`
* and curly braces like `{}`

All together in a code editor, it looks like so:
```javascript
function doSomething() {
// code to be executed
}
```
## Explanation of Code
a) The word `function` is a `JavaScript keyword`. It tells JavaScript 'Hey, JavaScript, we are about to create a function'
b) After you write the function keyword you have to give it a name. In this example I gave it `doSomething` but you can name your function anything you want. (the same rules apply as naming variables).
c) The opening and closing parentheses `()` takes `variables ` called `function parameters` we'll talk about those in the next post/video.
d) Inside the curly braces `{}` you put codes that you want your function to run or process
e) But the code above doesn't do anything because I just wanted to show/explain functions in their purest form.

# Calling or Activating your Function
Now let's take the code above and log something to the browser console. Like 'Hello Lia'
To call or activate your function, you must use its name after your function like so: `doSomething;` 
All together it looks something like this:
```javascript
function doSomething() {
console.log('Hello Lia');
}
doSomething();
```
If you check your browser console, you should see `Hello Lia ` message or text.
## Your task
Your task for this tutorial is to write a function that logs to the console 'Hello YourName '
Thanks for reading
Capybara: 2 ways to click links in emails
Tags: rails, capybara, testing, howto
Published: 2020-12-19 19:20:42

---
title: Capybara: 2 ways to click links in emails
published: true
date: 2020-12-19 19:02:00 UTC
tags: rails, capybara, testing, howto
canonical_url: https://paraside.in/capybara-2-ways-to-click-links-in-emails/
---

If you want to write system tests you'll probably want to cover a use-case involving an email sent to a user (for instance, a sign up confirmation link).

There are at least 2 ways to do that:

- with [nokogiri](https://github.com/sparklemotion/nokogiri) if you want to keep things lean
- with [capybara-email](https://github.com/DavyJonesLocker/capybara-email) if you appreciate a little comfort

# With nokogiri

Add the gem to your `Gemfile` and run `bundle install`.
Chances are you'll find it in your Gemfile.lock already since it's a pretty standard gem with 5k+ stars.

```ruby
group :test do
  gem "nokogiri"
end
```

And you can open your email and click the line like this:

```ruby
email = ActionMailer::Base.deliveries.last
html = Nokogiri::HTML(email.html_part.body.to_s)
target_link = html.at("a:contains('Click this link')")
visit target_link["href"]
```

# With capybara-email gem

Add the gem to your `Gemfile` and run `bundle install`. It only has 300+ stars, which is still pretty good, and it's also a rather simple gem so you could easily decide to contribute to it if your app depended on it.

```ruby
group :test do
  gem "capybara-email"
end
```

And you can open your email with just 2 lines:

```ruby
open_email "arnaud@example.com"
current_email.click_link "Click this link"
```
Introducing Vue Clean v0.4.1
Tags: javascript, vue, showdev, webdev
Published: 2020-12-19 22:00:53

A while ago I announced **Vue Clean**, a tool for Vue developers and today I'm happy to announce that version 0.4.1 is up and ready to use!

But, what is Vue Clean exactly?

## About Vue Clean

When I started in Vue, I always had to do the same steps everytime I wanted to create a new project: delete the same components, install the same dependencies, write the same boilerplate code. And I thought to myself "there's got to be some better way to do this" and like every developer, I created my own solution: **Vue Clean**.

Vue Clean is a Vue CLI plugin that takes care of all the hassle of starting a new project:

- It deletes all the components generated by the vue-cli
- It deletes all the views generated by the vue-cli except the `Home.vue` file (for obvious reasons)
- It deletes all the boilerplate code inside the `App.vue` file and replace it with the minimal to function

And that's not all! Vue Clean also helps you with one important part of the Vue development workflow: **Base Components**, if you want to know how, head to the GitHub repository page (down below).

The main goal of Vue Clean is to be the perfect tool for beginners in Vue and even to be a convenient tool for experts.

## What's new in this version?

### Drop support for Tailwind
In previous versions Vue Clean had an option to create the configuration files for Tailwind (that was another step I had to do in every project), but it turns out there's already a [good, well-document plugin](https://github.com/forsartis/vue-cli-plugin-tailwind) that does exactly that so, why reinvent the wheel? Vue Clean dropped support for Tailwind in version **0.2-alpha**.

### Introducing the `basec` command
`basec` is a vue-cli command created by Vue Clean when you install it. With it, you can create base components **directly from the command line**. Not only that but you can create them using _templates_ for when you need to quickly prototype a view. The `basec` command was introduced in version **0.3.0**.

Creating base components has never been so easy!

### New and better documentation
The instructions in the `README` file now include examples of use with a better and more understandable structure.

Now go and give it a try!

{% github https://github.com/DevTony101/vue-cli-plugin-clean %}

If you find Vue Clean useful please consider giving it a star ⭐ on GitHub! It's the best way to support and ensure future versions will be released.
Playing Streams with KefirJS 
Tags: streams, frp, reactive
Published: 2020-12-19 21:18:49

[Kefir](https://kefirjs.github.io/kefir/#scan) is a lighter alernative to RxJS.

Here is a simple counter in functional reactive programming.

You can play with it here [kefirCounter](https://flems.io/#0=N4IgtglgJlA2CmIBcBWFA6ALAJgDQgGd4EBjAF3imRHQAsyxYR8SB7AOwNYWrdlgCGAByJV8AMwgICyANqh2AsIiQ16jZiDbsKO6gB4CJAE4QhZAAQAddhYsFjJALxWQ9MiKQB6LySjsAKwJ0ElhWAFcocUFjeBDWMC8BAIEADy9YCAAjAi8Aa3hJYy8AZnQADnQABnzCiGN0SHZ0INcLAD4bfS8jU3NO9i6s8LIyDgtoFxAIdhJXdoBqbuHRjgHDIQFbSddYgnDYMnmq7oJN9nWVse2oKah4OZB2gFplkeuBrt6zMgG7LwAVEDgSDQcCLAAJYhCeDGAgWMGIpEArw2OzaAiWYiWJwWAAU0AAlBYnO0LFBWCRwsodOgAObwMgAUQQNLIACEAJ4ASSgBKghIA3GiLBjLOJjAkmQA3Mjw3EAaTqDQlUul8B0BGFtlFHExFmUxgZJIsSqKjVhDO16L1llCEBIeRlOOsWkyjtc1t1nEs0A1Lrx0uJpPxwbJ0q9YosHHgJr9OjxAEYhSKo+x4HSY3H7gnnsnI7aLAIYCa8alcBZOWGLKkLAtK17Acjmy3W2DUYMdVGZiQACQmkV2VVgZ0EPHYvGuHuuQkV+2O52Ewd2CyNYR4mMpzs2n3kh793HL4ej8eHScge6PWei91O2VLnUr1dgdfpzPprepwv7MAH6yPg1LXgPFZB7XsK0vXsAF0HyfOx0CMLY8WLKAKyqWC4PQDgADUBFgcJgPlMk9gOMh0BmdNjAAFXgVIXQILcny6HoTB+dpNCIUgyAgPVqGwABOJBsETEAAF9cAUJQVBoIJNG0XQyGoMSJJARRlGoEICBkFgOAUpTRKg0SgA)

```html
<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/kefir/3.8.0/kefir.min.js" >
</script>

<button id="inc">+</button>
<span id="result">0</span>
<button id="dec">-</button>

<script>
  /****************** Helpers **********************/
  const elt = (id) => document.getElementById(id);
  const fromEvts = Kefir.fromEvents;
  const merge = Kefir.merge;
  const clickEvt = "click";
  const ident = (v) => () => v;
  const one = ident(1);
  const negone = ident(-1);
  const add = (x, y) => x + y;
  /*************************************************/

  const inc$ = 
    fromEvts(elt("inc"), clickEvt)
      .map(one);

  const dec$ = 
    fromEvts(elt("dec"), clickEvt)
      .map(negone);

  const sum$ = 
    merge([inc$, dec$])
      .scan(add, 0)
      .onValue(s => result.innerText = s);
    
</script>
```
Let's play "never have I ever" developer edition.
Tags: discuss, webdev
Published: 2020-12-19 21:09:10

As it's close to Christmas, a word game such as sharades is usually quite popular, that might be hard so let's try a drinking game, now I don't have any drinks so i'l skip that (but feel free to take a shot of water, espresso, milk or juice if you have some).

So the rules, I say, "never have I ever", and if you have done this before, comment "shot" and tell us your never have I ever.

Il start in the comments.
Leetcode Odd Even Linked List - Solution & Video Explaination
Tags: cpp, algorithms, leetcode, interview
Published: 2020-12-19 21:01:55

{% youtube wL4quVX5cl4 %}

## Solution

```cpp
/* struct ListNode {
  int val;
  ListNode *next;
  ListNode() : val(0), next(nullptr) {}
  ListNode(int x) : val(x), next(nullptr) {}
  ListNode(int x, ListNode *next) : val(x), next(next) {}
}; */

ListNode* oddEvenList(ListNode* head) {
  if (head == nullptr) {
    return head;
  }

  ListNode* oddPointer = head;
  ListNode* evenHead = oddPointer->next;
  ListNode* evenPointer = evenHead;

  while(evenPointer != nullptr && evenPointer->next != nullptr) {
    oddPointer->next = evenPointer->next;
    oddPointer = oddPointer->next;
    evenPointer->next = oddPointer->next;
    evenPointer = evenPointer->next;
  }

  oddPointer->next = evenHead;
  return head;
}
```

## Complexity

Runtime: O(n)
Space: O(1)
DevAnalytics at DOHackathon: not ready, but fully functional
Tags: dohackathon, angular, typescript, devanalytics
Published: 2020-12-19 21:00:44

Today I met my goal and we bought the Christmas tree with my daughter. Wait. That's another post.

So today I met my goal and now all the statistics are displayed in a readable format. Meaning that the labels are readable and the numbers also received nice formatting up to two digits.

![Nicely formatted data](https://dev-to-uploads.s3.amazonaws.com/i/1a00gsepkl6yt3oerbfa.png)

This also let me find a bug in the backend.

Tomorrow I'll make a nice header for the page and will brainstorm on how to replace the tables with a prettier representation.

Click to test [DevAnalytics](https://dev-analytics-frontend-tudwb.ondigitalocean.app/) and leave your ideas as comments on this page.