teleren/devto huggingface dataset:
Loading Chrome extensions in Capybara integration tests
Tags: selenium, capybara, rails, react
Published: 2020-02-11 15:55:19

Ever dreamt of loading Chrome extensions in your capybara integration tests' windows ? Here are the steps:

### Get the extension
- Browse `chrome://extensions`
- Locate the extension and its ID
![react extension](https://dev-to-uploads.s3.amazonaws.com/i/mgdhqvj1flp5xfc32mmw.png)
- Click on the "Pack extension" button at the top left of the window.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hatl0t57tvafu438xl7s.png)

  - Either use your terminal and find the extension folder using its ID. If you're on OSX it should be something like this: `/Users/<your_user>/Library/ApplicationSupport/Google/Chrome/Default/Extensions/<extension_ID>`. Once you're in this folder, get the full path to the extension's version. Here's mine right now: `/Users/my_user/Library/ApplicationSupport/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.4.0_0` Paste that path into the _Extension root directory_ field.
  - Or if you have enabled visibility of hidden files in your folder, simply browse to the extension's folder through the Finder.
- Click on "Pack extension"
Voilà! You should have a modal letting you know the extension was packed successfully, along with its path, which you could use to `mv` it to your Rails project.

### Configure Rails
Assuming that you have the `capybara` and `selenium-webdriver` gems.
- Move the `.crx` extension to your rails project
- Wherever you instantiate your Capybara Selenium driver, simply add the extension to the options passed to the driver!

```ruby
options = Selenium::WebDriver::Chrome::Options.new

unless ENV['CI']
  options.add_extension(
    Rails.root.join('test', 'browser_extensions', 'react_devtools_chrome.crx')
  )
end

Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end
```

That should have done the trick! The next time you launch an integration test in Chrome the extension should be available 🚀
So what’s controversial this week?
Tags: webdev, javascript
Published: 2020-02-11 15:50:38

The past couple years I’ve been noticing a trend: more articles where the author starts complaining why they don’t use a library anymore. One day it could be the creator of a UI component library posting about their displeasure with Web Components spec. Another day it’s an engineer at a startup crying foul about TypeScript. I don’t know how many articles I read making false comparisons between frameworks to justify somebody’s choice adopting one over the other. Any library, framework, tool, browser is susceptible to their attacks. 

Indeed the JavaScript ecosystem is fraught with choice. So many choices an engineer can discard one tool and pick up another in no time at all. That is fine, however sometimes when engineers write posts arguing why you too should drop a tool, they should consider the potential harm they could be causing. 

Maybe they didn’t have a parent drill that ole saying their heads at an early age: 

“If you don’t have something nice to say, don’t say anything at all.”

Go figure. There isn’t a gif for that.

Some of us are perfectly happy with the tool that is suddenly made controversial by somebody’s flippant post. Others are stuck with the tool at work for years to come. The result of such posts is really negative, they are vile and not welcome in my feed.

We need a whole lot more empathy in web engineering. I have no idea who these characters are in real life but on the web they share something in common with egomaniacs and narcissistic personalities. You know, the nefarious types who have a complete lack of empathy. If you stand up to them they will always try to blame you. After all it’s not their fault you feel this way. 

People are certainly entitled to their opinion, however when there is no data, analytics or concrete examples to backup their assertions I sit and wonder 

“Is this just for attention?”

![A kid crying for the umpire to throw him a ball at a baseball game](https://dev-to-uploads.s3.amazonaws.com/i/7oydi1cqxafeyw8g803e.gif)

“Did I just succumb to nothing more than clickbait?”

![Man being swallowed by enormous fish while swinging on a rope](https://dev-to-uploads.s3.amazonaws.com/i/65483l1dpp55zxdp99v1.gif)

You could choose to ignore their post however even without your support, copy cats write a similar post about their displeasure with whatever JavaScript library is on the chopping block that week. They copy and paste the same talking points. Bots retweet them. People like and bookmark their posts when they feel validated. The engineers in the community that has formed around the tool scoff at all the uneducated engineers bashing their JavaScript library. The comedy that is life continues.

So just sit back and relax in that Herman Miller chair. Confirmation bias will bite you in the end.
How to install pdf2htmlEX in Ubuntu 18.0.4
Tags: pdf2htmlex, ubuntu, pdftohtml, linux
Published: 2020-02-11 15:48:32


pdf2htmlEX is a tool that allows you to convert PDF to HTML without losing text or format. pdf2htmlEX renders PDF files in HTML, using modern Web technologies. It is very useful if you want to convert academic papers with lots of formulas and figures to HTML format

This post will show you how to install pdf2htmlEX to work with poppler-0.62.0 (as installed from the Ubuntu 18.04 LTS package).

As at the time of writing this post pdf2htmlEX is no longer packaged by Debian/Ubuntu, you will need to compile pdf2htmlEX yourself.

To get started you will need to install the dependencies

    sudo apt-get update

    sudo apt-get install -y libpoppler-private-dev pkg-config cmake make gcc g++ 
    libcairo-dev libspiro-dev libpng-dev libjpeg-dev libpoppler-dev libpango1.0- 
    dev libfontforge-dev poppler-data openjdk-8-jre-headless libopenjp2-7-dev libopenjp2-7 libgdk-pixbuf2.0-dev libfontconfig1-dev poppler-utils

Download a copy of the repository

    wget https://github.com/pdf2htmlEX/pdf2htmlEX/archive/v0.16.0-poppler-0.62.0-ubuntu-18.04.zip

Unzip and install

    unzip v0.16.0-poppler-0.62.0-ubuntu-18.04.zip
    cd pdf2htmlEX-0.16.0-poppler-0.62.0-ubuntu-18.04
    ./dobuild
    ./doinstall

If you encounter error about package not found like

    pdf2htmlEX: error while loading shared libraries: libfontforge.so.4: cannot open shared object file: No such file or directory

Check if the package is installed, in this case libfontforge

    $ dpkg -l | grep fontforge

You should see the following

      ii  fontforge            1:20170731~dfsg-1    amd64     font editor
      ii  fontforge-common     1:20170731~dfsg-1    all       font editor (common files)
      ii  libfontforge-dev     1:20170731~dfsg-1    amd64     font editor - runtime library (development files)
      ii  libfontforge2        1:20170731~dfsg-1    amd64     font editor - runtime library

If you don't see the package, install it. However, if you have installed the packages and still got the error, type the following to set the path.

    export LD_LIBRARY_PATH=/usr/local/lib:$LD_LIBRARY_PATH


Cheers!
Working in Teams
Tags: discuss
Published: 2020-02-11 15:41:16

---
title: Working in Teams
published: true
tags: discuss
---

Hi Dev's

I'm currently going through a Coding Bootcamp. So far it's been awesome. I've been knocking my [project assignments](https://github.com/yarocruz) out of the park. It's been going smoothly. I'm keeping up with the pace. We're currently doing Group Projects. But this is where things have started getting a bit awkward for me. The instructor and TA's gave us some guidance of course. There was a mini lecture about the Agile Methodology, Kanban, using Github Projects and all that team workflow stuff. We are in groups of three or four. I'm in a group of four.

Here's the thing, I'm pretty bad in social group situations. Particularly large groups and by large groups I mean more than me and another person. I have an introverted personality and in groups I always follow and never try to lead because that feels impolite to me. I also have a hard time being comfortable with following scattered conversations in like say group party stuff. In work environments I do a little better, but that's because we have management guiding us and I can focus on doing something.

Our group is not using Agile or Kanban at all. We're not even trying. The idea for the app we're building is good but our execution on how to build it has been half assed. One of the team members is focused on animating buttons. Another is looking for an API to use. I haven't really done anything other than starting a repo, inviting collaborators, and adding rules to review branches before merging. It's been 3 days of just me sitting down in front my laptop fiddling around with nothing in particular, listening to these kids talk about gaming. Nothing against gaming. I just wanna get stuff done. 

Anywho, just wanted to get this out there and see if you guys can give me some feedback, advice, point me to some articles, resources, blog posts, etc. Anything about working in teams.

How has your experience working with teams been? How is out there in the real world? What should I expect? Will I look back at this part of the Bootcamp experience and smile?
Daily Challenge #184 - Form the Minimum
Tags: challenge
Published: 2020-02-11 15:40:22

---
title: Daily Challenge #184 - Form the Minimum
published: true
series: Daily Challenge
description: Form the smallest number you can out of an array of digits. 
tags: challenge
---
###Setup
Given an array of integers, implement a function that will return the lowest possible number that can be formed from these digits. You cannot use the same number more than once, even if it appears in the array multiple times. 

###Examples

`minValue({1, 3, 1})`  ==> return `13`

`minValue({5, 7, 5, 9, 7})`  ==> return `579`

###Tests

`minValue({1, 2, 3, 4})`

`minValue({1, 1, 7, 0})`

`minValue({9, 2, 1, 4, 3, 9, 5})`

Good luck!
***
_This [challenge](https://www.codewars.com/kata/5ac6932b2f317b96980000ca) comes from MrZizoScream on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
How to build a website in 2020
Tags: webdev, design
Published: 2020-02-11 15:07:09

**Step 1**: Buy a domain. You might have a problem if you already have 20 domains waiting to be used, but that's okay. Feel free to buy more domains. You never know when you might need that perfect domain name. P.S. [zeit.co](https**://zeit.co/) has a great [domain search tool](https://zeit.co/domains) with hacks. Now I've just enabled your habit. You're welcome.

**Step 2a**: Engage in Twitter debates about how JavaScript is ruining the web and which static site generators are best. Do this for 4 months.

**Step 3**: Take an [entire course to get better at design](https://frontendmasters.com/courses/design-for-developers/). Spend 5 hours generating an [HSLa exploration CodePen](https://codepen.io/nolasia/pen/PoomRqN) to visualize something that already exists. Bemoan color systems and values. Read a shout-out tweet about best conference talks that happen to be about [React and color](https://www.youtube.com/watch?v=UbTZ9qSqimo&feature=youtu.be). Find [a tool that does it way better than you](https://colorlab.dev/).

**Step 2b**: Eventually some rando will tell you about [Eleventy](https://www.11ty.dev/), and you're like "sounds brilliant". Repeat step 2a.

**Step 4**: Clone that [starter repo](https://github.com/11ty/eleventy-base-blog) and fire it up. Waste 17 hours trying to figure out how to implement some esoteric design feature no one will notice. "Fuck, it's midnight on a Friday, why am I still doing this?" On Monday, "add a circle".

**Step 5**: Let's do dark mode.

**Step 6**: (Six hours later) Let's not do dark mode.

**Step 7**: Look at other people's sites in envy.

**Step 8**: Write the actual content.

**Step 9**: Join the [Learn with Jason livestream on variable fonts](https://www.youtube.com/watch?v=ZDjIFGfrQKw). "Oh that's cool, must add."

**Step 10**: Edit the color scheme 20 more times. Play with the design and variable fonts. Open Firefox because the font dev tools are 🔥. Go blind because Firefox oversaturated the colors. Recover from blindness, and edit the colors again.

**Step 11**: Sees how CSS Tricks implemented dark mode and admire how well they did it. Silently close the tab.

**Step 12**: Launch! Ugh, non-responsive iframes and bad break points. Run [Axe](https://www.deque.com/axe/). Feel like a terrible person. Fix issues (and edit colors again).

**Step 13**: 5 months later, write a blog post.

*Note to self: next time, just hire a designer.*


---

This article was originally published on [sia.codes](https://sia.codes/posts/how-to-build-a-website/). Head over there if you like this post and want to read others like it, or sign up for my [newsletter](https://buttondown.email/sia.codes) to be notified of new posts!
Are you a tech user or avoider?
Tags: discuss, watercooler
Published: 2020-02-11 14:57:54

---
title: Are you a tech user or avoider?
published: true
description: I find I'm much more of a Luddite because I already spend all day with tech in my job. Anyone else?
tags: discuss, watercooler
---

Hi everyone. I've found that working as a software engineer all day long every day makes me less interested in trying out tech outside of work. I know some developers who go home and build things with Raspberry Pi's or Arduinos, or try out every new app that comes out and are early adopters of everything from Snap to Twitch.

But I'm very often uninterested in what's going on in tech because I feel like I had my fill during the day.

Where do you land?
DEV.to Javascript API Lib? Interested?
Tags: api, javascript, question
Published: 2020-02-11 14:56:25

I'm thinking of creating a js library for the DEV.to API, as I can't find any library already done. I know I could use the API directly, but I like to have the option to use a library for making quick prototypes and in the end, it can make the code more readable.

I thought of making a post about how this could be accomplished, would any of you be interested? 

An if so, what kind of lib would you be interested in, a plain old Javascript lib? a NodeJS one? Both?

Maybe it should be done with Typescript?

If there is enough interest I will create said post!
How To Use Tailwind CSS with Eleventy
Tags: css, webpack, tutorial, tailwindcss
Published: 2020-02-11 14:53:22

In this guide, we'll walk through how to install <a href="https://tailwindcss.com/">Tailwind CSS</a> in an <a href="https://www.11ty.dev/">Eleventy</a> project.

## Set up Webpack

This guide assumes you have Webpack installed in your Eleventy project. If you haven't already, follow this guide to prepare your project for Tailwind:

[How To Use Webpack in an Eleventy Project &rarr;](https://statickit.com/guides/eleventy-webpack)

## Install dependencies

Run the following command to install Tailwind and a few other dependencies for Webpack:

```bash
npm install --save-dev tailwindcss autoprefixer mini-css-extract-plugin css-loader postcss-loader
```

## Configure the build pipeline

Open up your `webpack.config.js` file and add the `MiniCssExtractPlugin` and the CSS rule:

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      }
    ]
  }
}
```

Then, create a `postcss.config.js` file:

```js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
};
```

## Add Tailwind to your CSS

Create a `main.css` file in the `src/styles` directory and add the Tailwind directives:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Then, `import` your CSS file in your `src/scripts/index.js` file:

```js
import '../styles/main.css';
```

Congratulations! Tailwind CSS is now installed in your project.

## Customize Tailwind (Optional)

At this point, you’re all set up to work with Tailwind’s excellent defaults.

If you need to [customize your configuration](https://tailwindcss.com/docs/configuration/), run the following command to generate a minimal `tailwind.config.js` file:

```bash
npx tailwindcss init
```

---

_Originally published in the [StaticKit](https://statickit.com/) guides_
OOWLON real world meetup !
Tags: oracle, conference, techtalks
Published: 2020-02-11 14:42:45

Is anyone going to [OOWLON](https://www.oracle.com/uk/openworld/) tomorrow or thursday ? It would be great to meet someone from DEV in the real world :)

FYI just seen OOWLON says they will be livestreaming on twitter so you can stay in the virtual world after all
for key value in dict python
Tags: python, beginners
Published: 2020-02-11 14:32:01

How to print keys and values in a dictionary? Wait.. what is a dictionary? 

In the <a href="https://python.org">Python</a> programming language, a <a href="https://pythonbasics.org/dictionary/">dictionary</a> is a one to one mapping. Its a set of key-value pairs. Each key is mapped to one and only one value. 

You can run two key operations on a dictionary: store a value with some key and extract the value given the key.

In other programming languages a dictionary is sometimes called "associative memories" or "<a href="https://www.php.net/manual/en/language.types.array.php">associative arrays</a>".  

## Example 

In Python, an empty dictionary would be defined with curly brackets. 

```python
x = {}
```

Do not confuse with <a href="https://pythonbasics.org/list/">lists</a>, which use another type of brackets []. 

A simple dictionary would be defined like this, with every pair separated by a comma and every key-value pair linked using a colon:

```python
my_dict = { "name":"Alicia", "city":"Toronto", "country":"Canada"}
```

## Print dictionary with for loop

One way to print the values in a dictionary is to use a <a href="https://pythonbasics.org/for-loops/">for loop</a>. 

```python
import json

my_dict = { "name":"Alicia", "city":"Toronto", "country":"Canada"}

for item in my_dict:
    print("({}->{})".format(item,my_dict[item]))
```

The program then outputs the key->value mapping for each pair in the dictionary:

```
(city->Toronto)
(name->Alicia)
(country->Canada)
```

## Print dictionary with item() method

You can use the .items() method to get the key,value from a dictionary. In my opinion this is easier to read. 

This also has the advantage of having both the key and value available in a clear way inside the for loop. It's good for readability of your program.

```python
import json

my_dict = { "name":"Alicia", "city":"Toronto", "country":"Canada"}

for key,value in my_dict.items():
    print("({}->{})".format(key,value))
```

## Print using keys

Another way to output a dictionary is to get all keys and use the keys to output the key-value pairs. 

In every iteration, the key is used to get the value in the dictionary. Note that this is the same as the first method, but with explicit definition of key.

```python
import json

my_dict = { "name":"Alicia", "city":"Toronto", "country":"Canada"}

for key in my_dict.keys():
    print("({}->{})".format(key,my_dict[key]))
```

**Related links:**
* <a href="https://docs.python.org/3.8/tutorial/datastructures.html#dictionaries">Python docs on dictionaries</a>
* <a href="https://pythonbasics.org/">Learn Python</a>
I've been working on Startups for more than 4 years (ask me anything)
Published: 2020-02-11 14:30:47

_Hey there users!_

I've been working on a couple of **tech startups** for more than **4 years** now, in this time I've gathered quite a bit of experience about working on such companies, for example, handling **big workloads**, managing **multiple projects at the same time** and a lot of topics I can't cover in a paragraph :P.

**Some of the startups I worked with:**
* Cryptocurrency exchange platform - [ChipChap]() `💀dead`
* Social network based on Blockchain - [Crea Project](https://creaproject.io/crea-en/)/[Creary](https://creary.net/)
* Social coin for a big city town hall - [REC](https://rec.barcelona/)
  * _REC is not a startup of itself, our startup helps with the development._
* A bot market and development platform - `in process`
* And many more...



So if you just started or are going to start to work in a startup or have any questions you would like to be answered, please go ahead! I will try answering all of them! 

Any questions are valid :)
Introducing Grayshift: A lightweight front-end component library
Tags: webdev, showdev, html, css
Published: 2020-02-11 14:24:03

For the last several months, I've been developing websites with a toolkit called Grayshift. It's a lightweight front-end component library for developing fast and powerful web interfaces.

It immediately makes any new design or development project that much easier to start, and also makes older projects easier to maintain.

Grayshift is based on Bootstrap. It's built on a set of standards for developing such as Code Guide, Stylelint and others.

There's a saying that goes: "If it ain't broke, don't fix it". That's why I kept many Bootstrap features and tried not to change too much unless it's explicitly necessary.

You can check our full list of components here:

https://grayshift.io/components/

Looking ahead, I plan on adding more to Grayshift with additional components, and such.

### Free Themes

Quickly get a project started with any of our examples ranging from using parts of the toolkit to custom components and layouts.

https://grayshift.io/themes/

### Appearance

* Auto (light or dark based on system settings)
* Light
* Dark

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

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

Grayshift supports the latest, stable releases of all modern browsers and platforms.

* Chrome
* Firefox
* Safari
* Opera

For now, [visit the Grayshift website](https://grayshift.io) to find out more. You can [download or fork it at GitHub](https://github.com/gskit/gskit).