teleren/devto huggingface dataset:
Fix problems on running Jest with React native v0.56
Tags: reactnative, jest, javascript
Published: 2018-09-21 12:30:43

---
title: Fix problems on running Jest with React native v0.56
published: true
description: 
tags: reactnative, jest, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gtvregjein37dv0fy2or.png
---

 The combination of Jest and React native version 0.56 may have some problems and these steps should be fix those problems.
```
yarn test
yarn run v1.7.0
$ jest
 FAIL  __tests__/timeline_form_screen_test.js
  ● Test suite failed to run

  Plugin 0 specified in "/ReactNative/AppName/node_modules/babel-preset-react-native/index.js" provided an invalid property of "default" (While processing preset: "/ReactNative/AppName/node_modules/babel-preset-react-native/index.js")

      at Plugin.init (node_modules/babel-core/lib/transformation/plugin.js:131:13)
      at Function.normalisePlugin (node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
          at Array.map (<anonymous>)
      at Function.normalisePlugins (node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)

```

If you got erro above, rename **.babelrc** to **.babel.config.js** on your React Native project root and will fix the error.

However still may have another error.
```
 /ReactNative/AppName/__tests__/component_test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                                    ^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
``` 

Modify package.json like below.
```
"jest": {
    "preset": "react-native"
  }
```
to
```
"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    }
  }
```
Then it will fix the error.
Stopping .htaccess from handling API route
Tags: help, php
Published: 2018-09-21 11:37:39

---
title: Stopping .htaccess from handling API route 
published: true
description: 
tags: #help, #php
---

I am routing all the http requests to a website to the index.php file and then handling it from there in MVC fashion. But, if the request is made `/api`route, then another file Api.php should handle it. How do I make that happen?

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

^ this is what I tried, but it just gave me a 500 error


Also, any insight into best practice concerning this is appreciated. I'm trying to write a PHP MVC framework, so I'd also like to know if this is the right way to go about with routing
ElixirのExTwitterでツイートする
Tags: elixir, phoenix, twitter
Published: 2018-09-21 11:09:20

---
title: ElixirのExTwitterでツイートする
published: true
description: 
tags: elixir,phoenix,twitter
canonical_url: https://crieit.net/posts/Elixir-ExTwitter
---

Elixirには[ExTwitter](https://github.com/parroty/extwitter)というTwitter用のライブラリがある。
それでツイートしてみた。

## 設定

ExTwitterの説明通り。access_tokenとaccess_token_secretはユーザーのものを使うので空にしている。

## ツイート

```elixir
  def tweet(token, secret, body) do
    ex_twitter_configure(token, secret)
    ExTwitter.API.Tweets.update(body)
  end

  defp ex_twitter_configure(token, secret) do
    conf = [
      consumer_key: Application.get_env(:extwitter, :oauth)[:consumer_key],
      consumer_secret: Application.get_env(:extwitter, :oauth)[:consumer_secret],
      access_token: token,
      access_token_secret: secret
    ]

    ExTwitter.configure(:process, conf)
  end
```

ログイン中のユーザーのアクセストークンを使うために、API実行前に設定をしている。
How does server side rendering integrate with client side react / preact?
Tags: react, preact, ssr, serversiderendering
Published: 2018-09-21 10:37:01

---
title: How does server side rendering integrate with client side react / preact?
published: true
description: Searching for tutorials where client side preact / react integrates with server side rendered HTML.
tags: react, preact, SSR, server-side-rendering
---

I would like to build a web app with server side rendered HTML (ideally using preact on the backend) and then have preact progressively take over the interface in a lazy fashion to control `onClick` bindings and other events. 

The main point is I don't want the loading of javascript libraries to have any impact on initial rendering speed. 

What are some best practices and examples of this being done?

I am aware http://dev.to does this with rails but not sure how the integration level between preact and the HTML happens.

Thanks 🙏
How Wakatime changed my idea of tracking my coding
Tags: development, participation
Published: 2018-09-21 10:37:34

---
title: How Wakatime changed my idea of tracking my coding
published: true
tags: Development,Participation
canonical_url: https://daniele.tech/2018/09/how-wakatime-changed-my-idea-of-tracking-my-coding/
---

Developers code, it is our main focus and we have no idea how much time we use on pressing key button on our keyboard every day. Especially in a range

The post [How Wakatime changed my idea of tracking my coding](https://daniele.tech/2018/09/how-wakatime-changed-my-idea-of-tracking-my-coding/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
10 Tips for Building a Mobile App with a Limited Budget
Tags: mobile, mobileappdevelopme
Published: 2018-12-04 13:51:48

---
title: 10 Tips for Building a Mobile App with a Limited Budget
published: true
tags: Mobile,Mobile App Developme
canonical_url: 
---
![](https://www.konstantinfo.ae/blog/wp-content/uploads/2018/09/10-Tips-for-Building-a-Mobile-App-with-a-Limited-Budget.png)
If you are planning to build a mobile app and want to know how you can go about it, then here are the ten most important tips for building a mobile app in a budget. Learn [how to develop a mobile app with small budget](https://www.konstantinfo.ae/blog/tips-for-building-a-mobile-app-with-a-limited-budget/) - tips for startups and small business owners.
The Major Factors That Prompt Developers to Go With Android Application Development
Tags: mobile, androidapplication
Published: 2018-12-04 13:56:18

---
title: The Major Factors That Prompt Developers to Go With Android Application Development
published: true
tags: Mobile,Android Application 
canonical_url: 
---
![](https://www.konstantinfo.ae/blog/wp-content/uploads/2018/09/Android-Application-Development.png)
Google’s Android leads the global market with an 80 percent market share, while Apple’s iOS is second, with 15 percent. This big factor that Prompts code developers to work for Android Application Development. See [More factors](https://www.konstantinfo.ae/blog/factors-to-go-with-android-application-development/)
Get started with Angular 7
Tags: angular, angular7, webdev
Published: 2018-09-21 04:56:35

---
title: Get started with Angular 7
published: true
description: Get started with Angular 7.0.0-beta.x in 3 minutes.
tags: angular, angular 7, webdev
---

► Get started with **Angular 7.0.0-beta.x** in 3 minutes.
{% youtube maPZaW6IlZM %}
Add Dynamic Id to class with jquery
Tags: jquery
Published: 2018-09-21 04:17:56

---
title: Add Dynamic Id to class with jquery
published: true
description: Add Dynamic Id to class with jquery
tags: jquery
---

Hello to all, here is the code for add dynamic to div with jquery:

    $("dic.class").attr("id", "yourIdName")

Thank you.
https://therichpost.com
Netsuite SuiteScript 2.0 Client Side onLoad Hackery
Tags: netsuite, suitescript20, client
Published: 2018-09-21 02:30:38

---
title: Netsuite SuiteScript 2.0 Client Side onLoad Hackery
published: true
description: Need client side script to be loaded onLoad?  You came to the right place.
tags: Netsuite, SuiteScript 2.0, Client
---
![banner](https://thepracticaldev.s3.amazonaws.com/i/m5sag5dg3ync1ww8wk8a.gif)

When my company moved from Suitescript 1.0 to 2.0 (because, well, why not?) one thing we needed was to listen to the browser's message listener from another browser tab when some event occurred.  

In order to do that, I needed script to listen upon load.  Netsuite doesn't provide a feature to let us load a client side script on page load very easily.  We had to create a UserEvent script that would call a function on load that would then assign an INLINEHTML custom field type to the form with the required function.

Check it out

```
/**
 * @NApiVersion 2.x
 * @NScriptType UserEventScript
 */

define(['N/runtime'],
    function (runtime) {

        return {
            beforeLoad: beforeLoad
        };

        function beforeLoad(context) {

            if (runtime.executionContext.toUpperCase() == 'USERINTERFACE') {
                var inline = context.form.addField({
                    id: 'custpage_attachmessage',
                    label: 'not shown',
                    type: 'INLINEHTML',
                });
                inline.defaultValue = "<script>jQuery(function($){ require(['/SuiteScripts/clientSuiteScript.js'], function(mod){ mod.pageInit();});});</script>";
            }
        }
    });
```

Then the client suitescript will roughly look like this:

```
/**
 * @NApiVersion 2.x
 * @NScriptType ClientScript
 */

define(['N/currentRecord'],

    function (currentRecord) {

        function pageInit() {
            window.addEventListener("message", browser_ReceiveMessage, false);
            console.log('Added Listener...');

        }

        return {
            pageInit: pageInit
        }

        function browser_ReceiveMessage(event) {

            var curRec = currentRecord.get();
            console.log('Current Record ID', curRec.id)
        }
    }

);
```

Then on load, the console will output the currentRecord's id.

Enjoy!
Javascript: html2canvas with videos
Tags: javascript, hacks, tips, html2canvas
Published: 2018-09-21 00:23:20

---
title: Javascript: html2canvas with videos
published: true
description: Render videos captures whit html2canvas to get a screenshot of your web app
tags: javascript, hacks, tips, html2canvas
---


If you ever used [html2canvas](https://html2canvas.hertzen.com/) to get a "screenshot" of your web app you probably know that html2canvas doesn't work with videos yet, it renders a blank square. They are working in this feature (I think). So lets write a workaround in the meantime.

Before calling html2canvas method we need to take a capture of each video. By reading some source code and issues in the [github repository](https://github.com/niklasvh/html2canvas) I discovered that html2canvas renders all the images it finds, so if we have an image as background of your video it will render it in the final canvas.

```javascript
let canvas = document.getElementById('canvas') // declare a canvas element in your html
let ctx = canvas.getContext('2d');
let videos = document.querySelectorAll('video')
let w, h
for (let i = 0, len = videos.length; i < len; i++) {
    const v = videos[i]
    if (!v.src) continue // no video here
    try {
        w = v.videoWidth
        h = v.videoHeight
        canvas.width = w
        canvas.height = h
        ctx.fillRect(0, 0, w, h)
	    ctx.drawImage(v, 0, 0, w, h)
	    v.style.backgroundImage = `url(${canvas.toDataURL()})` // here is the magic
	    v.style.backgroundSize = 'cover' 
	    ctx.clearRect(0, 0, w, h); // clean the canvas
	} catch (e) {
	    continue
	}
}
```

One problem we can see so far is the __backgroundSize__ style. It may not be the same size as your video so you should do some adjustment.

Next use **html2canvas** as usual
```javascript
html2canvas(document.body)
    .then((canvas) => {
        // display, save as jpeg
     })
```
Tested with the latest version [v1.0.0-alpha.12](https://github.com/niklasvh/html2canvas/releases)

Here a working example
[![Edit n9wrv84jlj](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/n9wrv84jlj)



### Why do I need to take screenshot of my web app?
Well there may be many reasons but my first thought would be **user privacy violation!**. But as I work in a project for a **Digital Signage** Company I learned that Screenshots are a mandatory feature. Users want to see what's being (or was) displayed in their remote displays anytime.

That's it, I hope someone in the cyberspace will find this useful 
(my first post, yaaaai)
TIL#1: Working efficiently with GitHub Apps and using jekyll-compose
Tags: todayilearned
Published: 2018-09-21 08:33:21

---
title: TIL#1: Working efficiently with GitHub Apps and using jekyll-compose
published: true
tags: til
canonical_url: https://an-ti.eu/today-i-learned/2018/09/21/til-1-working-efficiently-with-github-apps-and-using-jekyll-compose/
---

I want to document more what I have been learning throughout my days. Even as someone who writes code for 10+ years there are many new things every day that we stumble uppon. 

I want to share some of those with the great dev.to community.

Here we go, two rather unrelated things:


## GitHub Apps

Working with [GitHub apps](https://developer.github.com/apps/) can be cumbersome. You have to set up a local tunnel and trigger the outgoing events using their user interface. Even though some tunnelling provider (is this a term?) allow you to replay it through their interface it can be tricky.

Today I learned that every GitHub app has a log with the full outgoing requests. Those requests include headers and body.

The request are found in your app settings under the advanced tab.

Now I can replay things with curl and no tunnelling setup from a local file.

```
curl -X POST "Content-Type: application/json" -d "@githubwebhookpayload.json" 'http://localhost:8080/webhook'
```

## jekyll-compose

If you run a static website powered by jekyll [jekyll-compose](https://github.com/jekyll/jekyll-compose) makes your life easier. Work on blog posts and pages becomes more natural as you handle the drafts away from your actual posts.

Create a new draft:

```
$ bundle exec jekyll draft "Today I Learned #1"
```

This will create a new file in the `_drafts` folder. Once you finished writing and editing you publish the draft:

```
$ bundle exec jekyll publish _drafts/today-i-learned-1.md
Draft _drafts/today-i-learned-1.md was moved to _posts/2018-09-21-today-i-learned-1.md
```

That's it for today, keep on learning new things every day. 🤓

You have an idea how to make this better? Let me know: [hello@an-ti.eu](mailto:hello@an-ti.eu)
Public domain single-header h264/svc encoder
Tags: opensource, c, h264, svc
Published: 2018-09-20 22:23:52

---
title: Public domain single-header h264/svc encoder
published: true
description: 
tags: #opensource #c #h264 #svc
---

https://github.com/lieff/minih264

Phew, just finished and unload the code.
Deploy Kubernetes Cluster in less than 15-20m Almost Prod Ready
Tags: kubernetes, opensource, showdev
Published: 2018-09-20 20:25:33

---
title: Deploy Kubernetes Cluster in less than 15-20m Almost Prod Ready
published: true
description: Deploy K8s in less than 20m that is Prod Ready
tags: kubernetes, opensource, showdev
---

There are many ways to deploy kubernetes these days to most cloud providers such as AWS, Google Cloud, Azure  and or Baremetal.

My favorite one to do for sake of POC (Proof of Concept) is by utilizing a tool called [EKSCLI](https://github.com/weaveworks/eksctl) by Waveworks. 

It is extremely easy to setup and you don't have to muck around with almost anything as long as you have requirements set as they describe. 

Here is YT video I made on full deploy of EKS Cluster + some random tips. 

{% youtube zKCudYazOwM %}


Moving on to some other tools...

[Kubespray](https://github.com/kubernetes-incubator/kubespray), configuration is somewhat simple however it takes time to set it up right as it is using Ansible in the background. You have to setup servers/ssh keys etc, it took me about 1hr to set all of it up with 3 master and 6 worker nodes , with some help of terraform to standup EC2 instances etc.. 

[KOPS](https://github.com/kubernetes/kops) is yet another tool similar to EKSCLI however its utilizing ec2 instances in AWS vs EKS. Super easy to configure a and could have a cluster up in matter of 20-30m, they also say its Production ready.. (that all depends on what someone considers a K8s "Production Ready") 

[JX](https://github.com/jenkins-x/jx) - This is something I've been playing for a while now as it supports most cloud providers that I 'play' with including my local copy of minikube, but it's not just that! 
JX provides you jenkins X CI/CD pipeline with some examples to get you going, including hooks into your Github and deploys an app. So if you are Dev this is probably something you will like most of them all. 

Let me know if you know of any other automation tools for deploying Kubernetes Cluster.
Looking for Tech Lead resources (books, sites, etc.)
Tags: help, leadership, technical, softskills
Published: 2018-09-20 19:24:33

---
title: Looking for Tech Lead resources (books, sites, etc.)
published: true
tags: help,leadership,technical,softskills
---


First, to be clear, this is **not** about becoming a **Manager**.

My career path is trending toward becoming a Technical Leader. In essence, this is similar to what others call a "Senior Engineer." To be clear, this is NOT moving into a management or technical project management role. 

Rather, it's more of a leadership software engineer role. I would still be an individual contributor, but would dial-back my Lines of Code per Day in order to both lead technical projects and influence other teams in my organization. 

**What I'm looking for is resources that focus on being an effective leader in the tech field --  especially books, I love to read. This can also include developing interpersonal skills ("soft-skills"), but also requires strong high-level tech skills, like designing service architectures.**

Most "leadership" material out there is only for management, as that's what people consider "leadership" in most organizations. So I'm looking what's been useful to others in a similar role.

Here are some examples that I've read that come to mind, by topic:

* Leadership: [Extreme Ownership](https://www.amazon.com/Extreme-Ownership-U-S-Navy-SEALs-ebook/dp/B0739PYQSS)
* Design: [Patterns of Enterprise Application Architecture](https://www.amazon.com/Patterns-Enterprise-Application-Architecture-Martin/dp/0321127420)
* Communication/Writing: [On Writing Well](https://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction-ebook/dp/B0090RVGW0)
Fibonacci Series in Java
Tags: java, corejava, webdev, programming
Published: 2018-09-20 18:05:36

---
title: Fibonacci Series in Java
published: true
description: Fibonacci Series in Java
tags: #java #corejava #webdev #programming
---

Post Link : <a href="https://www.skptricks.com/2018/09/fibonacci-series-code-in-java.html"> Fibonacci Series in Java </a>

This post explains, how to write a program to print Fibonacci Series in java programming language. In Mathematics, Fibonacci series next number is the sum of previous two numbeprs for example 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 etc. The first two numbers of Fibonacci series are 0 and 1.

If you observe the above pattern, First Value is 0, Second Value is 1 and the subsequent number is the result of sum of the previous two numbers. For example, Third value is (0 + 1), Fourth value is (1 + 1) so on and so forth.

<a href="https://www.skptricks.com/2018/09/fibonacci-series-code-in-java.html"> Fibonacci Series in Java </a>
<img src="https://4.bp.blogspot.com/-vEoRYWc1_z4/W6Mor-RPYfI/AAAAAAAAB5U/qR1qhkwvIo8bio9M1LmEb_ZpbTA1XmcfwCLcBGAs/s400/ja.png" />

In mathematical terms, the sequence Fn of Fibonacci numbers is defined by the recurrence relation
 Fn = Fn-1 + Fn-2
with seed values
    F0 = 0 and F1 = 1.

There are two ways to write the fibonacci series program in java:
Fibonacci Series without using recursion
Fibonacci Series using recursion

<a href="https://www.skptricks.com/2018/09/fibonacci-series-code-in-java.html"> Click Here To Read More... </a>
Passport JWT with GraphQL (Apollo Server 2)
Tags: jwt, graphql, authentication, node
Published: 2018-09-20 16:48:45

---
title: Passport JWT with GraphQL (Apollo Server 2)
published: true
description: Authentication with Passport JWT in GraphQL
tags: jwt, graphql, authentication, nodejs
---

I was studying and reading about authentication in GraphQL and people told me (devs from Docker and Facebook) that GraphQL doesn't need to know anything about authentication, in fact your schemas and resolvers should be simple and thin, the authentication must be done outside GraphQL, and for that I did this simple Passport JWT authentication in GraphQL to show what I understood about that.

```
import express from 'express'
import { ApolloServer } from 'apollo-server-express'

// ...
import passport from 'passport'
import passportJWT from 'passport-jwt'
import jwt from 'jsonwebtoken'
// ...

import schema from './schemas'

const { GRAPHQL_PORT, JWT_SECRET } = process.env

// ...
const users = [
  {
    id: 1,
    name: 'John',
    email: 'john@mail.com',
    password: 'john123'
  }
]

// generate a jwt token for testing purposes
console.log(jwt.sign(users[0], JWT_SECRET))

// ...

const { Strategy, ExtractJwt } = passportJWT

const params = {
  secretOrKey: JWT_SECRET,
  jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken()
}

const strategy = new Strategy(params, (payload, done) => {
  const user = users.find(user => user.id === payload.id) || null

  return done(null, user)
})

passport.use(strategy)

// ...

const app = express()

// ...

passport.initialize()

app.use('/graphql', (req, res, next) => {
  passport.authenticate('jwt', { session: false }, (err, user, info) => {
    if (user) {
      req.user = user
    }

    next()
  })(req, res, next)
})

// ...

const server = new ApolloServer({
  schema,
  context: ({ req }) => ({
    user: req.user
  })
})

server.applyMiddleware({
  app
})

app.listen(
  {
    port: GRAPHQL_PORT
  },
  () => console.log(`The GraphQL server is running on port ${GRAPHQL_PORT}`)
)
```

Now the resolvers will have the user authenticated, but the resolvers are not responsible to make auth verification, so instead it's probably better to make a schema directive to check for authentication or even passing the current user to some kind of service in the backend to check instead of `if (user) {...` in the resolvers.

What are your thoughts about the code, any room for improvement?
A Scout Approach to Software Development
Tags: programming, coding
Published: 2018-09-20 16:40:58

---
title: A Scout Approach to Software Development
published: true
description: Learn how to apply the Scout code to software development to get code to a better state continuously.
tags: #programming #coding
canonical_url: https://auth0.com/blog/a-scout-approach-to-software-development/
---

When I was a kid, I practiced [_Scouting_](https://en.wikipedia.org/wiki/Scouting) for eight years I picked up a lot of excellent values and my scouting experiences helped to shape my character and make me a better programmer. Let me show you why.

As a Scout, you get to experience nature by camping outdoors which teaches you one of the core values — **respect life**. Scout rules help support core Scout values. One of the first rules I learned was:

[Read on 🏕](https://auth0.com/blog/a-scout-approach-to-software-development/?utm_source=dev&utm_medium=sc&utm_campaign=scout_softdev)

![A Scout Approach to Software Development](https://thepracticaldev.s3.amazonaws.com/i/v9ivfvrj9bo5iscyzp50.png)