teleren/devto huggingface dataset:
VS Code Tweet  - A Twitter client one click away at VS CODE sidebar.
Tags: vscode, extension, general
Published: 2019-02-21 16:24:36

---
title: VS Code Tweet  - A Twitter client one click away at VS CODE sidebar.
published: true
description: A Twitter client one click away at VS CODE sidebar
tags: vscode, extension, general
---


![VS CODE Tweet Demo](https://thepracticaldev.s3.amazonaws.com/i/0phb77y910m6ts7m0as2.png)


I just released VS Code Tweet - A Twitter client one click away at VS CODE sidebar⚡. Code, Tweet, and loop. 😂🤣
No more switching of windows while coding and trying to tweet, do it inside VS CODE🔥.


Get from VS Code market place
https://marketplace.visualstudio.com/items?itemName=ahkohd.vscode-tweet


Full walkthrough on how to setup
https://medium.com/@victoraremu/tweeting-from-your-favorite-text-editor-uhh-vs-code-tweet-94ad484fd7a5

Git Hub Repo
https://github.com/ahkohd/vscode-tweet
My first rails scaffold
Tags: beginners, rails, showdev
Published: 2019-02-21 15:26:48

---
title: My first rails scaffold
published: true
cover_image: https://images.unsplash.com/photo-1493626534034-6adc83436933?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60
description: There was one thing I wanted to do though, I really wanted to understand how scaffold worked.

tags: beginners, rails, showdev
---

I finished my [first app](https://saralkarki.herokuapp.com) last week. This app basically is my personal blog. I hope to maintain and add features to it in the days to come. Today though, I started with a new project - a todo list. The first thing I did for this project was `rails g scaffold todo_list title:string description:text`. And with it, I had used the scaffold for the first time. There was one thing I wanted to do though, I really wanted to understand how the scaffold worked.

Here's my understanding of how the scaffold works. Upon creating the new scaffold with the above command, it did a couple of things for me.

1. It generated the routes for me in the `routes.rb` file in the config folder. Viewing the `routes.rb` file in my editor, I could see `resources :todo_list` on the file. 

2. It generated a model TodoList and once after migrating the database via 'rails db:migrate` the database was ready to be used.  The model had a title and description because I had set those two parameters when creating the scaffold. 

3. Scaffold also generated all the controllers for the CRUD methods. Meaning from the get-go I would be able to perform create, read, update and deletion of entries.

4. Finally, all the views were generated, and the views had a form with title and description. Also since the controllers had already defined the CRUD methods, I was able to create, delete, edit and see my entries. 

It was that easy. My entire last week's work summarised by one syntax. 😵😵😵😵

Still, last week was a great learning experience for me building everything from scratch, and this week as I delve into the scaffold generated code, I will really read between the lines of codes and understand what it does.
High Stakes Poker
Tags: testing, javascript, codeconfidence
Published: 2019-02-21 15:11:36

---
title: High Stakes Poker
published: true
description: 
tags: testing, javascript, code confidence
canonical_url: http://brettcassette.com/high-stakes-poker
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vae2ymzu44khw4062s9o.jpg
---

*This article is part of my [Testing from First Principles series](brettcassette.com). If you enjoyed this series, stay tuned for practical testing advice on my Cypress End-To-End Testing course on [egghead.io](https://egghead.io)*

If you're always playing poker for very high stakes, sometimes you're gonna get burned for very high stakes.

Especially when you're trying something new (like launching new code), doesn't it make sense to play for lower stakes?

![Worst Case Scenario](http://brettcassette.com/static/18ed1ad1e2a54298a3c05504c86aa86f/27660/worst_case-01.webp)

If the worst case scenario for your code is: "no customers can checkout all day," then we can use modern tools like [A/B test groups](https://github.com/Alephbet/alephbet) to make sure your code was only released to 1% of customers, drastically reducing our risk. Now your worst case scenario is reduced to "1% of users couldn't check out all day."

But how can we get alerted earlier, so our outage isn't all day long? With dashboard tools like AppOptics or Amplitude, and automated alerts from the likes of PagerDuty or Pingdom, we can detect anomalous behavior sooner, as long as we define in advance what our metrics are.

When an anomaly is detected, we can rely on our [feature flipper library of choice](https://featureflags.io/javascript-feature-flags/) to turn off the code path for everyone. Maybe we've reduced our outage from "No one could check out all day" to "1% of users couldn't check out for 1 minute."

A much better scenario.

Testing is just one of the ways we can feel confident about our code. The more we can decrease our maximum risk, the less we stand to lose. Think of it like portfolio diversification.

**I think it's important that we start out by giving ourselves the lowest possible stakes**--the least worst case scenario to start from before we even begin evaluating the value of testing. Why would you want every deploy to potentially risk losing the company a bunch of money?

Before you even begin testing, remember to weigh what's at stake, and consider what alternative approaches you can use to mitigate your risk. When testing is essential for code confidence, [make sure your tests aren't providing a false sense of security](http://www.brettcassette.com/false-sense-of-security)

*This article is part of my [Testing from First Principles series](brettcassette.com). If you enjoyed this series, stay tuned for practical testing advice on my Cypress End-To-End Testing course on [egghead.io](https://egghead.io)*
How to fix popup's scrolling on Safari
Tags: safari, javascript, html, webkit
Published: 2019-02-21 12:40:22

---
title: How to fix popup's scrolling on Safari
published: true
description: Today, I created a fancy popup, well just a normal one, to open overlay with a simple register form. Suddenly, someone with iPhone shouted, "Hey, that is not working on my iPhone!"
tags: safari, javascript, html, webkit
---

Today, I created a fancy popup, well just a normal one, to open a overlay with a simple register form. Suddenly, someone with iPhone shouted, "Hey, that is not working on my iPhone!"

Not working? When I look at his screen, it is iPhone with Safari. Obviously, the scroll did not only scroll the popup, but also the HTML body!

## Situation
I am an Android user, so I can only check with my Android phone. The popup looks fine on IE, Chrome, Firefox in desktop and Chrome/Firefox in Android. 

Here the headache comes, the scroll does not work on Safari. Only Safari! Of course, you cannot reproduce this behavior on Windows or Android.

My HTML markdown is like this:

```html
<body class="no-scroll">
    <div class="overlay hide">
        <div class="popup" id="popup">
            <!-- Lots of contents here -->
        </div>
    </div>
</body>
```

and my CSS is like this: 
```css
.c-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(25, 25, 25, 0.4);
    transition: ease 300ms;
    z-index: 1030;
}

.popup {
    position: relative;
    width: 100%
    height: 100%;
    max-width: 800px;
}

.no-scroll {
    overflow: hidden !important;
}
```

Looks normal. Finally, after trial and errors, I know that this is [exclusive behavior of Safari](https://bugs.webkit.org/show_bug.cgi?id=153852), or WebKit browser.

---

## First Try: add webkit specific css

First, I tried to add this to `.popup` and body:

```css
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
```

It doesn't work, the body is keep scrolling! But this CSS does add momentum scrolling to my page in Safari.

---

## Second Try: add tag on body

Some comments said they fixed it by adding this tag to body. Not working in my case. The body keeps scrolling, scrolling and scrolling.

```html
<body class="no-scroll" ontouchstart="">
```
---

## Final Answer: body-scroll-lock

I found this package from [Stackoverflow](https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi), it seems to have workarounds for Safari, to stop the strange behavior while touchstart and touchmove.

Paste the minimized JavaScript tag to HTML and: 

```javascript
const targetElement = document.getElementById("popup"); //only popup can scroll

//put this when popup opens, to stop body scrolling
bodyScrollLock.disableBodyScroll(targetElement);

//put this when close popup and show scrollbar in body
bodyScrollLock.enableBodyScroll(targetElement);
```

It finally fixes my problem! Everyone is happy.

Hard to test on Safari as an Android user, but it is good to recognize this problem. Hope this guide can help someone in need. :)
5 Podcasts I love
Tags: webdev, testing, podcast, meta
Published: 2019-02-21 13:37:50

---
title: 5 Podcasts I love
published: true
description: A collection of 5 Podcasts I love and you will to
tags: webdev, testing, podcast, meta
---

I work remotely, most of the time alone in my Home Office. This presents a problem, the house is too quiet! and an opportunity: Consume Awesome Podcasts!

These are just 5 of the Podcasts I love, and I hope you to do.

[Test Talks](https://www.joecolantonio.com/testtalks/ "Automation Awesomeness")
I love that Test talks has a razor sharp focus on Test Automation. Well produced and easy to follow, this Podcast comes highly recommended.

[CodeNewbie](https://www.codenewbie.org/podcast "Stories from people on their coding journey.")
One of my all time favourite Podcasts, Saron his hilarious and gets the best out of her guests. The focus here is all about exploring peoples coding journeys.

[base cs](https://www.codenewbie.org/basecs "CodeNewbie is teaming up with the incredible Vaidehi Joshi to turn her base.cs blog series into an awesome podcast.")
Base on the [base.cs](https://medium.com/basecs) blog series, Saron and Vaidehi cover some classic Computer Science topics in a very consumable way. I always learn something with this one!

[< .NET Rocks! />](https://www.dotnetrocks.com ".NET ROCKS PODCAST")
A very up beat and content rich Podcast, the focus here is on developments in the world of .NET

[THIS WEEK IN TECH](https://twit.tv/shows/this-week-in-tech "THIS WEEK IN TECH")
This is my pick went I want to go broad and listen to news from all around the technology industry. There isn't much in here directly about software development, but it's nice catch up on the wider world of Tech!
How can I build a visuals heavy app with very little front end experience?
Tags: discuss
Published: 2019-02-21 12:01:54

---
title: How can I build a visuals heavy app with very little front end experience?
published: true
description: 
tags: discuss
---

I need to prototype a "visuals" heavy app, where the user interacts with sprites etc. very much like a game. Problem is I have very little experience in front end coding so things like programming webGL is a no-go. Any suggestions for tools to build the app, maybe graphical tool?
What Are You Going To Do When AI Steals Your Job?
Tags: discuss
Published: 2019-02-21 11:54:39

---
title: What Are You Going To Do When AI Steals Your Job?
published: true
tags: discuss
---

I am reliably informed that one day soon, programmers will be obsolete. All the hard work you've put in will be for nil, as people with big ideas (Instagram for podiatrists) will be able to dictate their required features into an app and, through The Power Of AI, out comes the finished product. No programmer required. Sorry. Bye.

For the programmers here: what would you be doing if writing code was no longer an option? I think I'd like to work outdoors.
I developed "Taxigola" a Flutter app for implementing "Login UI" UI/UX design by anonymous
Tags: flutter, ui, ux, app
Published: 2019-02-21 10:04:34

---
title: I developed "Taxigola" a Flutter app for implementing "Login UI" UI/UX design by anonymous
published: true
description: This Flutter app is part of a collection of apps that I developed with the purpose of mastering the necessary skills for implementing custom UI/UX designs in Android and iOS.
tags: #flutter #ui #ux #app
---

This app is part of a collection of apps that I developed in Flutter with the purpose of mastering the necessary skills for implementing custom UI/UX designs in Android and iOS.

You can find the entire collection of apps in [this blog post](https://dev.to/crivasgomez/flutter-uiux-design-implementations-518i) and all the source code in [this GitHub repository](https://github.com/CRivasGomez/flutter-ui-ux-designs).

## Taxigola

### [Original design](https://www.uplabs.com/posts/login-ui-8357f9ec-e05d-47b2-8902-f4229c307e8f) by anonymous:

![Original design](https://thepracticaldev.s3.amazonaws.com/i/ue8ti2domlw1nce30tq5.png)

### iOS demo:

![iOS demo](https://thepracticaldev.s3.amazonaws.com/i/152k51bj2sgqcay8429u.gif)

### Android demo:

![Android demo](https://thepracticaldev.s3.amazonaws.com/i/8a44jusrvjyz0flqhty1.gif)
What to test in your Solidity smart contract?
Tags: solidity, ethereum, smartcontract, blockchain
Published: 2019-02-21 10:01:06

---
title: What to test in your Solidity smart contract?
published: true
description: 
tags: Solidity, Ethereum, smart contract, blockchain
---

Once you have decided to test your smart contract, one of the first question that comes to mind is:

"WHAT THE HELL SHOULD I TEST???"

That's a very important question! If you can't even answer this question, you risk focusing on the wrong things.

In [this video](https://youtu.be/UBE-EiHaNTg) I will explain you what to test in your Solidity smart contracts.

This is part of a full course on Solidity smart contract testing, where I teach how to develop smart contract with the TDD (test-driven-development approach), using the Truffle framework.
https://eattheblocks-pro.teachable.com/p/smart-contract-testing
How to export all the URLS Analytics as CSV with iMacro and Firefox
Tags: firefox, analytics
Published: 2019-02-27 09:11:25

---
title: How to export all the URLS Analytics as CSV with iMacro and Firefox
published: true
tags: Firefox, analytics
canonical_url: https://daniele.tech/2019/02/how-to-export-all-the-urls-analytics-as-csv-with-imacro-and-firefox/
---

A little automatism to download in a bulk way all the URLs from Google Analytics without use their API or other services.

The post [How to export all the URLS Analytics as CSV with iMacro and Firefox](https://daniele.tech/2019/02/how-to-export-all-the-urls-analytics-as-csv-with-imacro-and-firefox/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Javascript events
Tags: javascript, discuss, question, optimization
Published: 2019-02-21 09:47:52

---
title: Javascript events 
published: true
description: Optimal way to catch events from items where we want to catch events within that item as well
tags: javascript, discussion, question, optimization
---

Working on a message system, i want to catch all the events that happen on the message element, or its children. Would this be the most optimal way of doing this?

I can also add a `pointer-events: none` through CSS on all the child elements. But that doesn't feel like a good scalable way to go. 

```javascript
document.addEventListener('click', function(event) {
    for (var i = 0; i < event.path.length; i++) {
        if (event.path[i].classList && event.path[i].classList.contains('message'))         
        {
            doThings();
            break;
        }
   }
});
```
CSS custom properties - Cheatsheet
Tags: css, csscustomsproperties, cssvariables
Published: 2019-02-21 09:08:44

---
title: CSS custom properties - Cheatsheet
published: true
description: Some basic use cases of CSS customs properties
cover_image: https://thepracticaldev.s3.amazonaws.com/i/oce32jtva2y47lhjy4co.png
tags: css, CSS customs properties, css variables
canonical_url: https://vinceumo.github.io/devNotes/css/2019/02/20/css-customs-properties.html 
---

This note was originally posted on my [DevNotes](https://vinceumo.github.io/devNotes/css/2019/02/20/css-customs-properties.html )

---

CSS custom properties, also known as CSS variables. represent custom properties that can be declared and be called in your CSS.

## Declare a custom property in CSS

To declare a custom property in your CSS, you need to use the `--` syntax:

```css
:root {
  --colorPrimary: hsla(360, 100%, 74%, 0.6);
}
```

Notice the `:root` pseudo-class selector, we can declare our variables globally using it. We can as well declare them using other selectors, they will be then be scoped in these ones.

```css
.theme-dark {
  --colorPrimary: hsla(360, 100%, 24%, 0.6);
}
```

## Use a custom property in CSS

To use a CSS custom property in your CSS you can use the `var()` function

```css
:root {
  --colorPrimary: tomato;
}

.theme-dark {
  --colorPrimary: lime;
}

body {
  background-color: var(--colorPrimary);
}
```

In this case, `body` will have a background colour of `tomato`. But `body.theme-dark` of `lime`.

## Use custom properties without units

CSS custom properties can be declared without units if they are used with the `calc()` function.

```css
:root {
  --spacing: 2;
}

.container {
  padding: var(--spacing) px; /*Doesn't Work 😫*/
  padding: calc(var(--spacing) * 1rem); /*Will output 2rem 😃*/
}
```

## Use custom properties with JavaScript

To get a custom property we can use the following:

```js
getComputedStyle(element).getPropertyValue("--my-var");

// Or if inline
element.style.getPropertyValue("--my-var");
```

To update the custom property value:

```js
element.style.setProperty("--my-var", newVal);
```

### Example of getting and replacing values:

In the following example, we use the [dat.gui controller library](https://workshop.chromeexperiments.com/examples/gui/) to change the value of `--scenePerspective`, `--cubeRotateY`, `--cubeRotateX` custom properties. This method makes it easier to apply a new style, as do not have to apply inline style on each Dom elements.

{% codepen https://codepen.io/vinceumo/pen/jdJLge %}

## Resources

* [Defining Custom Properties: the --* family of properties](https://drafts.csswg.org/css-variables/#defining-variables)
* [Custom properties: CSS variables - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
* [var() - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
* [Using CSS custom properties (variables) - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)

---

- [@vince_umo](https://twitter.com/vince_umo)
- [vincent-humeau.com](http://vincent-humeau.com/)
Realtime GraphQL API on Azure with Hasura and Azure Database for PostgreSQL
Tags: azure, graphql, postgres, webdev
Published: 2019-12-23 09:15:08

---
title: Realtime GraphQL API on Azure with Hasura and Azure Database for PostgreSQL
published: true
date: 2019-02-21 08:53:28 UTC
tags: azure, graphql, postgres, webdev
canonical_url: https://blog.hasura.io/use-graphql-with-hasura-and-azure-database-for-postgresql/
---

![](https://blog.hasura.io/content/images/2019/02/azure-graphql-white-4.png)

We recently published a [guide](https://docs.hasura.io/1.0/graphql/manual/guides/deployment/azure-container-instances-postgres.html) along with a Resource Manager template to deploy Hasura on Azure backed by Azure Database for [PostgreSQL](https://hasura.io/learn/database/postgresql/introduction/) and Azure Container Instances. This can be used with an existing database or a new one that is automatically provisioned.

Just click the button below to get started with the Hasura GraphQL Engine on Azure with Azure Database for PostgreSQL _(the button takes you to the Azure Portal)_.

[![](https://graphql-engine-cdn.hasura.io/img/azuredeploybutton.png)](https://portal.azure.com/#create/Microsoft.Template/uri/https%3a%2f%2fraw.githubusercontent.com%2fhasura%2fgraphql-engine%2fmaster%2finstall-manifests%2fazure-container-with-pg%2fazuredeploy.json)

Read more about the integration on the [Azure Blog](https://azure.microsoft.com/en-us/blog/use-graphql-with-hasura-and-azure-database-for-postgresql/).
Craft CMS E-Commerce: Why and How Matt Stein Built a Snipcart Plugin
Tags: webdev, ecommerce
Published: 2019-03-07 18:32:09

---
title: Craft CMS E-Commerce: Why and How Matt Stein Built a Snipcart Plugin
published: true
tags: web development, ecommerce
canonical_url: https://snipcart.com/blog/craft-cms-ecommerce-plugin
---

![Craft CMS E-Commerce: Why and How I Built a Snipcart Plugin](https://snipcart.com/media/204110/craft-cms-snipcart.png)

Let’s be honest. If you’re in the market for a [CMS for e-commerce](https://snipcart.com/blog/why-e-commerce-and-cms-should-be-separated), you’ve got plenty of options.  
  
Back in the days of iPods and flip phones, you’d be choosing between Drupal or WordPress—and even those were nothing compared to what they are now.  
  
So as a modern day developer, I did plenty of research into which CMS I wanted to use for clients and finally settled on Craft. 

In this article, I’ll talk about:

-   Craft CMS and why it appeals to me
    
-   Where Snipcart fits into the world of Craft e-Commerce
    
-   Setting up and configuring the Snipcart plugin in your Craft site
    
-   How I built my Snipcart plugin in the first place

  

→ Read the full post [here](https://snipcart.com/blog/craft-cms-ecommerce-plugin)
The Easiest Way to Get an E-Commerce Site Running in Umbraco
Tags: webdev, beginners, dotnet, showdev
Published: 2019-02-21 15:40:48

---
title: The Easiest Way to Get an E-Commerce Site Running in Umbraco
published: true
tags: webdev, beginners, dotnet, showdev
canonical_url: https://snipcart.com/blog/umbraco-ecommerce-theme
---

![The Easiest Way to Get an E-Commerce Site Running in Umbraco](https://snipcart.com/media/204088/merch-umbraco-ecommerce-theme.jpeg)

> Editors’ note: this is a guest post from the nice folks at uSkinned. The Snipcart-powered theme they’ve built is truly neat and one of the best integrations of our product we’ve seen. We’re offering 3 months of free Snipcart usage to all uSkinned customers who purchase [the Merch theme](https://uskinned.net/themes/merch/)! I’m passing the mic to Paul now.

I love Umbraco.

I’ve felt this way for a long time now. 

I firmly believe that making it a more recognizable and popular content management system is a benefit for the dev community. 

That’s why my partner Marc and I launched [uSkinned](https://uskinned.net/) four years ago. Since then, we’ve sold Umbraco themes to thousands of users across 77 countries.

However, it’s only lately that we’ve focused our attention on an important piece that we thought hadn’t been optimized yet with Umbraco: **e-commerce**.

But I won’t spoil with the solution we came up with just yet.

First, I want to quickly go through why I think Umbraco is so great and what it has to offer for e-commerce projects. It will help shed more light on the missing pieces that inspired our work.

Shall we?

  

→ Read the full post [here](https://snipcart.com/blog/umbraco-ecommerce-theme)
MySigMail release 1.6.0
Tags: vue, githunt, opensource
Published: 2019-02-21 08:17:39

---
title: MySigMail release 1.6.0
published: true
description: MySigMail release 1.6.0
tags: vue, githunt, opensource
---

Hi here!

MySigMail just released to 1.6.0
There is a small features:

1. Crop image tool
2. Mobile app badges

![](https://thepracticaldev.s3.amazonaws.com/i/wst2qg271kejf2lfzcb9.gif)

Cool & free signatures for all!

https://github.com/antonreshetov/mysigmail