teleren/devto huggingface dataset:
Continuously deploy to Expo with Amazon CodeBuild
Tags: continuousdeployment, amazonwebservices, reactnative, expo
Published: 2020-06-21 11:54:10

---
title: Continuously deploy to Expo with Amazon CodeBuild
published: false
date: 2020-05-17 09:04:18 UTC
tags: continuousdeployment,amazonwebservices,reactnative,expo
canonical_url: 
published: true
---

[![](https://cdn-images-1.medium.com/max/1496/1*eYkLfkO7R2RlaTZR2r2fYQ.png)](https://medium.com/swlh/continuously-deploy-to-expo-with-amazon-codebuild-84d19924224?source=rss-98b05140c1ad------2)

This is going to be a really short post on what I learned in the past one week. For the past one week, I had been working on a mobile…

[Continue reading on The Startup »](https://medium.com/swlh/continuously-deploy-to-expo-with-amazon-codebuild-84d19924224?source=rss-98b05140c1ad------2)
Scaling your web app up to 100K users and beyond
Tags: webdev, architecture, devops, aws
Published: 2020-05-17 08:50:47

[Khan Academy scaled to 2.5x their web traffic in a week](https://engineering.khanacademy.org/posts/handling-2x-traffic-in-a-week.htm) by using serverless architecture and CDN caching of all static data. They also extensively cached common queries, user preferences and session data.

You can also adopt a [bottleneck-centric approach to scaling](https://blog.hartleybrody.com/scale-load/), by checking your resource monitoring to identify the bottlenecks. It is usually the database first. But bottlenecks can be memory, CPU, Network I/O or Disk I/O. 

As a principle, make the web stack do less work for the most common requests . 

Some ideas:

- Cache database queries

- Index the database

- Move session storage to an in-memory caching tool

- HTML fragment caching

- Use queues and more workers

- Use HTTP caching headers

- Add a Content Delivery Network in front of a static file host

Here's a [guide for scaling up to 11M users](http://highscalability.com/blog/2016/1/11/a-beginners-guide-to-scaling-to-11-million-users-on-amazons.html), stage by stage:

Use vertical scaling early on but it has no failover or redundancy.
At >1000: Add availability zones, load balancers, and slave database to RDS.

At 10K-100Ks: Horizontal scaling of instances. Move static content to S3 and even some dynamic content to the Cloudfront CDN. Add more read replicas of the database to RDS. Shift session state off your web tier and store session state in ElasticCache or DynamoDB

At >500K: Add automation tools and decouple infrastructure. Add monitoring, metrics and logging.

At >10M: Use federation, sharding and explore other types of DBs

--
Found this helpful? I write a [weekly newsletter on actionable CS research and software engineering best practices](https://pragmaticcs.substack.com/).

Cheers,
Zac
Creating CSS animations with just a few clicks.
Tags: css, webdev, uiweekly, ux
Published: 2020-05-17 08:43:40

Animations are amazing, aren't they? They make the web more attractive and contribute positively towards the User Experience.

A while ago I found this tool by [@sleumasm](https://twitter.com/sleumasm) by which you will be able to create CSS animations by just changing the values and clicking the play button and at the end if you like it just copy the CSS and use it straight away in your website.

Currently, there are two versions of it. The developer recently developed the new version with vue and our favorite dark mode. Here is the new version

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

you can use the [web app](https://keyframes.app/animate/) or the [chrome extension](https://chrome.google.com/webstore/detail/keyframes/dalaiblmpeklkjnpeocmaojcfldmbfck)

well, there may be some bugs in the new version hence you can use the old one too until the new one is completely bug-free

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

there is [web app](https://mitchs.co/keyframes1/editor/) for older version too.

There are some perks using the chrome extension - you can create animations on any web page you like.

Well, I hope this will be useful to you.

Happy Animating,
Stay Safe.


--

## Other Reads

{% link https://dev.to/kedark/all-you-need-to-know-about-python-lists-3ad7 %}

{% link https://dev.to/kedark/three-dots-in-js-spread-and-rest-explained-40e %}

{% link https://dev.to/kedark/stuck-at-home-corona-spend-your-time-learning-for-free-15-000-hours-content-1d29 %}

Don't forget to follow me on [Twitter](https://twitter.com/KodgireKedar) or [Dev](https://dev.to/kedark) for updates on amazing technology stuff.
iposcursor an iPadOS Cursor for the web
Tags: iposcursor, typescript, html, ipad
Published: 2020-05-17 08:33:48

Hi guys, as I told you in the previous post I built a small library to create an iPadOS 13.4 Cursor for the web. Today I'm so proud to tell you that it library becomes to be more seriously and allows you to create different cursors with different customisations.

### NPM

Nowadays is obviously that a good library must have in npmjs repositories.  And I'm so proud to tell you that it is. Here at [https://www.npmjs.com/package/iposcursor](https://www.npmjs.com/package/iposcursor) you can see how to install and how to use this library for your project. I'm very excited because this project works in Browser (umd version) and ES and TS modules.

### Installation

#### From NPM

```shell
npm install iposcursor --save
```

#### From CDN

```html
<!-- Include anywhere inside head tag -->
<link rel="stylesheet" href="https://unpkg.com/iposcursor/dist/css/iposcursor.min.css">
<!-- Include at the end of body tag -->
<script src="https://unpkg.com/iposcursor/dist/iposcursor.min.js"></script>
```

### Usage

#### ES and TS modules

```typescript
import { IposCursor, create } from 'iposcursor';

let cursor = new IposCursor({element : 'elementId'});
cursor.suscribe();
// or
let cursor = create({element : 'elementId'});
cursor.suscribe();
```

#### Browser

```html
<html>
  <head>
    <!-- your awesomes styles, meta, etc -->
    <link rel="stylesheet" href="node_modules/iposcursor/css/iposcursor.min.css">
  </head>
  <body>
  <!-- your awesome code -->
  <!-- ... -->
  <script src="node_modules/iposcursor/iposcursor.min.js"></script>
  <script>
    let cursor = iposcursor.create({element : 'elementId'});
    cursor.suscribe();
  </script>
  </body>
<html>
```

### Demos

I built two examples that you can find in example directory [https://github.com/josesaranda/iposcursor/tree/master/example](https://github.com/josesaranda/iposcursor/tree/master/example) one of them is writing using browser only and the other one using parcel such as build tool. You can run both example if you clone the repo in your machine simply typing:

```shell
git clone https://github.com/josesaranda/iposcursor
cd iposcursor
npm install
npm run build
npm run demo
```

Also you can install node modules, build library and go to *example/umd* directory and double click index.html will show you a browser usage of this library.

If you want to see it in action without do anything you can see codepen implementation [here](https://codepen.io/josesaranda/pen/oNjEWwb).

### That's all

Yes, that's all. This becomes to be a more seriously library step by step. I'll implement more functionality in future versions. And I hope you like it! Thanks.
How to use componentWillUnmount with Functional Components in React
Tags: coding, react
Published: 2020-05-17 10:34:33

---
title: How to use componentWillUnmount with Functional Components in React
published: true
date: 2020-05-17 8:00:27 UTC
tags: Coding,ReactJS
canonical_url: https://robertmarshall.dev/blog/componentwillunmount-functional-components-react
---
------

Most up to date version of this article: https://robertmarshall.dev/blog/componentwillunmount-functional-components-react

------

Functional components are far more efficient than class based components. There is also less code that is needed to be written to achieve the same goal.

However,  I could not get my head around how functional components could implement the use of life-cycle events without needing to be changed to a class.

Turns out everything can be managed through [useEffect](https://reactjs.org/docs/hooks-effect.html).

I have used useEffect in the past to manage API calls, and what happened on a componentWillMount, but never componentWillUnmount. It turns out both are very similar!

 

## How to manage componentWillMount with useEffect

To understand how we can use componentWillUnmount, first we need to look at how the component manages mounting with useEffect.

```javascript
import React, { useEffect } from 'react';
const ComponentExample => () => {
   useEffect( () => {
      // Anything in here is fired on component mount.
   }, []);
}
```

 

If we pass an empty array as the second argument, it tells useEffect to fire on component load. This is the only time it will fire.

With this in mind, how can we alter the code to work with componentWillUnmount? Turns out the solution is very simple.

## 

## How to manage componentWillUnmount with useEffect

If you add a return function inside the useEffect function, it is triggered when a component unmounts from the DOM. This looks like:

```javascript
import React, { useEffect } from 'react';
const ComponentExample => () => {
    useEffect(() => {
        return () => {
            // Anything in here is fired on component unmount.
        }
    }, [])
}
```

 

## Combining both solutions

This means that you can use componentDidMount, and componentWillUnmount in the same useEffect function call. Dramatically reducing the amount of code needed to manage both life-cycle events. Like so:

```javascript
import React, { useEffect } from 'react';
const ComponentExample => () => {
    useEffect(() => {
        // Anything in here is fired on component mount.
        return () => {
            // Anything in here is fired on component unmount.
        }
    }, [])
}
```
Saishō — Very simple semi-static site engine
Tags: showdev, php, webdev
Published: 2020-05-17 07:57:28

After I made [micro](https://paulglushak.com/u) (a minimalist theme for Bludit) and having recently acquired a bunch of spare time thanks to getting fired, I decided to challenge myself to create something I can actually [use](https://0xff.nu/) and learn something in the process. I decided this is something I can share with you as well.

*最小 (Saishō)* is a very simple semi-static site engine built for speed and simplicity in PHP. It reads all MD files in a folder, parses them, and serves the cached variant.
It was made for those of you that require no bells nor whistles, but something that will allow you (and your visitors) to focus on your content.

Feedback is **more than welcome**. This is a learning experience. Do keep in mind that the entire point of *Saishō* is to be quick and simple.

[Demo](https://sho.glushak.net/)
[Guide](https://sho.glushak.net/guide)
[Sourcehut](https://git.sr.ht/~hxii/saisho)
[GitHub](https://github.com/hxii/saisho)
CSS Flexbox : Creating fixed size Cards
Tags: beginners, css, help
Published: 2020-05-17 07:48:07

I've been stuck on this problem for a couple of days now. I've watched countless videos but I can't seem to find the solution that I wanted. Here is the problem.

[Screenshot](https://ibb.co/DgrZCLM)

What I want to do is create cards of equal height and width and of three columns each row. The images on I place on the cards should scale in size automatically to the card and the text should wrap automatically based on the width of the card. Now though, the cards change size  based on the image or the length of text. How can I fix this?
Creating helper commands for k8s using fzf
Tags: shell, k8s
Published: 2020-05-17 06:36:20

---
title: Creating helper commands for k8s using fzf
published: true
date: 2020-05-17 05:13:20 UTC
tags: shell,k8s
canonical_url: https://erick.navarro.io/blog/creating-helper-commands-for-k8s-using-fzf/
---

Kubernetes cli tool `kubectl` is pretty useful but when I need to execute some tasks many times during a work day it could be too verbose. So I wrote some bash functions to handle a few common tasks I use often.

I used the power of [fzf](https://github.com/junegunn/fzf) to create an interactive experience when I run any of these functions. Basically it pipes the output of a `kubectl` command, make some filtering using `sed` and `awk` and then build a final command which will execute what I want.

The common behavior of these functions is first ask for a `namespace` and then ask for a specific `pod` to make some action over its.

We can see an example of how it works in the image below:

 ![/images/creating-helper-commands-for-k8s-using-fzf/pod_shell.gif](https://erick.navarro.io/images/creating-helper-commands-for-k8s-using-fzf/pod_shell.gif "/images/creating-helper-commands-for-k8s-using-fzf/pod\_shell.gif")
## Open a shell or a custom command inside a pod

If we execute `pod_shell` without any argument it will connect to the selected pod and run `bash`, otherwise it will run the given command.

```shell
function pod_shell {
    local namespace=`kubectl get ns | sed 1d | awk '{print $1}' | fzf`
    local pod=`kubectl get pods -n $namespace | sed 1d | awk '{print $1}' | fzf`
    echo "Connecting to $pod"

    if [-z $1]
    then
        kubectl -n $namespace exec -ti $pod bash
    else
        kubectl -n $namespace exec -ti $pod $1
    fi
}
```

## Run a proxy over a pod

Same as the previous function but this one ask for a port mapping, for example `9999:5432` will map the port `9999` from the host machine to `5432` port on the pod.

```shell
function pod_proxy {
    local namespace=`kubectl get ns | sed 1d | awk '{print $1}' | fzf`
    local pod=`kubectl get pods -n $namespace | sed 1d | awk '{print $1}' | fzf`
    local port_mapping
    echo "Enter port mapping using the form local_port:pod_port"
    read port_mapping
    echo "Setting up proxy to $pod on $port_mapping..."

    kubectl port-forward -n $namespace $pod $port_mapping
}
```

## See realtime logs for a given pod

This one just ask for a pod and attach a `kubectl` log command.

```shell
function pod_logs {
    local namespace=`kubectl get ns | sed 1d | awk '{print $1}' | fzf`
    local pod=`kubectl get pods -n $namespace | sed 1d | awk '{print $1}' | fzf`
    echo "Showing logs for $pod"

    kubectl -n $namespace logs -f $pod
}
```

These are some common tasks I need for a day of work but with the same logic we can build some other commands.
My weekend project crossed 140,000 visits in 4 months, made without spending a single dollar.
Tags: javascript, webdev, programming, makers
Published: 2020-05-17 07:40:18

I had made https://tvflix.co as a weekend project to learn Vue.js and Node. I did not think much just made the idea that I had in my mind. 

It immidiately picked up and crossed 140,000 visits in 4 months. I did not spend a single dollar making it. 

1. Got the free domain from https://go.co (they stopped giving them)
2. Hosted the app on zeit(the api) + netlify(the vue.js app)

I did not promote this even a little bit and all the users were organic and I get an average of 35000 visits a month on it.

Today I am launching version 2.0 of tvflix. It's made with Nuxt.js & Tailwind CSS. Full hosted on zeit(new vercel). 

Please upvote so that more people get to know about it. https://www.producthunt.com/posts/tvflix-watch-tv-in-your-browser

What's new in v2

1. Refreshed UI
Completely rethought and made v2 from scratch with intrusion free access to content.

2. Dark Mode
Dark mode everything!

3. PWA
Tvflix is now a PWA, you can download it to your phones or desktops easily.

4. Bookmarks
You can now bookmark channels and store them locally in your browser

5. Categories
Channels are now categorised respectively, you will be able to find News, Music, Education, Kids, Entertainment etc.

6. Faster
Tvflix is now 75% faster, the code is now rendered on server instead of browsers making the JS and CSS footprint in your much less.
Hi, how to Pass Data from React Native to Passport.js Token Strategy Callback?
Tags: reactnative, react, node, javascript
Published: 2020-05-17 07:36:50

Hi, how to Pass Data from React Native to Passport.js Token Strategy Callback?
https://stackoverflow.com/questions/61834412/how-to-pass-data-from-react-native-to-passport-js-token-strategy-callback

any help would be greatly appreciated.
How to achieve one of the iPhone XS landing page animation effect?
Tags: discuss, apple, frontend, animation
Published: 2020-05-17 07:16:14

I want to achieve an animation that I saw in Apple's iPhone XS Landing page. The link for the animation is [video] (https://drive.google.com/file/d/1ABYty8QVlU8v2RQYJlQFAEBKm4EK3_Hs/view?usp=sharing)

I would really appreciate suggestions on how to implement this effect.
Reading Snippets [57 => Navigator.vibrate] 📱
Tags: codenewbie, beginners, javascript, ux
Published: 2020-05-17 06:28:37

I came across an interesting tweet by Eddy Vinick, also known as <a href="https://twitter.com/Veinq_">@veinq_</a> on Twitter. Thanks to his tweet, I learned that Twitter uses <code>Navigator.vibrate(x)</code> on its website to make your phone vibrate when you like a tweet:

<code>window.navigator.vibrate(200);</code>

I decided to do some more research into this cool piece of code and I found out some more interesting tidbits:

🕺 Within the parentheses of the method, a pattern (value) is provided to determine the number of seconds to vibrate or pause.


🕺 The vibration API is specifically made for mobile devices

🕺 The navigator.vibrate is not compatible with Internet Explorer, Opera, and Safari on desktop. 

🕺 The navigator.vibrate method is not compatible with Safari on IOS. 

<kbd><small><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate">SRC: Mozilla Documentation</a></small></kbd>
Svelte loading state indicator (promises)
Published: 2020-05-17 06:07:57

Web apps often require loading state (things like loading spinners) to let a user know that an operation is taking place. These operations often take time, so it's best to let the user know something is loading, which helps improve UX and prevents form resubmissions and etc.

We are using this in [Promatia](https://promatia.com) and [PromaTimes](https://promatimes.com) svelte rebuilds.

## Add Loading State Indicators to Svelte

REPL: https://svelte.dev/repl/4fefb61253aa4c26b26485e0b2b8c06c?version=3

Imagine you have some UI where a button triggers an async function, and you'd like to display a loading indicator

```html
<script>

async function login(){
  await new Promise(resolve => setTimeout(resolve, 2000) //wait for 2 seconds
}
</script>
<form>
  <button on:click="login">Do thing</button>
</form>
```

### Create an overlay loading indicator
Displays a translucent scrim, with a text loading indicator that goes from . to ...
```html
<div class="LoadingIndicator">
    {text}
</div>
<script>
import { onMount } from 'svelte'
let text = ''

async function loop(){
	if(text.length === 3) text = ''
	text += '.'
	await new Promise(resolve => setTimeout(resolve, 300))
	loop()
}

onMount(()=>{
	loop()
})
	
</script>
<style>

.LoadingIndicator {
    display: flex;
    background: rgba(0,0,0,0.2);
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute; // overlays on top of parent element, parent must have display: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 20;
    font-size: 60px;
}
</style>
```

### Create promiser.js

```js
export default async (promise, subscriber)=>{
    subscriber(true)
    try {
        await promise
    } catch (err) {}
    subscriber(false)
}
```

### Update your form
```html
<script>
import promiser from './promiser.js'
import LoadingIndicator from './LoadingIndicator.svelte'
let loading = false

async function login(){
	return await new Promise(resolve => setTimeout(resolve, 3000))
}

</script>
<div class="form">
	<button on:click={()=>promiser(login(), status => loading = status)}>
		Click me
	</button>
	{#if loading}
	<LoadingIndicator/>
	{/if}
</div>
<style>
	
	.form {
		position: relative;
		padding: 20px;
	}
	
</style>
```

View the REPL: https://svelte.dev/repl/4fefb61253aa4c26b26485e0b2b8c06c?version=3.22.2
Repl Coding Challenge:Basic Recursion 👯
Tags: beginners, computerscience, codenewbie, challenge
Published: 2020-05-17 06:05:00

The problem gives a positive integer number. The challenge requires one to fill in the method sum so that it adds up all positive integers that make up the number and returns the sum. 

The recursive solution is written in Ruby. Thank you for your comments and reviews. 

Recursive Solution:


<pre class="highlight ruby"><code>```<br><br><span class="k">def</span> <span class="nf">sum</span><span class="p">(</span><span class="n">number</span><span class="p">)</span>
  <span class="k">return</span> <span class="mi">1</span> <span class="k">if</span> <span class="n">number</span> <span class="o">==</span> <span class="mi">1</span>
  <span class="n">number</span> <span class="o">+</span> <span class="n">sum</span><span class="p">(</span><span class="n">number</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span>
<span class="k">end</span>
<br>
 <p>```ruby</p>
</code></pre>



<a href="https://youtu.be/bAcV1aqJM0w">Video Walkthrough</a>
Do you think consultants has to be treated differently? 
Tags: discuss, peopleware
Published: 2020-05-17 05:50:01

If you ever been in consultanting business, you may hear spooky stories, like so, 

> We have separate pantries for stuff and vendors. If you want to have access please chip in.

Question to community, do you think vendors or consultants has to be treated differently? Share your story.