teleren/devto huggingface dataset:
why branching on git is wrong
Tags: git, branches, ci
Published: 2018-10-27 14:00:46

Lots of people often code using feature branching on git to avoid the hassle of conflicts while doing pull and/or to avoid pushing incomplete features that would break the system for all the team.

I find these reasons to be baseless and some even harmful to the development cicle. Trying to develop in your little temporal bubble without being distracted by the rest of your team it's a bad idea, imagine the following: 

A team of five people have to do a painting of a big landscape, so they split the canvas in five pieces and then each of them paints their part without even looking at what their partners are doing and in two weeks they put all the five pieces together to deliver the product. What do you expect will happen? of course the painting will be a mess with miss aligned items on it that will need to be redrawn at the last minute pulling an all nighter on the worst case. Sounds familiar?

How can we work on a single branch without breaking stuff and without continuous conflict? 

First the conflict part: Communication is key, daily meetings are there for a reason and should be used to smooth cooperation between developers working at the same classes.

Now, the scariest part: How to commit half baked features without breaking stuff? or even more, how to commit a new feature that we aren't sure is working correctly? Well, one of the best things about everyone working at the same branch is that if something breaks it will be noticed quickly and fixed at an early stage and therefore less painful process.

For the part of committing without breaking the system for everyone there is a very good technique called "feature toggling". Basically what you do is put an if like this:

```javascript
if (useNewLogic) {
    awesomeNewFeatureEntryPoint();
} else {
    legacyEntryPoint();
}
```

This allows to run the new code when you want and where you want without risking all the environments and such.

This way of working also benefits of the fact that because everyone is working at the same place if your new feature conflicts with some change of class contract you can fix it quickly, it means that you are doing continuous integration.

One way I have found in my personal experience that people that comes used to work with branches feels more comfortable to do the switch is to have two branches, for example: develop and master. With the only way to put things on master is via a pull request.

I would love to read your opinions of this matter on the comments.
Lets Refactor - Part 1
Tags: code, refactor, learn, javascript
Published: 2018-10-27 13:12:55

---
title: Lets Refactor - Part 1
published: true
description: Small examples of Code Refactoring
tags: code, refactor, learn, javascript
---

Starting this series of posts on small examples where refactoring the code can make it bugfree and more robust. Here is part 1. Enjoy!

```javascript
document.querySelector('input').addEventListener('input', e => {
 if (e.target.value.indexOf('>') === 0) {
  isCommandMode = true;
 }
}
```

I expect that when somebody types in `>` as the first character in the input, `isCommandMode` should be set to `true`. But also if that condition isn't met, it should become `false`

You may say we can just add the missing else condition, like so:

```javascript
document.querySelector('input').addEventListener('input', e => {
 if (e.target.value.indexOf('>') === 0) {
  isCommandMode = true;
 }
 else {
  isCommandMode = false;
 }
}
```

That solves the purpose, but we can write this in a much better way which will make the code more concise, readable and also it would have prevented our bug in the first place:

```javascript
document.querySelector('input').addEventListener('input', e => {
 isCommandMode = e.target.value.indexOf('>') === 0;
}
```

That one line now handles both conditions itself. Sweet, ain't it? Hope you had fun going through this refactor. Until, next time. 
You can also [follow me on twitter](https://twitter.com/chinchang457) to know about such future posts.
Loading and Authorizing ActsAsTaggable tags using the Cancan authorization library
Tags: cancan, rails, beginners
Published: 2018-10-27 12:56:05

---
title: Loading and Authorizing ActsAsTaggable tags using the Cancan authorization library
published: true
description: You can use CanCan with ActsAsTaggable to load tags in your controller.
tags: Cancan, rails, beginner
cover_image: https://images.pexels.com/photos/1111319/pexels-photo-1111319.jpeg
---

tl;dr (Too long, didn’t read)
```
class SomeController < ApplicationController
  load_and_authorize_resource class: ActsAsTaggableOn::Tag

  def index; end  #@tags is available in this action
  def show; end #@tag is available in this action
end
```

Explanation:

The Cancan library is very useful for controlling resources and what users are allowed to read, write, modify, or change them. Normally, when load_and_authorize_resource is included into a RESTful style Controller, it uses a before filter to load an instance variable into memory. However, things can get difficult if you want to load a resource from another class or if the model you wish to use is namespaced differently from the controller.

If you’re using ActsAsTaggableOn to add tags to some models in your app, you can still load those tags as a resource using the code above. From the Cancan documentation on github (https://github.com/ryanb/cancan/wiki/authorizing-controller-actions#custom-class)
“If the model class is namespaced differently than the controller you will need to specify the :class option.”

Remember to set your user abilities for accessing Tags in your abilities files when using Cancan!

Good luck, and happy coding!
Bypassing the database and testing to see if this solution works
Tags: rails, architecture, test, cleanarchitecture
Published: 2018-10-27 10:20:30

---
title: Bypassing the database and testing to see if this solution works
published: true
description: 
tags: rails, architecture, test, cleanarchitecture
---

![](https://thepracticaldev.s3.amazonaws.com/i/yu6elcnwi6e83k5w9vd8.png)

I was thinking about how to not rely on the database in the test a few years ago, but I have not found a viable solution. Seeing this article today, I feel that the proposal proposed by the author seems to be feasible and relatively simple.
[How to test that you are creating a record without using the database ](
https://dev.to/bhserna/how-to-test-that-you-are-creating-a-record-without-using-the-database-3jk7)

I simply verified it, no problem.

I plan to do a real project verification later.

```ruby
class Product < ActiveRecord::Base
end

store = Product

Catalog.add_product(attrs, store)
```
This is an example. The advantage of this is that it is more readable, you can simulate the store to avoid database testing.

Hey this is the test code

```ruby

###
class DummyProductsStore
  Def self.create(attrs)
  End
end

def store
  DummyProductsStore
end

###

it "creates a record" do
  attrs = { name: "P1", description: "Super Product" }

  # This is the code that expects "store.create(attrs)" to be called
  expect(store).to receive(:create).with(attrs)

  Catalog.add_product(attrs, store)
end

```
In the code, store is used instead of Product, and the store is replaced when testing.

I used the rspec test to be feasible, but the problem is that the verification code is not executed after the simulation, I don't know how to solve it.

# Clean Architecture

As shown in the figure, the business model should be centered, the use case organizes the code, and the controller and database should be peripheral interfaces.
I feel that this code is to make the model as the entity, the corresponding Product class and class method as the database interface. Closer to the architectural idea of ​​the illustration. The original rails are organized with data as the center, or the database is the center.

![](https://images0.cnblogs.com/i/492619/201403/291649188125475.jpg)

[Clean Architecture Description] (http://www.cnblogs.com/happyframework/p/3632703.html)


Look at the code, how do you feel? Please see the original code for the detailed code.
How to stop API calls in RSpec and Return your Own Data
Tags: beginners, rspec, rails
Published: 2018-10-27 12:53:03

---
title: How to stop API calls in RSpec and Return your Own Data
published: true
description: You can explicitly return whatever data you want from external API requests using Webmock and stubbing requests.
tags: beginner, rspec, rails
cover_image: https://images.pexels.com/photos/39080/stop-shield-traffic-sign-road-sign-39080.jpeg
---

tl;dr You can explicitly return whatever data you want from external API requests using Webmock and stubbing requests.

How do you test a Controller that makes an API request to another website, but you want to control what exactly is returned? For example, you want to test a Controller that queries Twitter for tweets, but you don’t want to be at the mercy of whatever tweets are being created that second because you want to test how well you can scrape certain keywords.

That’s where Webmock comes in. https://github.com/bblimke/webmock

By adding the code below to your spec_helper or rails_helper file, you can stub external API requests and control the data that is returned to your controllers.

```
config.before(:each) do
 stub_request(:get, /some.website.api/).
 with(headers: {‘Accept’: ‘*/*’, ‘User-Agent’: ‘Ruby’ }).
 to_return(status: 200, body:’{“test”: 0}’, headers: {})
end
```
Lets go through each line:

`config.before(:each)` do This tells RSpec to run the following code before each spec.

`stub_request(:get, /some.website.api/).` This is the first part of the stub_request method we get from Webmock. It specifies the type of request (:get -> GET), but you can also use any other RESTful request, including the symbol :any to stub any request that comes in. The second part is the URI. You can use reqex as used above, or strings such as "www.example.com". Basically, this stub_request is now waiting for a GET request to be made to a URI that matches the reqex /some.website.api/

`with(header: {'Accept': '*/*', 'User-Agent': 'Ruby' }).` In the second part, you can explicitly set the header information you want to match. If in your code you make a GET request to /some.website.api/, but the ‘User-Agent’ is something other than ‘Ruby’, then this stub_request will not be invoked.

`to_return(status: 200, body: '{"test": 0}', headers: {})` Finally we reach the line that specifies what response we want when our code calls the API at /some.website.api/. In particular, we can set the status code (Here is 200 which means OK). The body, unsurprisingly, is the data returned to us. In can be one of the following types: [Proc, IO, Pathname, String, Array] . You can also explicitly set the headers of the response.

To Summarize: By using the Webmock gem and the code above in your RSpec helper file, you can stop API requests made by your code and return whatever data you would like.

More info here: https://robots.thoughtbot.com/how-to-stub-external-services-in-tests
Webmock Gem: https://github.com/bblimke/webmock

Happy coding!
Debug Expo/React Native WebView
Tags: reactnative, development, expo
Published: 2018-12-07 10:32:01

---
title: Debug Expo/React Native WebView
published: true
tags: react-native,development,expo
canonical_url: https://medium.com/@hmajid2301/debug-expo-react-native-webview-8bce71d40271
---

The “core” logic of my React Native app involves using WebViews because I need to access the HTML5 canvas. Whilst developing this code there are bound to be errors and issues with the WebView code. Figuring out how to debug code within the WebView isn’t so obvious.

![](https://cdn-images-1.medium.com/max/1024/1*Ys0oK49sjCS_ByJfPO8zSw.png)<figcaption>Figure 1: Chrome Inspect for the WebView</figcaption>

### **Option 1: Chrome Inspect**

- Start your Expo/React Native app\*
- Open and chrome and then go to the following URL, [chrome://inspect](chrome://inspect)
- Then click on the “_inspect_” button, click the top link to open the latest WebView, you should see something similar to Figure 2
- You should see something similar to Figure 1. Now you explore the WebView like a normal web page

![](https://cdn-images-1.medium.com/max/556/1*zC67_HMx3ckYKMyM3Box_w.png)<figcaption>Figure 2: List of WebViews</figcaption>

### Option 2: React Native Debugger

Alternatively you can access this page using the React Native Debugger page in chrome.

- Start your Expo/React Native app\*
- Go to your React Native debugger on chrome, in my case since I’m using Expo my URL is [http://192.168.27.128:19001/debugger-ui/](http://192.168.27.128:19001/debugger-ui/)
- Go to the three dots button (next to close button) \> More tools \> Remote devices
- At the bottom you’ll see another panel open up
- You should be able to see your Android device in the list
- Hit the Inspect button the first item (this will be the latest)
- Now you explore the WebView like a normal web page

### Debugging

So to the closest way to debug the WebView I have found is to use _console.log_ statements that will appear in the DevTools console. In the normal React Native debugger console you won’t be able to see any console.log statements from the WebView. You can only view them by exploring DevTools for Remote devices. As far as I can tell you cannot use breakpoints in WebViews but still this is better than nothing.

![](https://cdn-images-1.medium.com/max/1024/1*B-x8MieGiYqAQWV4MCE1bw.gif)<figcaption>Figure 3: Open DevTools for Remote devices</figcaption>

### **Appendix**

\*Make sure to do this on the same machine/host that is running the emulator. For example, a Genymotion VM is running on my Windows machine but I can still see it’s WebViews on the chrome inspect URL. This can be seen in Figure 3.

![](https://cdn-images-1.medium.com/max/1024/1*0XdcaoacZPT3H1LvV9tXvw.png)<figcaption>Figure 4: Genymotion VM and Chrome on a Windows host machine.</figcaption>

**Links**

- With help from this [StackOverflow](https://stackoverflow.com/questions/47711418/debugging-webview-in-react-native-apps?rq=1)post
- [Genymotion](https://www.genymotion.com/)
🚀 Uilicious Snippet - Capture, Replicate and Share website bugs 🐞  (without hard-coding stuff!)
Tags: showdev, testing, devops, productivity
Published: 2018-10-27 12:06:24

---
title: 🚀 Uilicious Snippet - Capture, Replicate and Share website bugs 🐞  (without hard-coding stuff!)
published: true
description: Capture, Replicate and Share bugs 🐞 you find
tags: #showdev #testing #devops #productivity
canonical_url: https://uilicious.com/blog/uilicious-snippet-capture-replicate-and-share-website-bugs/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/g2910yhuta47pn15f35v.jpg
---

First soft launched on [dev.to - when youtube was down](https://dev.to/uilicious/youtubecom-is-down---and-proving-it-with-testing-351)

After thousand of hours, of preparation coding and coffee. Today we are officially launching [snippet.uilicious.com](https://snippet.uilicious.com) onto [Product Hunt](https://www.producthunt.com/posts/uilicious-snippet)

![snippets in action](https://thepracticaldev.s3.amazonaws.com/i/egdz7y2lo8myhh3uhrp9.gif)

The idea behind this, is to allow users to write clear test scripts, and bug reports that can be easily understandable, repeatable, and most importantly publicly sharable!

Typically, writing bug reports would be tedious or inaccurate. Sometimes the developers maybe unable to replicate the bug even with the steps provided! 

Hence [snippets](https://snippet.uilicious.com), where anyone can easily write simple test scripts, without complex hard coding of css selectors, or even login. And attach a shareable link that contains the results, to fire it off to the developers immediately.

**Update:** More details regarding our testing language can be found in its [companion post here - Taking the horror out of UI testing 😱](https://dev.to/uilicious/taking-the-horror-out-of-ui-testing--1fi6)

Would love to hear any feedback on our product / [its launch 🚀](https://www.producthunt.com/posts/uilicious-snippet)


**Special thanks to :** my co-founder @taishiling, and the rest of the team (@jmtiong, wesley, @sopnopriyo, chai ling) - you folks are awesome 😁

----

**Update :** funny meta example, that i didnt expect to find

{% twitter 1056148195317710852 %}

{% twitter 1056148538411769856 %}
Learn Angular 7 | Episode 3 of 5 | Part 2
Tags: angular, webdev
Published: 2018-10-27 05:11:08

---
title: Learn Angular 7 | Episode 3 of 5 | Part 2
published: true
description: Learn Angular 7 | Episode 3 of 5 | Part 2
tags: angular, webdev
---

{% youtube o9QfQhCQQ74 %}
The State Of JavaScript
Tags: javascript, performance, optimization, webdev
Published: 2018-10-27 02:44:54

---
title: The State Of JavaScript
published: true
description: A deep-dive into the state of JavaScript
tags: javascript, performance, optimization, webdev
---

I recently talked about the [State Of JavaScript](https://youtu.be/i5R7giitymk) on the State Of The Web show. Yes, I'm a one-trick pony... 😃 

{% youtube i5R7giitymk %}

On the client, as you pay for things you can't always easily see it becomes important to understand how [the cost of JavaScript](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) might impact your site.

How do I tackle these problems?

* [Start off with Lighthouse](https://dev.to/addyosmani/shine-a-light-on-javascript-performance-with-lighthouse-1opf) 💡🏠
* Check how well your site performs on some real phones. There are a number of these setup on [WebPageTest](https://webpagetest.org). If your team can afford them, a local device lab is always useful too 📱
* If JavaScript is impacting your metrics, it's probably time to analyze why. I regularly use [source-map-explorer](https://www.npmjs.com/package/source-map-explorer), [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) and [bundlephobia](https://bundlephobia.com) to discover opportunities to trim down my bundles. 
* I use the DevTools code-coverage highlights bundle weight-loss opportunities.
* Try to leverage code-splitting patterns. Got a large vendor bundle? Maybe only a few of those dependencies are needed for the initial page load. Large app bundle? Is all that logic really needed right away? Libraries like React are starting to get better at supporting code-splitting out of the box (see [React.lazy()](https://reactjs.org/blog/2018/10/23/react-v-16-6.html#reactlazy-code-splitting-with-suspense)). 
* Consider using [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) to generate bundles for modern vs legacy browsers. The [module/nomodule pattern](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) allows you to serve these in a backwards compatible way. 
* Leverage compression techniques. I've been suggesting teams try out [Brotli](https://css-tricks.com/brotli-static-compression/) for static asset compression. In my own apps, I've seen a 20-30% decrease in bundle size over the wire for JS. If you're a Node shop, [shrink-ray](https://github.com/aickin/shrink-ray) or [shrink-ray-current](https://www.npmjs.com/package/shrink-ray-current) are solid middlewares for serving Brotli that I've found work reliably.
TalkingBit testing booklets
Tags: tdd, testing
Published: 2018-11-02 05:46:24

---
title: TalkingBit testing booklets
published: true
tags: tdd,testing
canonical_url: http://franiglesias.github.io/introd-to-tdd-booklet/
---

Here you have some resources to help in testing and tdd workshops. Hope you will find them useful.

This is the first one, about the basics of Test Driven Development and the red-green-refactor cycle.

{% speakerdeck 2f8572f541eb4e4f9f81543633e0184f %}

This one about testing value objects:

{% speakerdeck 2099c28da91a459bac57b09af9ac7c8d %}

You can test unpredictable things:

{% speakerdeck 44c5b5e610c74723a34d24392ec17ef2 %}

Test doubles and where to find them, with some cute drawings:

{% speakerdeck a71d12af0ee94d8c975223f8f51a7d95 %}

Compilation of low cost techniques to create test doubles without a Doubling Framework:

{% speakerdeck d69d5c43470d41b08c86e4cc04b4a6a2 %}

Enjoy them!
Find a job, they said. They will teach you, they said. 
Tags: carier, help
Published: 2018-10-26 23:26:02

---
title: Find a job, they said. They will teach you, they said. 
published: true
description: My bad experience in the field of game development as a student. Finding a job is super difficult.
tags: #carier, #help
---

![The job you and I not getting](https://thepracticaldev.s3.amazonaws.com/i/upbmtn9ig1xuil6wdjvr.jpg)

So, to make everything clear, I wasn't employed. I wanted to, but I wasn't and that's the point of my story.

I tried to get a job in my field. I create games in Unity3D and code them in C# .NET. Big shocker is, that game industry is fragile. So a lot of small companies are having hard time being alive. Issue is, I was targeting exactly the struggling ones. They just simply can't afford uncertainty.

I tried to talk with small ones.. I failed... or them, pretty soon. So I ask the big fish around here and they said something like this: "well, we do only hire university students or graduates...", "well, so how many hours can you spent in our office?" and so on. Too young, too inexperienced, can't work as much. Always some issues. Then my principal came up, offered me a one time job by which he realized I'm able to finish projects.

From there it went crazy. First, small jobs, then new people. After that, started teaching by having my course. And to top it all off... we started a company.

Find a job, they said. They will teach you, they said.

That's the issue, inexperienced people having their company and figuring their way out. I'm 18 and I don't know if I'm honestly doing a mistake.

But I don't have much of an option honestly. That's what made me sad. The market for young developers is only Indie... indie is great if you want to work from home. I don't.

One older friend said this, "The crucial point of growth of your young self is not how fast, but if at all". 

Then I realized I lived in the expectations of others. And the truth is.. I love what I do and I love to build my business. We'll fail probably, but it's fun. I'm having fun. And the greatest thing about this is, I can still add it to my CV.

---

If you have any advice, I would be more then thankful to hear it from you.

This was helpful to hear
{% devcomment 65i6 %}

From this article
{% link https://dev.to/geshan/5-practical-steps-to-land-your-first-tech-job-4ib5 %}
English to Portuguese Translation
Tags: hacktoberfest, discuss, opensource
Published: 2018-10-26 23:24:32

---
title: English to Portuguese Translation
published: true
description: english to portuguese translation
tags: hacktoberfest, discuss, opensource
---


It's the last days of #Hacktoberfest. And I would like to help by contributing to any project. I am a native speaker of the Portuguese language and I am willing to translate any project in order to participate in #Hacktoberfest.
Any project that needs translation?