teleren/devto huggingface dataset:
Why are we moving away from the Transform connector (Liquid Templates) in Azure Logic Apps?
Tags: azure, liquidtemplates, dotliquid, logicapps
Published: 2019-08-29 04:08:21

#TLDR

We are working on a project that requires us to regularly transform data from one shape to another for our integrations. We decided liquid templates in the Transform connector in Logic Apps/integration accounts seemed like a reasonable solution. We quickly found out the developer experience is terrible.

Be careful, Liquid template syntax in Azure Logic Apps Transform connector varies between the tooling in VS Code. While your transform may work in VS Code, you will often find it doesn't work as expected in Azure. 
 

#What did we run into?

The extensions available in VS Code are built on a ruby flavor of liquid templates while the Transform connector is using DotLiquid version 2.0.254 (as of March 11, 2019). There are differences in syntax and capabilities.

- https://github.com/dotliquid/dotliquid/wiki/DotLiquid-for-Designers

- You'll find that there are more features available in the ruby flavor that don't exist in DotLiquid
- Where did I get that 2.0.254 version? Straight from a response from the Microsoft support team. The problem is that is does not correlate to any release on DotLiquid's Github repo.
 - https://github.com/dotliquid/dotliquid/releases 
  - Update: I reached out to the top contributor of DotLiquid and he informed me they havent used github releases in quite a while. That version correlates to the nuget version.

#What did our development/deployment process look like?

- Download VSCode and install Shopify Liquid Preview
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l2j9lnib3hukwdsq9ygn.png)
- Create a repo
- Branch
- Create a transform.liquid and transform.liquid.json and start writing transforms! A great developer experience so far.
- CTL+SHIFT+P to preview your transform against your sample data in your .liquid.json
- Commit the template and and create a PR
- Once your PR makes it to master, upload to development azure environment, run your logic app and start feeling the pain
- If you run into problems, dig into DotLiquid source code and find the feature doesn't exist or the syntax is different
 - https://github.com/dotliquid/dotliquid
- Create another "azure" version of your template and try to keep the two in sync
- Cry on the inside

#Questions for you
- Is anyone else feeling the pain of the transform connector in Logic Apps? If so, what kind of tools have you discovered to improve developer productivity?

#Proposal for Microsoft
- Create a DotLiquid Preview extension that aligns to the version of DotLiquid used in the transform connector
- Deploy a new Map type to integration accounts (i.e. Liquid-Ruby) and change the configuration property `Liquid.UseRubyDateFormat = true;`
- Open source the Transform connector so we can make modifications and extend the capabilities

##Side Notes

This is my first blog post ever. I'm interested to hear your feedback on how I can improve. Any and all feedback is welcome.
Firebase CRUD
Tags: opensource, firebase, crud, bootstrap
Published: 2019-08-29 03:20:03

This is my first time to post here in dev.to since I joined to this awesome community, I spend most of my free time here instead of browsing in Facebook and it help me learn many things.


I created a dead simple CRUD operation using Bootstrap and Firebase, which you can find here

LINK
https://github.com/johndavemanuel/firebase-firestore-crud

DEMO
https://johndavemanuel.github.io/firebase-firestore-crud/


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qszkhmljs6sadzr7l6r3.png)

It is working fine as usual like

1. Creating new data
2. Reading data from server and update it whenever an action happens
3. Editing existing data
4. Deleting data
5. Multiple delete of data

I an new to firebase and I am planning to add 

1. keyword search
2. pagination (next and previous)


Any pull request or help will be appreciated.
Convert Numbers to Letters JavaScript 
Tags: javascript
Published: 2019-08-29 02:45:24

<h3>Convert a letter to a number and vice-versa.</h3>

<h2>tl,dr:</h2>
<a href="http://sticksandstones.kstrom.com/appen.html">ASCII Table</a>
<h4>Number to letter:</h4>
<code>let findNum = 22;</code>
<code>let num = String.fromCharCode(97 + findNum)</code>
<code>console.log(num)</code>
<code>> w</code>
<h4>Letter to number:</h4>
<code>let uni = 'y'.charCodeAt(0)</code>
<code>console.log(uni)</code>
<code>> 121</code>

Basis of solution: ASCII and String prototype and its methods.
<b>What does ASCII stand for?</b>
<i>American Standard Code for Information Interchange:</i> Basically, symbols we use on a computer that are mapped to a number. For example:
<code>ASCII CODE 97 :  a</code>
<code>ASCII CODE 98 :  b</code>
<code>ASCII CODE 99 :  c</code>
<code>ASCII CODE 110 : n</code>
<i>etc, etc, etc...</i>
<b>How do we use it in JavaScript?</b>
String prototype and the fromCharCode() method on the prototype.
<code>fromCharCode()</code> i.e. "from character code" with <code>String</code> = "Convert this number, from the character code I am providing you, into a letter." 
Because our alphabet in the ASCII table starts at 97 our charCode = 97 + "number we provide" for our cases, between 97-122, a-z. 
<code>let findNum = 22;</code>
<code>let num = String.fromCharCode(97 + findNum)</code>
<code>console.log(num)</code>
<code>> w</code>
<b>Convert Letter to Number</b>
<i>Sidenote: ASCII is a part of the Unicode standard. Unicode is a massive list of thousands of symbol maps, and ASCII is included within the Unicode system(first grader explanation; sorry in advance for offending really smart first-graders).</i>
So if we have the letter 'y'.
<code>let uni = 'y'.charCodeAt(0)</code>0 being the index of the character of the string of which we want.
<code>console.log(uni)</code>
<code>>121</code>
And that's it - Thanks for reading! Comments very very welcome, lots to learn here!
Let's Display The Response From API Beautifully
Tags: javascript, typescript, productivity, node
Published: 2019-08-29 02:17:52

Probably you have used `console.log` to display data from API.

```ts
import fetch from "node-fetch";

const getDevToData = async() => {
    try {
      const url = "https://dev.to/api/articles";
      const resp = await fetch(url);
      const data = await resp.json();      
      console.log(data[0]); // In this post i just need to check one
    } catch(err) {
        console.log(err);
    }
}

const devData = getDevToData();
```

Maybe we need to add like the below.

```ts
console.log(`id: ${data[0].id}`);
console.log(`title: ${data[0].title}`);
```

But sometimes we need the entire response which should be readable for us(human). The following small function helps us.

#### ts
```ts
const printObj = (obj:any) => {
  console.log(JSON.stringify(obj, null, 4));
}
```

#### js
```js
const printObj = (obj) => {
  console.log(JSON.stringify(obj, null, 4));
}
```


The screenshot is using Chrome to use TypeScript playground since I'm lazy and don't want to create a project for the following code.
But if you use Nodejs, you will see the difference easily and will like this small function. Actually, this really helps me lol

The number is for `indent`. I'm using 2 for coding, but still, prefer `4` for JSON.  

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x1yvngx4pu8prpjti1nm.png)

By the way, I used dev.to API for this post.

### dev.to api
https://docs.dev.to/api/#section/Authentication

### [TypeScript playground](http://www.typescriptlang.org/play/#code/FDDGHsDsGcBcAIAOAnAlpWB5ARgK3gLzwAU4eAXAIaQCeAlIQHzwDew88EM4ANgKYA6HuADmxAFIBlTADkBcNJBGoAZjVJ4ANPEgBXHj20AWOnQDcwAL4guceCL6wAInwBuAFXBPKsSoXiU0DSQoMQMBMxsHBywyDSs7NEctgi6yDz+AEQAFrCwiNDkAPRFACZuArDgRZSIqDXIsKig-NCZFknJUHbIfNCI-pQA7pSoCCqOoNnEaTzmiUkp8KU+fkTDowi9-QK40FBhHZ0L0ba8gsJiK74A2gAMALrznZzd50KixJkA1L9--wDAb9Ms9Oih0Fg8MRrpR7k8jkkTpZOD4psQ+MhkAwoi9Xtx+B8xBisQj4NZrGBughyq5vL5-A5nG5PHTKIcgA)
Forms Are Hard
Tags: webdev, javascript, react, graphql
Published: 2019-08-29 02:06:22

TLDR; Need forms in your app? There are many options. Our journey to [ShapeForm](https://github.com/takeshape/shape-form)!

{% youtube iplY8Le1zK0 %}

It’s no secret that forms are hard. They cause a great deal of frustration and confusion for developers. However, the other thing that’s no secret is forms are super important to get right for your particular use case. Forms are so ubiquitous that essentially every framework, from Django to Rails to .NET to React, has its own form implementation. React even lists forms as one of the top 10 concepts to grok in their docs!

There are many libraries for building forms. If you search npm for “forms” you’ll get back thousands or results. But how do you know which to use? Should you roll your own? In our journey to find the perfect form library we tried a handful of the top options.

For our forms we needed comprehensive validation, customizable form configuration, and serializability. From `redux-form` to `@hapi/joi` to both of them together to JSON schemas to `react-jsonschema-form`. Each library had their strengths and killer features, but no single option had it all … so in the end we rolled our own.

ShapeForm builds on everything we learned from using and testing the form libraries previously mentioned. We use ShapeForm extensively in TakeShape’s react web client. Here are the features we find super useful:

💪 JSON Schema validation - Easily share the same form validation frontend and backend

⚡️ Fast - Pure components for fast rendering even with large forms

🗃 Redux / Standalone state management - Choose your own adventure

💅 Custom widgets - Widgets are simply React components

🚀 Form reducers - Useful for async validation, data normalization, the sky's the limit.

👯‍♀️ Multi-Part Forms - Multiple form components can edit the same form data. Useful for complex layouts or multi-step forms.

In TakeShape’s web client, nearly everything is a form. This includes our content modeling, content editing, metadata, and login functionality. We have gotten so much use out of ShapeForm that we wanted to give it back to the community. First announced at the [8/20 Reactadephia Meetup](https://www.meetup.com/Reactadelphia/events/263614474/) this code has been freshly ripped from our [React App](https://app.takeshape.io/) and open sourced as [ShapeForm](https://github.com/takeshape/shape-form).

If you like it and it works for you, great! If you don’t or it doesn’t, help us make ShapeForm better - we know you’ll think of something we haven’t.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2a3mxng4vtoivswnv1in.png)
QUESTION: How to make sure dev.to posts SEO will NOT be above original content?
Published: 2019-08-29 01:28:42

---
title: QUESTION: How to make sure dev.to posts SEO will NOT be above original content?
published: true
description: 
tags: 
---

I have noticed that several of my submissions here have a better SEO that the original article mentioned in the post, for the same keyword. That really turns me off to post more stuff here :( Is there a way to avoid this?
Building a regex learn-by-examples web application
Tags: regex, javascript, php
Published: 2019-08-29 01:12:24

I'm building a regex "commonly used" library which includes an explanation for each of the expressions. 

I did not find a good alternative other than this ancient-looking website: http://regexlib.com/

Dumb me did not realize until the halfway completion of the application that there are multiple flavors for regex.
I can only show examples and process js expressions. Should I ditch the idea? or complete it even if it's shitty?
MRO
Tags: python, tip
Published: 2019-08-29 01:09:03


```python

class Base:
    def __init__(self):
        print('Base.__init__')

class Child1(Base):
    def __init__(self):
        Base.__init__(self)
        print('Child1.__init__')

class Child2(Base):
    def __init__(self):
        Base.__init__(self)
        print('Child2.__init__')

class Child3(Base):
    def __init__(self):
        Child1.__init__(self)
        Child2.__init__(self)
        print('Child3.__init__')


c3 = Child3()


```
check print output is this what you expected !
`Base.__init__
Child1.__init__
Base.__init__
Child2.__init__
Child3.__init__`

and now try this

```python
class Base:
    def __init__(self):
        print('Base.__init__')

class Child1(Base):
    def __init__(self):
        super().__init__()
        print('Child1.__init__')

class Child2(Base):
    def __init__(self):
        super().__init__()
        print('Child2.__init__')

class Child3(Child1, Child2):
    def __init__(self):
        super().__init__()
        print('Child3.__init__')


c3 = Child3()
print(Child3.__mro__)
```
`(<class '__main__.Child3'>, <class '__main__.Child1'>, <class '__main__.Child2'>, <class '__main__.Base'>, <class 'object'>)`
UnityでOculus向けの環境で壊れたOVRHeadsetEmulatorを直す
Tags: unity3d, oculusrift, oculusgo, oculusquest
Published: 2019-08-28 18:58:00

---
title: UnityでOculus向けの環境で壊れたOVRHeadsetEmulatorを直す
published: true
tags: Unity, OculusRift, OculusGo, OculusQuest
date: 20190828T18:58Z
canonical_url: https://qiita.com/shiena/items/ed96bb1ec14d45ae38c4
---
# はじめに

UnityのOculus Integrationはエディタ上でカメラの動きをエミュレートできる`OVRHeadsetEmulator`があります。

![image.png](https://dev-to-uploads.s3.amazonaws.com/i/grz5hvcighfd7fsx2kva.png)


- https://developer.oculus.com/documentation/unity/latest/concepts/unity-hmd-emulation/
- https://qiita.com/numa08/items/8f67026b59f8b72174a3

このコンポーネントは`OVRCameraRig.prefab`と`OVRPlayerController.prefab`にアタッチされているのですぐに使えるのですがv1.38とv1.39でOpenVRがサポートされた時に動かなくなってしまいました。せっかくの便利なコンポーネントなので動くように直してみました。
※1.37以前と1.40はそのままで動作します。

## 修正方法

`InitOVRManager()`を実行するかどうかの判定をエディタの時は無視します。これはOpenVRサポート前と同じ挙動です。

```diff
diff --git a/Assets/Oculus/VR/Scripts/OVRManager.cs b/Assets/Oculus/VR/Scripts/OVRManager.cs
index bff7d992..4f6f3d45 100644
--- a/Assets/Oculus/VR/Scripts/OVRManager.cs
+++ b/Assets/Oculus/VR/Scripts/OVRManager.cs
@@ -1294,7 +1294,9 @@ public class OVRManager : MonoBehaviour
        private void Awake()
        {
                //If OVRPlugin is initialized on Awake(), or if the device is OpenVR, OVRManager should be initialized right away.
+#if !UNITY_EDITOR
                if (OVRPlugin.initialized || (Settings.enabled && Settings.loadedDeviceName == OPENVR_UNITY_NAME_STR))
+#endif
                {
                        InitOVRManager();
                }
```

# 別の方法

Oculusのフォーラムにも修正方法があり`OVRPlugin.initialized`を反転して`InitOVRManager()`を実行しています。ですがこのプロパティはドキュメントがなく挙動が分からないので上記のようにエディタの時だけ変更した方が安全です。

- https://forums.oculusvr.com/developer/discussion/comment/700778/#Comment_700778
- http://hondasoft.com/2019/06/25/oculus-integration-1-38%E7%99%BB%E5%A0%B4%EF%BC%81/

```diff
diff --git a/Assets/Oculus/VR/Scripts/OVRManager.cs b/Assets/Oculus/VR/Scripts/OVRManager.cs
index bff7d992..30ee8cde 100644
--- a/Assets/Oculus/VR/Scripts/OVRManager.cs
+++ b/Assets/Oculus/VR/Scripts/OVRManager.cs
@@ -1294,7 +1294,7 @@ public class OVRManager : MonoBehaviour
        private void Awake()
        {
                //If OVRPlugin is initialized on Awake(), or if the device is OpenVR, OVRManager should be initialized right away.
-               if (OVRPlugin.initialized || (Settings.enabled && Settings.loadedDeviceName == OPENVR_UNITY_NAME_STR))
+               if (!OVRPlugin.initialized || (Settings.enabled && Settings.loadedDeviceName == OPENVR_UNITY_NAME_STR))
                {
                        InitOVRManager();
                }
```
Review of UX and design
Tags: webdev, showdev, design, discuss
Published: 2019-08-29 00:34:25

This could turn out to be horrible for me, but I need to ask you all a favour. I have recently deployed a small informational website for Swedish people that are interested in consumer credits.

Could you please take a minute or two of your time and review the design and the user experience of [the website](https://www.svenskasmslan.com/)?

Remember, I am not a professional web developer and have no education in it what so ever. 

When I have gathered the information you comment, I will have it fixed onto the website. All *kinds of comments are appreciated*! 

Thank you!
The #1 Way To Grow Your Personal Brand As A Developer
Tags: beginners, codenewbie, career, webdev
Published: 2019-08-29 00:20:46

---
title: The #1 Way To Grow Your Personal Brand As A Developer
published: true
description: Strong personal brand gives you even stronger job prospects. We discuss your #1 strategy for growing that in this article.
tags: #beginners,#codenewbies,#career,#webdev
series: Mindset tips for anyone learning to code 
---

We've had a lot of messages lately surrounding **how to build your personal brand as a developer**. And a lot of it is down to Adam Barker, who on Episode 5 of our podcast talked about how one of his best hires was someone he found through Instagram.

This seemed crazy to a lot of people, but the truth is, **having a strong personal brand gives you even stronger job prospects** - whether you're writing articles on DEV, posting #100DaysOfCode updates on Twitter and Instagram, or live streaming your code on Twitch - it all adds up.

So when we had Benjamin Ha on the podcast, who is a developer and Instagram growth expert (who has worked with the likes of Kylie Jenner and other larger celebrities), we asked a ton of questions surrounding growing a personal brand over there.

A lot of his advice is actually fairly timeless and can be used across platforms - one strategy however stuck out, and that is

# Engaging with your followers is the _most important_ thing to do when growing a personal brand

And when we vetted the profiles that were messaging us asking us for advice, most were simply not engaging with their following.

*If you engage, you build a real connection.* We call this "Warming Up Your Audience" - they're not used to someone on the other end replying, and when they do, they feel cared about, and a lot will come back and continue to engage and become real fans and consumers of your brand.

# Engage meaningfully - having a copy and paste response doesn't cut it

Really taking the time to think about your responses is key here - people know when you haven't put the time in, and the more contextual your response is, the better your chances of building a real long term connection with the person you're talking to.

# Listen to the full episode for more personal branding strategies from Ben

Ben has tons of timeless personal and business branding advice, and a lot of advice specific to Instagram too. We tried to extract as much of this as possible in this latest episode, so check it out on Spotify or Apple Podcasts if you want to learn more:

{% spotify spotify:episode:2OBMLdRkSNfmOylVIRCDT4 %}
TIL: caption-side controls the position of a table caption
Tags: css, a11y
Published: 2019-09-01 11:16:30

---
title: TIL: caption-side controls the position of a table caption
published: true
tags: css, a11y
canonical_url: https://www.stefanjudis.com/today-i-learned/caption-side-controls-the-position-of-a-table-caption/
---

Today I came across [a tweet by CSS-Tricks](https://twitter.com/css/status/1163538653353861124). It shares the behavior of the CSS property `caption-side`. I've never seen `caption-side` before. 

The property can be used when you're dealing with HTML tables. Tables could potentially include [a `caption` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption). The clue with `caption` elements is that they **have to be the first element in the table**. 

This rule makes them usually appear in the top region of the table and gives no options for a different position.

```html
<table>
  <caption>Populations of cities</caption>
  <thead>
    <tr>
      <th>City</th>
      <th>Population</th>
    </tr>
  </thead>
  <tr>
    <td>Berlin</td>
    <td>1</td>
  </tr>
  <tr>
    <td>New York City</td>
    <td>2</td>
  </tr>
</table>  
```

It turns out that you can use the `caption-side` CSS property to move the position of the `caption` element somewhere else. Values that you can safely use today are unfortunately only `top` and `bottom`. `right`, `left` and a few others are available but not supported cross-browser.

The following lines of CSS can change the position of the `caption` element to the bottom even though it's the first element inside of the table! 🎉

```css
table {
  /* moves the caption to the bottom */
  caption-side: bottom;
}
```

![Visualisation of the caption CSS property including two tables: one with the caption in the top region (caption-side: top) and one with the caption in the bottom region (caption-side: bottom)](//images.ctfassets.net/f20lfrunubsq/2spIrSxYxKPf1yAgxnfjq8/ebc0960919cff2e0aabcdebcb896357e/Screenshot_2019-08-29_at_19.37.11.png)

If you want to read more about the `caption-side` property, head over [to MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side) or [CSS-Tricks](https://css-tricks.com/almanac/properties/c/caption-side/). 

Additionally, if you want to see it in action, you can have a look [at this CodePen](https://codepen.io/stefanjudis/pen/GRKEYmE).
Fullstacking: Setting up NodeJS + KoaJS
Tags: javascript, node
Published: 2019-08-28 23:55:23

## NodeJS
```bash
sudo apt install curl
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt install nodejs
node --version
npm --version
```


## KoaJS
`yarn add koa` or `npm install koa`
Create a file (koa.js) and paste the following:
```javascript
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000, () => console.log('Running on http://localhost:3000/'));
```
Check http://localhost:3000
Great, it's working!

[(by the way)](https://dev.to/hoverbaum/how-to-add-code-highlighting-to-your-devto-posts-2lp6)
Grokking Algorithms – Recursions
Tags: javascript, algorithms, beginners, flatiron
Published: 2019-08-28 23:42:07

Part of being a JavaScript ninja is being somewhat proficient at tackling algorithms or what I've been calling "bite-sized trickery".

As a relative beginner, I've been coming across what seems like the same 10 problems in different shapes, colors and sizes a.k.a varying levels of difficulty. 

Struggling to solve [this problem] (https://exercism.io/my/solutions/2150c4c642334f0081431616a22d4f10) for 4 hours made me realize that when it came to algorithms, I had no idea where to begin. While Flatiron gave me great set of fundamental tools, these tools or rather, how I'm used to applying them, aren't always the the best fit for solving [LeetCode problems](https://leetcode.com/jasterix/).

So I decided to pick up Grokking Algorithms by Aditya Bhargava. This book has been recommended to me a few times, but I initially chose to learn by doing, which was less than successful.

Still, ever the rebel, I decided to start with chapter 3: recursions.

####Here are my 3 takeaways on recursions
1. Recursion is when a function calls itself
2. Every recursive function has 2 cases: 
  1. the base case– the function completes executing and 
  2. the recursive case– the function calls itself
3. This means that while each function call goes onto the call stack, those function calls don't complete until the base case is met

Check out Grokking Algorithms at your local library or [on Amazon](https://www.amazon.com/exec/obidos/ASIN/1617292230/acmorg-20)