teleren/devto huggingface dataset:
Did you hear about the malicious backdoor discovered in the popular bootstrap-sass Ruby gem?
Tags: ruby, security, rails, rubygems
Published: 2019-04-09 08:46:49

---
title: Did you hear about the malicious backdoor discovered in the popular bootstrap-sass Ruby gem?
published: true
description: a malicious version of a Ruby gem used in a Rails application leads to remote code execution on vulnerable servers
tags: ruby, security, rails, rubygems
canonical_url: https://www.lirantal.com/blog/2019-04-09_the-malicious-backdoor-of-ruby
---

I recently shared the [outline of events and technical details](https://snyk.io/blog/malicious-remote-code-execution-backdoor-discovered-in-the-popular-bootstrap-sass-ruby-gem/) behind the backdoor that was wisely hidden in the 3.2.0.3 version of bootstrap-sass, a popular ruby gem that was downloaded 28 million times since added to the repository 8 years ago.

The malicious version allowed remote attackers to dynamically execute code on servers hosting the vulnerable versions, by sending a specially crafted HTTP request that hides the payload in an innocent-looking cookie 🍪.

As there are no logs and evidence to trace back how this happened, the maintainers suspect that the gem was published using a compromised account of one of the two of them who had publish access.

We've heard stories of this happening before in the JavaScript community as well. On good example for this is the eslint-scope package.

## What can we do about it?

I can't stress enough how important it is for maintainers, and developers in general to bump up their security game. I have compiled a list of [10 npm security best practices](https://snyk.io/blog/ten-npm-security-best-practices/) for JavaScript developers, and at the very least enabling 2FA on the RubyGems repository is a must.

If you're using [Snyk](https://app.snyk.io/signup), we already updated our vulnerability database to alert in-case you are using the malicious version.
Is there an iron triangle of development?
Tags: discuss, productivity, softwaredevelopment
Published: 2019-04-09 08:22:26

---
title: Is there an iron triangle of development?
published: true
description: A mental model for thinking about trade-offs, an incomplete thought
tags: discuss, productivity, softwaredevelopment
cover_image: https://thepracticaldev.s3.amazonaws.com/i/066o5widayygpe0n0esq.jpg
---

Before I was a developer, I was a Project Manager and one of the first things I learnt was the iron triangle. For anyone not familiar with it, it's a model of the constraints of managing a project. The idea is that you can only have two of the three points. For example, if you want a project with many features delivered quickly it will cost a lot of money/resource. I found it a helpful construct for thinking about what trade-offs to make, which got me thinking about how this could apply to development.

As someone that likes to make conscious decisions, I often wonder what trade-offs I'm making as I write code. 

If I'm working on a task that needs to be highly performant am I sacrificing readability? If I want to make a project easy to maintain does that mean it can't be as extensible? 

I'm actually not sure what shape the "development" version should be or what the axes are. My starting list would be:
* Performance
* Readability
* Extensibility
* Maintainability 
* Time (to develop)

At the moment I have a lot of questions and few answers but I think it's an interesting idea, have you ever thought something similar? It would be great to hear from you.
Don't use "sudo" with NPM "install"
Tags: javascript, npm, security
Published: 2019-04-09 08:18:22

---
title: Don't use "sudo" with NPM "install"
published: true
description: Configure NPM install to put global packages in your user directory.
tags: JavaScript, NPM, security
---

Using "sudo" when installing NPM packages may put your computer at risk, by giving untrusted code administrative privileges. Please do not use "sudo" when installing NPM packages.

Instead, use the following instructions to allow NPM to install global packages without administrative privileges:

https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

---
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
Center align content vertically and horizontally in CSS
Tags: css, tutorial, beginners, webdev
Published: 2019-04-09 03:53:22

---
title: Center align content vertically and horizontally in CSS
published: true
description: Center aligning content vertically and horizontally are usual requirement in any website. There are several ways to achieve it using CSS.
tags: ['CSS', 'tutorial', 'beginners', 'webdev']
series: 'CSS Nuggets'
canonical_url: https://learnwithparam.com/blog/center-align-content-vertically-and-horizontally-in-css/
---

> Follow me on [Twitter](https://twitter.com/learnwithparam), happy to take your suggestions on topics or improvements

Center aligning content vertically and horizontally are usual requirement in any website. There are several ways to achieve it using CSS.

- using **CSS transform**
- using **flexbox**

## CSS transform

```scss
.content {
  position: relative;
  top: 50%;
  left: 50%;
  // shifts or translate the center point (X, Y) by (X - 50% of outerWidth, Y - 50% of outerHeight)
  transform: translate(-50%, -50%);
}
```

{% codepen https://codepen.io/Param-Harrison/pen/ErPyva %}

### Limitations

- It works very well for centering content block with **fixed width** in both directions ✅
- For non fixed width, the content block assumes 100% of parent's width. It expands the whole width of parent container horizontally. You can check this by removing width for content in codepen example ❌
- this technique won't work if the content is **inline** level element, it only works for **block level** elements ❌

## Modern flexbox way

```scss
.parent {
  display: flex;
  // centering along main axis - X axis - Horizontal
  justify-content: center;
  // centering along cross axis - Y axis - Vertical
  align-items: center;
}
```

{% codepen https://codepen.io/Param-Harrison/pen/ZwQBxR %}

> **Note**: main and cross axis depends on `flex-direction` property. By default flex-direction is `row`. If it is set as `column`, then main axis is Y and cross axis is X.

This approach works on almost every use cases perfectly

- fixed width of content block ✅
- non fixed width of content block ✅
- content can be inline level element or block level element ✅

Flexbox is so powerful and you can easily develop more styles and components using it. Its supported on all major browsers, no excuse to not using it 😊

> Note: This article was originally written for [my blog](https://learnwithparam.com/blog/center-align-content-vertically-and-horizontally-in-css/). I am republishing it here for the amazing DEV community.
Did Functional Programming Get "Monads" Wrong?
Published: 2019-04-09 07:33:50

---
title: Did Functional Programming Get "Monads" Wrong?
published: true
description: Why do monads feel so darn clumsy?
tags: 
---

We believe the unfolding Scala mess has exposed some mathematical issues in how FP treats the concept of a "monad". We believe that operating systems historically play that orchestration and data handling role, but in a different manifold. Unfortunately O/S innovation has been dead for decades but we hope to change that.
https://medium.com/@reinman/monoids-to-groupoids-492c35105113
Making Session Variables Work in .NET Core
Tags: dailydevelopment, core, dotnet, errors
Published: 2019-04-09 02:59:23

---
title: Making Session Variables Work in .NET Core
published: true
tags: Daily Development,core,dotnet,error
canonical_url: 
---

As noted, I work with Legacy and often have to bring in variables from the API that must be sustained across session.. (and I’m sure there might be a better way, comment and advise!).  Where I am at now, is I query the API, bring in the variables but how do I keep from calling these over and over: old solution was session variables so, that’s where I am at.

When I started to do this on Core, the most helpful article was this (and it’s in my comments):  [https://adamstorr.azurewebsites.net/blog/are-you-registering-ihttpcontextaccessor-correctly](https://adamstorr.azurewebsites.net/blog/are-you-registering-ihttpcontextaccessor-correctly)

He leads you through the basic setup of a HttpContext helper class (that I still use today) and how to configure the startup..  and maybe I strayed, but today I came across a problem: I was able to Set session variables, but the Get was pulling null.

Why!!??

Order.  Yes, you’ll see 1000 stackflow responses about order in Configure, but now in **ConfigureServices** (contrary to example as I am now using Core 2.2?), order again comes into play:

```
public void ConfigureServices(IServiceCollection services){ //this MUST be before add mvc or session returns null services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); services.AddMvc();
```

How does the error present itself?  Full Post: [https://www.catrina.me/making-session-variables-work-in-net-core/](https://www.catrina.me/making-session-variables-work-in-net-core/)
Which are your favorite online shops to buy dev stuff?
Tags: discuss, shop, store, merchandise
Published: 2019-04-09 00:22:52

---
title: Which are your favorite online shops to buy dev stuff?
published: true
description: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6t0mi1n5x3ua7evyyyza.png 
tags: discuss, shop, store, merchandise
---

I really like to find __hoodies__, __stickers__, __hats__ and other stuff related to __dev__, __code__, and so on!

Currently, I only know these __great__ ones 😎:

- [Dev.to Shop](https://shop.dev.to/)
- [Github Shop](https://github.myshopify.com/)
- [Sticker Mule Code Stickers](https://www.stickermule.com/unixstickers)
- [Google Shop](https://shop.googlemerchandisestore.com/)
- [Microsoft Shop](https://www.microsoftmerchandise.com/Shop/)
- [Cloud Native Computing Foundation Store](https://store.cncf.io/)
- [OpenFaaS Store](https://store.openfaas.com/)

__Does anyone knows another awesome online dev shop?__ 🦄



__Remember__ that you can __support__ Dev.to by buying some of their products!
jQueReact
Tags: react, jquery
Published: 2019-04-09 00:02:21

---
title: jQueReact
published: true
description: A stupid experiment (47 lines) to add declarative functionalities to jQuery
tags: react,jquery
---

> A stupid experiment (47 lines) to add declarative functionalities to jQuery

## Play here
https://codepen.io/marcocastignoli/pen/JVbvdZ

## Install
* Download the repo https://github.com/marcocastignoli/jQueReact

* Do not install dependencies
```bash
npm install^C
```
* simply open index.html in the browser.

## How it works
* Create a state
```javascript
    const State2 = $.createState({
        title: "asd",
        counter: "0"
    })
```
* Create a template, use **data-bind** instead of *{this.state.variable}*
```html
    <div id="test1">
        <h1 data-bind="title"></h1>
        <h1 data-bind="counter"></h1>
        <button onclick="State2.counter++">Increment</button>
        <input data-bind="title">
    </div>
```
* Connect the state with the template
```javascript
    $("#test1").bindState(State2)
```
* Play with the state and watch the template update automagically 🧙
```javascript
    State2.counter++
    State2.title = "ciao"
```

## Why?
It's late and I randomly though about it, I realized that it wasn't so hard to do, so I did it.

## How it really works?
The state is handled by javascript's getters/setters. As you can see in the example above, I'm using the data attribute to keep the text value of the doms with the getter. Each time the setter is called, I search for all the elements that are binding with the updated state using jquery's `$('[data-state="..."]')`, and I update them with the state getter.

## Would it be cool to build the same thing but without jQuery, same idea but with plain JS?
You have to tell me!
don't use git stash pop
Tags: git, tips
Published: 2019-04-09 13:31:02

---
title: don't use git stash pop
published: true
tags: git,tips
canonical_url: https://jagascript.com/dont-use-git-stash-pop/
---

[![room-of-requirement](https://jagascript.com/static/27d7ec9074e09ad28289a938649ffbc4/44e84/room-of-requirement.jpg)](/static/27d7ec9074e09ad28289a938649ffbc4/36da7/room-of-requirement.jpg)

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Why?

A git `stash` is a very powerful concept, it’s like Harry Potter’s _Room of Requirement_ for your code, you throw it in here and you can get it back when you need it again in the future.

But dealing with it can be dangerous.

Running `git stash pop` throws away the stash after applying it.`git stash apply` leaves it in the stash list and can be reused later (or dropped using `git stash drop`)

> note: If during a `pop` there are conflicts it behave exactly like git stash apply and the stash will not be lost

##### <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Worth notice

`git stash pop` is equivalent to `git stash apply && git stash drop`

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Conclusion

`git stash apply` can be a life-saver somethimes when you mess up with taking something from the stash

<span style="font-size: 12px;text-align: center;width:100%;display: inline-block;opacity: 0.5;margin-top: -5px">
image credit: <a style="box-shadow:none;" href="https://www.deviantart.com/ancientking">ancientking</a>
<span>
Relay: A modern deep dive full course!
Tags: graphql, relay, react, javascript
Published: 2019-04-08 23:29:22

My friend [Sibelius Seraphini](https://twitter.com/sseraphini) just released a COMPLETE course in [Relay](https://facebook.github.io/relay/)!

**It is 100% free!** 🎉

🐤 You can help retweeting it:

https://twitter.com/sseraphini/status/1115224900539682818

⭐️ Add a start in the repository:

https://github.com/sibelius/relay-modern-course

And access everything FREE FOR LIFE here:

https://relay-modern-course.now.sh/packages/

Have fun! 😎
Giving My First Talk on Git
Published: 2019-04-08 23:03:53

---
title: Giving My First Talk on Git
published: true
description: A gentle introduction to the git command-line.
tags: 
---

I was recently asked to give a talk to the QA team on the basics of git usage.  I initially felt a bit nervous about it because although I have been to many conferences, meetups and seminars, I have actually never done a talk before.    

After some thought, I decided to make the talk a workshop in order to increase the interactivity.  Knowing it would be a relatively small group, this made more sense to me.  The workshop was meant to be a gentle introduction to the git command-line with the hope of empowering the QA group with knowledge of our git usage.  The workshop lasted about an hour and by the end the audience became familiar with the following:    

* Create a new git repositories
* Add and commit files to a repo
* Create and merge branches
* Clone repositories
* Fetch and pull changes

At the end of the talk the QA team thanked me and even asked for a part 2! This ended up being a great exercise, not only because it is a good way to spread knowledge to other coworkers, but it also helped me learn how to articulate some of my own knowledge.

If you are looking for a similar introduction to git or want to give a similar workshop at your company, feel free to grab my [slides](https://github.com/lizlam/talks/blob/master/git-basics-by-grepliz.pdf) and let me know how it goes.
React is awesome!
Tags: react, typescript, javascript, mobx
Published: 2019-04-08 21:56:37

---
title: React is awesome!
published: true
description: Yeah, it is!
tags: react, typescript, javascript, mobx
---

Just wanna say that creating stuff with React is so much fun!
Hooks being an awesome addition!

Currently the following libraries/packages/language-supersets is making it even more fun!

### TypeScript
Like 1-2 years ago, using TypeScript - especially with React (where more developers where using Flow), was like more trouble then what it was worth... Nowadays though, it makes a awesome developer experience and mst popular packages has typings available! Good job Microsoft!

https://github.com/Microsoft/TypeScript

### Mobx
Since the day Mobx was released it's been my goto state handler. The main benefit for me is that it makes the code very readable and easy to understand.

Nowadays, since hooks was released, the [mobx-react-lite](https://github.com/mobxjs/mobx-react-lite) library is a great addition!

https://github.com/mobxjs/mobx

### Styled Components
I just love creating my styled components instead of using style-objects. Makes the render functions really nice and readable!

https://github.com/styled-components/styled-components

### Formik
Forms in React has been troublesome... But no more!

https://github.com/jaredpalmer/formik

### Prettier / eslint
I'm using prettier to format the code on save! Never do I need to think about how to format nor indent my code. Eslint is a great addition to warn me about other "bad code". Make sure they don't conflict with eachother with [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)

https://github.com/prettier/prettier
https://github.com/eslint/eslint

### react-test-library
If I where about to test my React code, I would be doing it with react-test-library 😂

https://github.com/kentcdodds/react-testing-library


\<end-of-react-love\>
How to resolve deep json object in Dart
Tags: dart, json, flutter, resolve
Published: 2019-04-08 21:50:52

---
title: How to resolve deep json object in Dart
published: true
description: 
tags: dart,json,flutter,resolve
---

If we are not on the edge with GRPC and Protocol Buffer, then most likely we are going to deal with Restful and JSON. In one of my [Flutter](https://speakerdeck.com/onmyway133/getting-started-with-flutter) apps I needed to consume JSON

## JSON and serialization
The guide at https://flutter.dev/docs/development/data-and-backend/json is definitely the way to go.

Currently there are 2 ways. One is to manually use `dart:convert` package 

```dart
Map<String, dynamic> user = jsonDecode(jsonString);
```

The other way is to use [json_serializable](https://pub.dartlang.org/packages/json_serializable) to generate parsing code

```dart
import 'package:json_annotation/json_annotation.dart';

/// This allows the `User` class to access private members in
/// the generated file. The value for this is *.g.dart, where
/// the star denotes the source file name.
part 'user.g.dart';

/// An annotation for the code generator to know that this class needs the
/// JSON serialization logic to be generated.
@JsonSerializable()

class User {
  User(this.name, this.email);

  String name;
  String email;

  /// A necessary factory constructor for creating a new User instance
  /// from a map. Pass the map to the generated `_$UserFromJson()` constructor.
  /// The constructor is named after the source class, in this case User.
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);

  /// `toJson` is the convention for a class to declare support for serialization
  /// to JSON. The implementation simply calls the private, generated
  /// helper method `_$UserToJson`.
  Map<String, dynamic> toJson() => _$UserToJson(this);
}
```

## json_resolve
The problem with manual approach is that it involves lot of boilerplate code, especially when accessing property inside deeply nested json. The problem with code generation approach is that it does not always fit our need and may lack of customization.

Therefore I created [json_resolve](https://github.com/onmyway133/json_resolve) which allows us to access json using keypath, with type checking and safety in mind. The code is small, simple to reason and tested.

```dart
final String byProperty = resolve(json: json, path: "movie", defaultValue: "error");
expect(byProperty, "isFun");

final int byInt = resolve(json: json, path: "earth", defaultValue: 0);
expect(byInt, 199999);

final String byIndex = resolve(json: json, path: "dc.2.name", defaultValue: "error");
expect(byIndex, "Wonder Woman");

final String byIndexThenProperty = resolve(json: json, path: "marvel.0.appear.1.title", defaultValue: "error");
expect(byIndexThenProperty, "The Dark World");
```

Original post https://github.com/onmyway133/blog/issues/198