fabiochiu/medium-articles huggingface dataset:
How I Picked Up and Built a Nuxt.js App in One Week
By: Mohamad Fadhil
Tags: JavaScript, Programming, Vue, Frontend Development, Nuxtjs

My Personal JS History

Personally, I attempted to learn JavaScript a very long time ago. In the year 2015, I used to learn Ruby on Rails and Ruby Sinatra (what a nostalgic framework). It was trendy at that time. There were also MooTools and jQuery.

I was 15 years old at that time; most of the time, I was just following YouTube tutorials from RailsCast’s YouTube channel back then. jQuery and MooTools were OK for me at that time because they are pretty straightforward to write in (until you face the asynchronous issues in JS).

After that came Ember.js, Backbone.js, Meteor, Knockout.js, and many other frameworks. And then, Node.js and npm came, together with Angular, and dependency issues in the JS ecosystem. Things were moving too fast.

I tried to pick up those frameworks at that time to stay updated with the latest tech in the industry. Unfortunately, I couldn’t keep moving at their pace. I abandoned the JS world to focus primarily on back-end programming, where things are more matured (and boring).

When React.js was released to the public, I always wanted to learn the framework. I’ve read its documentation and tutorials, but I still could not understand how it worked under the hood.

The structure is always complicated to me and not what I expected. The same thing happened for the Ionic framework. I was then skeptical about the JS world. Every new JS framework released will always disappoint me. I really wish there was a new JS framework as simple as jQuery again.
【Vue3に備える】実務で使うComposition APIについて考える
Tags: Vuejs, Finatext, Engineering, Front End Development, Vue

早速ですが、イメージを掴んでもらうために、実装例の一部を紹介します。実際に使っている中でもよくある、データ配列をフェッチして、テーブルで表現するといった画面です。

今回使った例のリポジトリは以下に上げてあります

また、Composition API Ver.で利用している各種モジュールの詳細は、この記事の後半に載せています。

これはよくあるテーブルでのデータ表示と、左にあるチェックボックスでの実装です。

今回は選択状態を管理するためのTableModuleと、データ管理をするItemModuleで実装しました。

非常に簡潔で、切り出す必要があるかを疑問に思いますが、たかがテーブルと言えども、各ページで多種多様なフィルタや検索機能を設けると、このレベルのコードでも重複して肥大化しがちなのがVueなのです。

/VueSyntax.vue

<template>

<div id="vue-syntax">

<h3 class="title is-3">Vue Syntax Ver.</h3>

<table class="table is-fullwidth">

<thead>

<tr>

<th class="cell-checkbox">

<b-checkbox :value="selectedFlag" :true-value="2" :false-value="0" :indeterminate="1 === selectedFlag"

@input="checkAll"/>

</th>

<th class="cell-name">名前</th>

</tr>

</thead>

<tbody v-if="isLoading"><tr><td>読み込み中</td></tr></tbody>

<tbody v-else>

<tr v-for="item in items" :key="item.id">

<td class="cell-checkbox">

<b-checkbox v-model="item.selected"/>

</td>

<td class="cell-name" @click="onClick(item)">

{{ item.name }}

</td>

</tr>

</tbody>

</table>

</div>

</template>

<script lang="ts">

import Vue from 'vue'

import {Item, Selectable} from '@/types'

import ItemApi from '@/apis/ItemApi'

type Test = Item & Selectable

export default Vue.extend({

data() {

return {

// データ

items: [] as Test[],

isLoading: false,

// Viewでは使わない

isLast: false,

// Viewでは使わない

cursor: null as string | null

}

},

computed: {

// for テーブル操作

selectedFlag() {

if (this.items.length && this.items.every((item: Selectable) => item.selected)) {

return 2

} else if (this.items.some((item: Selectable) => item.selected)) {

return 1

}

return 0

}

},

created() {

this.getList()

},

methods: {

// for テーブル操作

checkAll(flag: number) {

this.items.forEach((item: Selectable) => item.selected = 2 === flag)

},

onClick(item: Item) {

// 前処理してから画面遷移など

// ...

this.$router.push(`/items/${item.id}`)

},

// Viewでは使わない

getList() {

if (this.isLoading || this.isLast) return

this.isLoading = true

return new ItemApi().getList({cursor: this.cursor}).then((res: any) => {

this.items.push(...res.data.items)

if ((this.cursor = res.data.nextCursor) == null) {

this.isLast = true

}

}).finally(() => this.isLoading = false)

}

}

})

</script>
Vue3 Import and register components in composition API
By: Milad Meidanshahi
Tags: Vue 3, Lazy Loading, Composition Api, Vue, Components

Using Components

Values in the scope of <script setup> can also be used directly as custom component tag names:

<script setup>

import MyComponent from './MyComponent.vue'

</script> <template>

<MyComponent />

</template>

Think of MyComponent as being referenced as a variable. If you have used JSX, the mental model is similar here. The kebab-case equivalent <my-component> also works in the template - however PascalCase component tags are strongly recommended for consistency. It also helps differentiating from native custom elements.

Dynamic Components

Since components are referenced as variables instead of registered under string keys, we should use dynamic :is binding when using dynamic components inside <script setup> :

<script setup>

import Foo from './Foo.vue'

import Bar from './Bar.vue'

</script> <template>

<component :is="Foo" />

<component :is="someCondition ? Foo : Bar" />

</template>

Note how the components can be used as variables in a ternary expression.

Recursive Components

An SFC can implicitly refer to itself via its filename. E.g. a file named FooBar.vue can refer to itself as <FooBar/> in its template.

Note this has lower priority than imported components. If you have a named import that conflicts with the component’s inferred name, you can alias the import:

import { FooBar as FooBarChild } from './components'

Namespaced Components

You can use component tags with dots like <Foo.Bar> to refer to components nested under object properties. This is useful when you import multiple components from a single file:

<script setup>

import * as Form from './form-components'

</script> <template>

<Form.Input>

<Form.Label>label</Form.Label>

</Form.Input>

</template>

Lazy load Components

In <script setup> you can simply lazy load components:

<script setup>

import { defineAsyncComponent } from 'vue' const MyComponent = defineAsyncComponent (() => import(./MyComponent.vue))

</script> <template>

<MyComponent />

</template>

source: https://v3.vuejs.org/api/sfc-script-setup.html#using-components
Dynamic SPA PWA with Vue CLI 3 and Laravel 5.7
By: Erik Metalevel
Tags: JavaScript, Programming, PHP, Vue, Laravel

3 ‘installed’ apps from the same Vue SPA code

The Background

My first real job in the programming industry was at a startup that demanded the world of me. I began with them as one of those simple wordpress theme changer guys before quickly being given all the hats. The product was a loyalty-rewards program for merchants. We added a text-message marketing tool for blasting campaigns to the rewards members, and then the last project I worked on with them was a full online-ordering system. This story-tutorial is about how I executed the online ordering app.

The Specs

The Online Ordering app is a Vue SPA built with the CLI v3. It uses Vuex, Vue Router ( of course ), the official PWA plugin, and it’s demo can be found at https://demo.orders.realmobiletech.com/m/galaxy.

Some dependencies blurred out possibly because I wear a tinfoil hat, they are all auxiliary dependencies for phone-number formatting and other miscellaneous cool things

The Laravel

So how does this use Laravel? Well, after building this ordering app for one of our clients, we had to give it to another.. Furthermore, we had to provide a sort of ‘white-labellable’ experience for all of our clients who used this webapp. Usually you would just load the merchant’s specific data ( their menu, their styles, their whatever ) upon either a successful login or a route to their specific home-page. However, how would you get the PWA aspect of this to work in a white-label fashion? The PWA icon that gets installed to the homescreen is determined by the app manifest, and there’s no client-side way of dynamically generating that ( as far as I was able to tell from researching into it ).

That simply meant that I needed to uproot the entire SPA and shove a server behind it… and luckily for me Evan You ( bless this man ) did a basic showcase of using the new Vue CLI v3 with a base laravel installation. I cloned it, and replaced the vue ‘frontend’ folder with my pre-existing SPA, then replaced both the index page and the manifest.json with blade templates so that the Laravel app would dynamically generate them with every request to the server.

I’ll show you a few code examples of how I did this. Hopefully this inspires more people to use both Vue and Laravel to create awesome applications for large industries. I hope I can use this to show everyone how it is possible to create a white-labellable experience for your clients using the same code base.
Thanks for the article, Jakz!
By: Tommy Toomean
Tags: JavaScript, Vuejs, Vue

Thanks for the article, Jakz!

I have a few questions

1. You set the component name in the script section. What’s the purpose of it? Can you explain how do you want to use it?

2. What default behavior did you prevent on close-button?

3. Script tags don’t support curly brackets, can you reformulate this part? It’s confusing a bit.

Template tags {{ value }} Script Tags {{ this.value }}

4. Why do you use `v-show` not `v-if` for visibility control?

Some comments about the code:

I think that more sematic way it to define buttons as `<button>`, not `<a href=”#”>` You are using BEM naming for classes so you can define button modifiers in a BEM naming way like `class=”btn btn- -gmaps”` You can set Boolean type for the value you expect to get. ( You’re working with Booleans here, right? ).

value: {

type: Boolean,

default: false,

},

4. You have open and close methods, but they work in a toggle way. This mismatch ( name of function !== what function does ) may cause problems in the future.

And some notes about behavior:

It’s a nice idea to add some hook for your component. E.g. you can add onClose event

methods: {

onClose() {

this.$emit('input', false);

this.$emit('close');

},

},

2. You can close modal by clicking on the overlay. ( In this case you can play with class naming, e.g. add modal__overlay and modal__content / modal__wrapper )

3. It would be cool if you add transition here
Yes, this is how to use Vue JS with WordPress in 3 unique ways
Tags: Vue Router, Vuejs, Wordpress Plugins, Vue, WordPress

Yes, this is how to use Vue JS with WordPress in 3 unique ways @maisonfutari Follow Jan 25 · 7 min read

Hi! Long time no see right?

It’s 2021, so I wish you a happy new year!

Hopefully this year I’m going to write more stories on medium.

Now that the chitchat is finished, let’s dive in with my latest discovery.

Like most of my articles, I was inspired by something I saw in the Vue JS Facebook Group. (If you haven’t joined yet, just do it!).

Someone in the group asked: how can I use Vue in WordPress?

The word “in” and not “with” is interesting here, because there are actually ways to use Vue in WP, and ways to use it with WP.

As a senior frontend developer and former WordPress developer, I was kinda surprised by the question because the answer seemed obvious for me.

But then, I remembered a thing.

The frontend world moves so fast that, it may not be so obvious for everyone!

So now, I’ll show you the 3 clean methods to use Vue JS with & in Wordpress.

These methods have different goals and various implementations.

I’ll explain in which context each is useful, and in which it isn’t.

Wait, why would a Vue dev use WordPress?

WordPress represents more than 25% of the known web.

Chances are, you will (or already) have it in your stack anyway.

There are 2 main reasons for a frontend dev to use WordPress

You have no backend skills and need a source of data + admin panel

You have a client that is already on WordPress that wants frontend changes

Why would a WordPress dev use Vue?

The ultimate reason is, Vue is simple to learn!

The other practical reasons are:

jQuery isn’t easily scalable and creates conflicts in many cases

Using a separate frontend with WP as API can speed-up the website

Vue is composable and would make it easier for UI in plugins, admin, etc

Using Vue means bringing the benefits of the modern stack in a WP ecosystem.

But, it could be any other modern component-driven framework.

So what’s the top 3 ways to use WordPress and Vue?

1. Use Vue to create an SPA as a sub website/app in the WP admin

You didn’t see this coming right?

Yes, you can use Vue to create a “sub-website” in the WordPress admin panel.

Why would you do that you may ask?

Well, sometimes when creating complex plugins or just custom admin pages, you need to create a tab system or a multiple page systems in the admin panel.

With regular WordPress methods, each admin page would reload, and therefore the user experience would not be great.

Also, when using the regular WP UI elements, it’s not always elegant.

Here’s an example of a custom admin page.
Using Web Workers Vue Applications.
By: Victor Onuoha Martins
Tags: JavaScript, Web Development, Vuejs, Vue, Web

Using Web Workers Vue Applications.

Read this article in dark mode, easily copy and paste code samples and discover more contents like this on Devjavu.

This post assumes you have basic knowledge of Javascript and Vue.

Single-Threaded JavaScript

As a single-threaded programming language, Javascript can only perform a single set of instructions at a time. This means that every other process has to wait for one instruction to complete before the next process is executed.

This would pose a speed problem in our web application if we had to carry out heavy processes and also want the user to still be able to interact with our application. Say we needed to calculate the return on investment of multiple investment packages, and still make sure these processes are non-blocking and do not run on the main thread, so we can perform other tasks on the main thread, like making a network request…Enters web workers.

Note: blocking refers to serial processing — Doing one thing at a time. Non-blocking on the other hand code (asynchronous) can run in parallel (or multithreaded)

Web workers allow us to run processes in the background thread and notify the main thread when those processes are complete. This adds a great performance boost as we do not need to chunk up everything on the main thread.

Web workers

Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa). — MDN

Web workers in Javascript

The main thread creates the worker using the “Worker” constructor. This constructor takes in a single argument, the path to the worker file. The worker file contains the code that will run in the worker thread; workers run in another global context that is different from the current window.

Data is passed between the worker and the main thread via messages — the main thread and worker thread sends messages using the postMessage() method, and respond to messages sent using the onmessage handler.

Here’s a simple example of implementing web workers in Javascript.
Short Guide for Useful Mac VSCode Keyboard Shortcuts
By: D'Arcy Draper
Tags: Flatiron School, Software Engineering, Mac, Vscode, Coding

Cut, Copy, Paste, and Undo

To cut a line or section of code, simply hold the command button (⌘) and hit X.

To copy a line or section of code, hold the command button (⌘) and hit C.

To paste a line or section of code, hold the command button (⌘) and hit V.

To undo your most recent change, hold the command button (⌘) and hit Z.

Moving, Inserting, and Deleting Lines

To simply move a line of code up or down, hold the alt button (⌥) and hit either the up or down arrows.

To copy a line of code up or down, hold the shift and alt (⌥) buttons and hit either the up or down arrows.

To delete a line, hold the shift and command (⌘) buttons and hit K.

To insert a line below your selected line of code, hold the command button (⌘) and hit the enter button.

To insert a line above your selected line of code, hold the shift and control (⌘) buttons and hit the enter button.

Comment Lines

While there are a few different ways to comment and uncomment lines, I find the simplest method being to hold the command button (⌘) and hitting the forward-slash (/).

Selections

To select the current line at the position of your cursor, hold the command button (⌘) and hit L.

To select all occurrences of your current selection, hold the shift and command (⌘) buttons and hit L.

To select all occurrences of your selected word, hold the command button (⌘) and hit F2.

Search and Replace

To find something specific on the page, hold the command button (⌘) and hit F.

To find the next instance of your found object, hold the command button (⌘) and hit G.

To go to the previous instance of your found object, hold the shift and command (⌘) buttons and hit G.

To select all instances of your Find match, hold the alt button (⌥) and hit enter.

To replace your selected object, hold the alt (⌥) and command (⌘) buttons and hit F.

Navigation and File Management

To search files by name and go to it, hold the command button (⌘) and hit P.

To create a new file, hold the command button (⌘) and hit N.

To open a file, hold the command button (⌘) and hit O.

To save a file, hold the command button (⌘) and hit S.

To “save as” a file, hold the shift and command (⌘) buttons and hit S.

To save all, hold the alt (⌥) and command (⌘) buttons and hit S.

To close the file, hold the command button (⌘) and hit W.

To reopen the closed editor, hold the shift and command (⌘) buttons and hit T.
4 fun tricks to do with Python
By: Priyanshi Srivastava
Tags: Python Programming, Vscode, Easytech, Python, Pro

Amaze your friends with these simple yet fun tricks.

Photo by Brooke Cagle on Unsplash

Who said programming is only for nerds. With python’s incessant tools and modules you will never feel bored. In this article we will learn 4 such tricks to make you feel like a pro. Before starting with our article I assume that you have VS Code or any other IDE installed on your system. If not, no worries visit VS Code Setup page and follow the guide appropriate for your system.

So without any further ado lets get started with our first trick:-

1. Generating QR codes:-

To generate QR Codes in python you’ll need to install pyqrcode module.

Installation-

Open terminal and install these modules.

pip install pyqrcode

install an additional module pypng to save image in png format:

pip install pypng

Below is the code:

QR Code generator

In the variable ‘s’ you can store the url of your desired website. Run the code and open the folder in which you’ve made this program. You’ll see an image named ‘img.png’, this is your QR Code. And voila you can share it with your friends.

2. Automate Whatsapp messages:-

Do you also struggle to wish your loved ones exactly at 12:00? If yes, then this trick is going to be your savior.

Installation-

pip install pywhatkit

To use this python module to send message automatically on WhatsApp at a set time, we need chrome browser and you must have your WhatsApp logged into web.whatsapp.com website.

Automating Whatsapp

In the above code, we have specified the mobile number on which we want to send the message, then the message, and then the time at which the message has to be sent. This module follows the 24 hrs time format, hence the time 17:18 is 05:18 PM.

OUTPUT:

In 325 seconds web.whatsapp.com will open and after 20 seconds message will be delivered

Don’t forget to send your friends thousands of random text on whatsapp!

3. Shorten URL:-

This particular trick will help you to reduce the length of the URL so that it can be shared easily on platforms like Twitter, where number of characters is an issue.

Installation-

pip install pyshorteners

shortening url



Enter urlhttps://

shortened url is OUTPUT:Enter urlhttps:// www.pyimagesearch.com/2018/06/18/face-recognition-with-opencv-python-and-deep-learning/ shortened url is https://tinyurl.com/ydbhjbqz

Yayy!! Now copy that URL and share it as much as you like.

Since COVID-19 is still making its presence felt why not keep a track of number of cases and take proper precautions.

4. Finding COVID-19 cases details:-

Find information about COVID cases in your country by following the code mentioned here.

Installation-

pip install Covid

COVID Cases in India

OUTPUT:

{‘confirmed’: 119419, ‘active’: 66863, ‘recovered’: 48957, ‘deaths’: 3599}

With this we’ll wrap up here. Stay safe, Stay creative.
vscode: debugging python scripts with args
By: Diary Of A Codelovingyogi
Tags: Vscode, Python

On the top, left side of VSCode, find your debug settings files by going to the gear icon.

In launch.json you should see pre-populated settings that looks something like:

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "Python: Current File (Integrated Terminal)", "type": "python", "request": "launch", "program": "${file}", "console": "integratedTerminal" }, ] }

For scripts, that require args you can update the json configuration to look something like this:

"configurations": [ { "name": "Python: Current File (Integrated Terminal)", "type": "python", "request": "launch", "program": "/Users/<username>/<path>/<to>/<file>/<file_name>.py", "console": "integratedTerminal",

"args": ["-p","<project_name>", "-k", "<key_name>"] }, ]

If you get an error that a Python Interpreter is missing:

You need to select a Python interpreter before you start debugging. Tip: click on "Select Python Interpreter" in the status bar.
[Tomcat] Use VS Code to manipulate Tomcat
By: Sc Tuan
Tags: Vscode, Java, Tomcat, Vscode Extension

I try Homebrew to install tomcat , but there is not easy to use with VS Code. If you have VS Code and you want to use it with tomcat , there would be some problem (wish you can solve it, I CANNOT. 😂).

By the way, I’m totally new to tomcat or apache .

Download Tomcat

If you want to use the tomcat plugin in VS Code, I suggest you download it from the page. It is much easy to use.

Choose what version you want and download it. Unzip and then put it in some appropriate path you can find.

Setup VS Code

You must download the plugin Tomcat for Java . Then selecting tomcat directory you just downloaded by clicking add button in TOMCAT SERVER . Now you should see something like apache-tomcat-8.5.39 (if you don’t change the name after unzipping it.) below TOMCAT SERVERS . And there is nothing below apache-tomcat-8.5.39 .

Hello World!

Try some example from tomcat ! You can download it. You will get the sample.war file.

Pull it into your explorer navigator in VS Code. And Ctrl + click it and then select Debug on Tomcat server . It will appear under apache-tomcat-8.5.39 .

Run tomcat server and enter http://localhost:8080/sample in your browser. You should see something. Congratulation!

Update
Code overview — mission impossible?
Tags: HTML, JavaScript, Vscode, Extension

Code overview — mission impossible?

As a new user of Visual Studio Code, I sometimes find it hard to navigate through my opening and closing code. Especially when it comes to nesting and functions; there are parentheses and curly brackets everywhere! Sometimes, they are aloof breaking your code and you have to find which ( or { is missing its mate. The time spent trying to get an overview of my code has drastically reduced since I came across this article! The 3 extensions that helped me are Bracket Pair Colorizer, Indent Rainbow, and Indenticator!

Bracket Pair Colorizer and Indent Rainbow

These are two different extensions. However, they really make a good and beautiful couple. These extensions will fill your editor with a flurry of colours, and make the code blocks easily discernible and pleasing to the eyes. Once you get used to them, VSCode feels insipid, and bland without them.

Indenticator

Visually highlights the current indent depth. So now you can easily distinguish between various blocks indented at different levels.

Add these 3 extensions together and you have a colorful and easier to overview VsCode!
The Best VS Code Extensions for Anyone Working in Ruby
By: Peter Ayeni
Tags: Ruby on Rails, Ruby, Vscode, Coding, Programming

2. Ruby RuboCop by misogi

This extension provides interfaces to RuboCop for VS Code. RuboCop is a code analyzer for ruby.

Before we configure RuboCop, it’s good to get the background understanding of what powers it behind the scenes.

“RuboCop is a Ruby static code analyzer and code formatter. Out of the box it will enforce many of the guidelines outlined in the community Ruby Style Guide.” — RuboCop documentation

The Ruby Style Guide is a document every new Rubyist should check out. It’s like the Ten Commandments and will help you speak like the locals while learning the new language. It enables you to write Ruby code like the pros.

What RuboCop helps you with is taking in all of the rules from the style guide and making your code conform to them, allowing you to focus on the most important thing: solving problems.

Installation

Installation of Ruby and RuboCop is required.

gem install rubocop

Type F1 (or Command + Shift + P)

Execute “Extensions: install extension”

Type rubocop , and execute ext install ruby-rubocop

RuboCop comes with a configuration file you can configurem as explained below. I just use these simple steps — you can go with any option you desire.

Add the Rubocop gem to my gemfile gem 'rubocop' bundle run rubocop --auto-gen-config . This autogenerates a configuration file for my current project. To allow RuboCop to automatically format my code and apply best practices, I then run rubocop -a .

Configuration

Specify configuration (via navigating to File > Preferences > Workspace Settings) and editing the file settings.json): .

You can also use the configuration file that comes with RuboCop to automate your configuration. It’s well documented and easy to configure.
Learning React: An Insight Into Tooling And Infrastructure
By: Karthik Ns
Tags: React, Vscode, Github Pages, NPM

It had been more than half a decade since I dabbled with front-end development — I’m primarily a C++ platform developer who works in monolithic code. I’ve been running into React quite often as a library which can help build interactive websites easily. Curious to see what the fuss is all about, Jaikanth and I decided to explore this world by building a simple Tic-tac-toe application. Here’s the result:

https://karthikns.github.io/tictactoereact/

Learning React was nice. But there were two aspects in the tooling/infrastructure that stood out to me: collaborative coding and rapid speed of development/deployment.

Collaborative Coding

One of the major hurdles in working together was geography — Jaikanth lives in Bengaluru and I live in the Seattle ‘burbs. Another potential obstacle was that both of us have different backgrounds in software development.

Visual Studio Code has a wonderful plugin called Live Share which allows the host to share their running Visual Studio Code instance with their collaborator - the host and the guest can code together in the host’s instance. With that setup and a WhatsApp call, it felt like we were working in the same space.

After setting up the shared session, we decided to pair program. Each of us took on the roles ‘typist’ and ‘brain’ and switched roles every 10 minutes. This gave us a great way to learn from each others’ strengths, share ideas and sped up the learning.

Rapid Speed

What impressed me is that it was fairly straightforward to setup a pipeline such that making a change in a file and just saving it resulted in automatic code formatting, building and deploying the changes to a test server. The debugger in the browser works great but going the extra step to setup debugging via Visual Studio Code saved time.

Another aspect was the ease of deployment to GitHub pages — after a day’s coding, deploying to GitHib pages is fairly straightforward and involves running a simple command. From making a simple change to have it show up in GitHub pages is just a matter of minutes.

Here’s the repository: https://github.com/karthikns/tictactoereact

An icing on the cake would be setting up a CI/CD pipeline next and then automatic deployment when changes are pushed!
The Nice Way To Use Docker With VSCode
By: Yash Prakash
Tags: Data Science, Vscode, Docker, Machine Learning, Python

Your next project might contain a lot of complex machine learning code with numerous different libraries and their versions threatening to wreak havoc on your machine. Next comes the process of making sure your colleague can also run your app with the right dependencies installed. This brings forward a new round of headaches.

It does not have to be this way.

Developing inside a docker container can save you a lot of time, and help smooth out the process of deployment of your app in the long run. In another article, I’ve discussed the complete set of steps to manually build and run a docker image for your project. You can find it here.

But there’s a simpler way to automate the setup of Docker for your next project and it comes built-in with VSCode.

In this story, let me show you how I learned to start a new development environment within a container in a few simple steps.

Here we go 👇

Get the useful extension!

The VSCode Docker extension is the backbone of all your Docker workflows. Make sure you have it installed by visiting the extensions marketplace or simply go to this URL: Docker Extension.

Now, go ahed and start up Docker Desktop on your machine.

This extension makes it trivial to build, run, and deploy containerised applications, all without leaving your code editor!

Make sure Docker Desktop is running before moving on to the next step.

Write a simple app

The purpose of this tutorial is to demonstrate how easy it is to develop an app in a dockerised manner. Keeping this in mind, I’ll show a simple example on using FastApi to build a HelloWorld app.

To get started, make a new file called helloworld.py and paste this block of code within it:

from fastapi import FastAPI app = FastAPI() @app.get("/") async def root(): return {"message": "Hello World"}

This will make sure we have a simple API that displays ‘Hello World’ message at the exposed URL.

Now comes the part where we play with Docker.

Making a new Docker image

First, you need to make a requirements.txt file that will contain all the dependencies for the app we’re building.

Owing to the simplicity of this test application, we only have these two for now:

fastapi[all]==0.63.0 uvicorn[standard]==0.13.4

Finally, press CMD + Shift + P or CTRL + Shift + P to open up the command pallete of VSCode. Type in and select “Add Docker Files…”

The below window will pop up, select the FastApi option.
Thunder Client — lightweight alternative to Postman
By: Ranga Vadhineni
Tags: JavaScript, API, Postman, Vscode Extension, Vscode

How Postman led me to create my own API Client called Thunder Client Extension for VS Code.

I work for my own project localmint.com, where I need to update the location data regularly, which involves dealing with lot of Crawlers & APIs. I was using Postman to test APIs from last few years, But recently for each update the Postman desktop client is becoming slow to load and confusing UI.

So I started looking for other clients, which I found requires multiple clicks to make a simple api request and has complex UI. Then I searched the Visual Studio Code extension gallery and found REST Client extension which is popular but not a GUI based client. So I finally decided to create my own API client.

Since I use Visual Studio Code regularly for development, So i decided to develop an extension instead of separate software to download, and also there are millions of users who already use VS Code. I have set the following design targets for the new extension

Extension Design Goals

Lightweight API Client

Simple, Clean & Easy to use UI

Handle Large Responses & View in Full Screen

Support VS Code Themes

Collections & Environment Variables

Scriptless Testing

Development

I started initial research on how to use VS Code api to develop an extension for couple of days and then started developing the software. Finally able to complete the development of Extension with the above target functionality. below is the screenshot of the extension
New ways to make money
By: Sitora Takanaev
Tags: Make Money, Casting, Gig Economy, Marketing, Make Money Online

When I decided to convert my real people casting company into a platform I had two clear goals in mind.

First I saw an opportunity to make media more authentic and diverse. Battling token diversity and stereotypes created by casting became our mission.

I also saw another side of this opportunity. Oncata can bring more income to people who really need it. Every year we pay thousands of dollars in talent fees. With the rising need of non model or non actors for media content our platform presents a real opportunity for all people to make extra money on the side. In these uncertain times we made it our mission to reach out to those who could use extra help and tell them about our opportunities. Here are 3 easy ways how you can start making extra income with Oncata today.

1 Apply for casting calls

We have casting calls open every week. Currently a lot in the Midwest but we also have an opportunity in Nevada you can apply for. Those job range from $300-$1500 a day and most of them are in person. COVID safety compliance is mandatory for anyone hiring through our platform.

Learn more how Oncata works here.

2 Get your photos commissioned.

Oncata also is a platform where brands can commission photos directly from you. During this time a lot of companies are choosing to pay for home photos and videos. So next time you see a call for user content, send us your pics! Chances are, you can make between $200-$500 from home just by sending us your content.

3 Become an Oncata Connector

We are rapidly growing our community and need people to help us. When you do outreach for us and people mention you as a reference you get paid! It’s $100 guaranteed for outreach and as many people as you can bring, you’ll make $10 for anyone who mentions your name on the form! Apply here.
Salaried Employees vs Independent Sales Reps: Which is best for your global enterprise?
By: Maria Adam
Tags: Independent Contractor, Global Companies, Global Peo, Salaried Employees, Gig Economy

Salaried Employees vs Independent Sales Reps: Which is best for your global enterprise? Maria Adam Follow Jan 21 · 4 min read

There is no question that technology has fueled a global gig economy that enables freelancers and small business contractors to engage with enterprises of all sizes. While some businesses benefit from as-needed services from independent contractors and sales representatives, there are some down sides for both companies and contractors, and many businesses gravitate to traditional employer-employee relationships.

Employee vs Contractor

While both salaried employees and independent contractors perform similar tasks for businesses, there are several distinct differences that define their relationship to, and interactions with, the employer.

Please mind the ✅ — Benefits and ❌ — Risks connected with both* :

Employee or a salaried worker pays FICA taxes just like their employer in equal parts.

Contractor, also called a commission-based worker is responsible for paying self-employment (SECA) taxes.

Check the below infographics for a greater visibility:

Risks of Hiring Contractors Over Employees

For many businesses who are expanding overseas, it may seem sensible to start off with local independents in the interest of saving money on taxes, benefits and the cost of establishing a legal entity. However, working with foreign independent contractors has multiple inherent risks.
Well thought out article, thanks for the insight into the nature of the gig economy.
By: Dudley Fagan
Tags: Future, Tradition, Gig Economy, Ideas For Change, Automation

Well thought out article, thanks for the insight into the nature of the gig economy. That of subsidized services on the back of financially indentured workers, who often can’t see the long term economic impact of the gig until it’s too late. It will only get worse as more automation changes the nature of work. There will be more workers than jobs. If you want your basic needs met there will be even more competition driving prices down for workers but up for owners. This will become true for more and more types of work.

Traditionally I’ve been a strong advocate for capitalism and entrepreneurship, but the economic engine of today is for winner take all network effects, and lots of losers. Even Micro-winners get purchase by tech giants, who then consolidate more of the idea/market space or kill the competition. Innovation should be available at all levels of society and rewarded, not just in Silicon Valley and Wall Street. Surely we have the tools today to imagine such a society and then create one.

My thoughts are we need to push for guaranteed income experiments, well educated citizenry, personal data with market choice and compensation, and then work toward direct democracy in all the largest economies. Would these policies stabilize markets, wages and freedom?

Our economic and political systems are young less than a few hundred years old. They are not the only way to structure human society. We need to be open to new ideas, and encourage experimental policies, communities and government structures. Then we can design based on evidence, not just political narratives, or human biases and tribalism. Think about these issues when you vote and inform politics to get long term change.

My discourse is finished, thanks for reading. I’m working on longer articles to expand on these ideas, clap if you want to hear more.
Durians Daily #108: Malaysia’s on-demand work platform GoGet secures US$2 million in new funding round; Doyobi founder shares why change in education can’t happen alone; HelloGold selected for pilot p
By: Southeast Asia
Tags: Edtech, Funding, Series A, Gig Economy, Fintech

Missed out the last Durians Daily? Go here to check it out.

You can also find us on LinkedIn, Facebook, Twitter, and Instagram.

500 Startups is a venture capital firm on a mission to discover and back the world’s most talented entrepreneurs, help them create successful companies at scale, and build thriving global ecosystems. In Southeast Asia, 500 Startups invests through the pioneering 500 Durians family of funds. The 500 Durians funds have backed over 200 companies across multiple sectors from internet to consumer to deep technology. It continues to connect founders with capital, expertise and powerful regional and global networks to help them succeed.

This post is intended solely for general informational or educational purposes only. 500 Startups Management Company, L.L.C. and its affiliates (collectively “500 Startups”) makes no representation as to the accuracy or information in this post and while reasonable steps have been taken to ensure that the information herein is accurate and up-to-date, no liability can be accepted for any error or omissions. All third party links in this post have not been independently verified by 500 Startups and the inclusion of such links should not be interpreted as an endorsement or confirmation of the content within. Information about portfolio companies’ markets, competitors, performance, and fundraising has been provided by those companies’ founders and has not been independently verified. Under no circumstances should any content in this post be construed as investment, legal, tax or accounting advice by 500 Startups, or an offer to provide any investment advisory service with regard to securities by 500 Startups. No content or information in this post should be construed as an offer to sell or solicitation of interest to purchase any securities advised by 500 Startups. Prospective investors considering an investment into any 500 Startups fund should not consider or construe this content as fund marketing material. The views expressed herein are as at the date of this post and are subject to change without notice. One or more 500 Startups fund may have a financial interest in one or more of the companies discussed.
This Week in Rideshare: Prices, Prop. 22 and Taxis.
Tags: Uber, Lyft, Gig Economy, Taxi, Ridesharing

Fares stay high, Prop. 22 gets a bashing, and taxis on the rise. LegalRideshare breaks it down.

MONDAY 8/23/21

Why are Uber and Lyft fares expensive? Yahoo Finance explains:

It has everything to do with the pandemic. “The pandemic demonstrated the volatility of the ride-hailing industry with early sharp reductions in passenger demand and subsequent reductions in driver supply,” said Stan Caldwell, executive director of Carnegie Mellon’s Traffic21 Institute. Peter C. Earle, an economist at the American Institute for Economic Research, explained that owing to a shortage of drivers, surges (and the higher prices associated with them) have become more common.

TUESDAY 8/24/21

After a judge ruled Prop. 22 unconstitutional what happens now? Los Angeles Times explains:

Since a ballot initiative cannot be amended after it is passed by voters, any unconstitutional provision renders it unenforceable. But UC Berkeley law scholar Catherine Fisk, who filed an amicus brief in the case on behalf of the plaintiffs, said the companies could win a stay on the judge’s ruling in the next two weeks. After consideration by the state court of appeals, it will eventually be decided by the California Supreme Court, she said, adding that the process could take a year.

WEDNESDAY 8/25/21

A driver is seeking justice after being robbed at gunpoint. ABC 8 News reported:

This incident triggered flashbacks from a past relationship that Beverly described as abusive. “Since then I cannot even talk to men and I can barely drive, so it just added on to just that trauma,” she said Now Beverly is calling for the robber to turn himself in. “Even though I don’t really like all the things of the justice system, there are a lot of things it can do to help you think about your choices in life,” she said. Beverly is hoping that anyone who knows who the robber is, or if they have any information about the incident to call the Richmond Police Department or Crime Stoppers.

THURSDAY 8/26/21

Uber arrived in Oxford and taxi drivers aren't too thrilled. BBC News explains:

During a protest outside Oxford Town Hall, organizer Azmat Sherwani said: “Nationally Uber have not been able to get a license in many areas, so what they’ve done is they’ve purchased the largest technology provider in the taxi industry. “What this has allowed them to do… is enter different areas without having a license. “They [customers] will be arriving from London, but now they already have Uber downloaded and they’ll be using that — it’s going to have catastrophic effects on local drivers and local operators.”

FRIDAY 8/27/21

While Uber fares continue to rise, NYC taxis take a win. Business Insider reported:
Developing Your Personal Brand at Work
By: Warren Ferster
Tags: Career Strategies, Personal Branding, Branding, Warren Ferster Manchester

Branding isn’t just for businesses seeking to maximize online visibility, although that’s how this concept first began. Today, anyone can develop a personal brand and use it to help them follow their chosen career path. Here are a few tips for pursuing your personal brand in the workplace.

Develop Your Brand

The first step in personal branding is to create a package that’s worthy of branding. This involves taking an insightful look at yourself to identify any talents that can be cultivated into useful skills. You should also determine which personality traits you would like to emphasize as a part of your brand. Your goal is to include desirable traits and skills that employers will want to add to their team, so choose characteristics that will help you stand out. Any skill or characteristic that you claim to offer should be verifiable and reliable.

Get Honest Feedback

If you have ever had to complete an online employment assessment, you know that many of the questions you’re asked revolve around what a supervisor or co-worker thinks about you. It’s possible to get a jump on these types of questions by asking your supervisors and co-workers these questions ahead of time. You can ask them to provide you with blunt and honest answers. The feedback they provide can help you adjust your behavior and practices to improve your personal brand. You’ll never be the perfect employee to everyone, but using feedback can help you correct the flaws that most people see in you.

Don’t Be Afraid to Volunteer

Anytime a new opportunity is presented, you should be among the first to volunteer for it. This will help you earn a good reputation with your employer and supervisors for being the “go-to” employee who isn’t afraid of new challenges. That’s a good quality to add to your personal brand. Additionally, it will expose you to new situations in which you can learn new facets of the organization’s operation.

These tips will help you create and grow your personal brand, which will, in turn, help you advance your career. Just as companies must maintain a consistent philosophy in building their brand, you should adhere to the principles you use in creating your personal brand. This will help co-workers, supervisors, and potential employers develop trust in your work ethic, expertise, and integrity.
The Reputation Formula
By: Brand Builders Group
Tags: Personal Branding, Branding, Reputation Management, Business, Social Media

By definition, your reputation is the general belief or opinion that other people have about you. It is the general BELIEF or OPINION that OTHERS have about you.

Whether or not you have that belief or opinion of yourself does not matter.

At Brand Builders Group, we believe reputation is actually a formula that looks like this:

REACH X RESULTS = REPUTATION

There are people in this world that are amazing self-promoters. They have mastered the ‘humble brag.’ This person knows the right time, place, and medium to share an accomplishment that helps shape the perception that they want people to have of them.

And that is really important to do. Because here’s the thing, if no one knows what you’re doing (results) then your reputation is flat. It is neutral. When you have a flat reputation, it is equivalent to not having one.

On the flip side, there are people who have a lot of influence (reach). They may have built a large social media following randomly or they are natural born connectors, but they have never thought about creating something to serve their built-in platforms.

ALSO: The Reputation Formula: Our Article In SUCCESS Magazine

For example, we have a client that built a Facebook page to over 550K followers in just a few short years. She started it as a book club and it exploded due to the popularity of the book. This client had the attention of more than 550K people and had no idea what to do with it to the point that she almost turned it over to a friend because it wasn’t something she was passionate about.

The point is, even if you already have a large audience, if it is not in line with your passion, then you end up doing a whole lot of nothing. When people don’t know what to associate you with or attach you to, again, your reputation flatlines.

The Formula

Another key point to this is the formula does not say the words Positive or Negative. It just says reputation. It’s simple. It works like this:

Good Results x Large Reach = Positive Reputation

Bad Results x Large Reach = Negative Reputation

Good Results x Small/No Reach = No Reputation

Bad Results x Small/No Reach = No Reputation.

If you are trying to build a brand or raise the profile of your business, you must have a reputation. To learn more about how to build your reputation, click here to request a free call.

Author: Elle Petrillo, Brand Strategist, Brand Builders Group