teleren/devto huggingface dataset:
Airshare - Transfer files over WiFi to all devices from the terminal 🚀
Tags: python, productivity, showdev, coding
Published: 2020-05-20 03:14:42

If you need to transfer a couple of hundred megs to a coworker or friend who's near you connected to the same WiFi, or you just wanted to transfer movies from your pc to your phone or vice versa, you aren’t short on options. In fact, options are thick on the ground, and all have their own issues. Don’t you wish you could send stuff directly to the other device with just one word, without any intermediate upload, login, cables, or pendrives?

{% youtube iJH6bkLRdSw %}

**Airshare** is a Python-based CLI tool and module that lets you transfer data between two machines in a local network, P2P, using Multicast-DNS.

{% github KuroLabs/Airshare %}

It's built with aiohttp and zeroconf. Handles large file transfers gracefully - content is sent chunk by chunk and never read into memory entirely.

Feel free to raise PRs for bug fixes and improvements.

Thanks for reading this, and hope you like Airshare! ❤️
A.I. Challenge for changing your selfie to Anime Style
Tags: ainize, docker, python, java
Published: 2020-05-20 02:38:37

 
https://youtu.be/MOMashl-W7M


What would Disney characters look like Anime style?

We, developers, have a lot of interesting when it comes to visual analysis nowadays. I was looking for a some fun project on Github and found this API. With this Open source, you can make selfie to anime by Machine Learning (AI).

The paper called 'UGATIT' and it was written by NCSOFT Vision AI Lab. 'UGATIT' means that Unsupervised Generative Attentional Networks with Adaptive Layer-Instance Normalization for Image-to-Image Translation.
As it said, unsupervised Image-to-Image translation, U-GAT-IT can generate undistorted image by focusing more on the distinct regions between source and target domain by exploiting the attention modules.

Thank you for reading!
and Enjoy it!


----------------------------------------------------------------------

GitHub repository
http://bit.ly/2U2hO0B
API and website deployed on Ainize
http://bit.ly/390JkQr
VSL Overview
Tags: octograd2020
Published: 2020-05-20 01:32:57

VSL is an experimental project to explore how modern optimizations can reduce the overhead needed to implement high-level semantics. The most common cause of overhead in modern languages is efficient and secure memory management. JVM is a fascinating case study in this respect as it is one of the most ambitious implements of a mark-and-sweep collectors. More novel approaches include reference counting which omit runtime interruption with a proportional overhead and rust-esque approaches which result in un-ergonomic syntax.

The goal behind VSL was to explore how effectively reference counts could be optimized and evaluated at compile-time. By operating at a low-level with expressive semantics, it makes an effective choice for interoperability which I developed basic demos for deployment for native iOS, Objective-C, Swift, and web platforms.

## Demo Link
See a (slightly outdated) demo on [Try it online!](https://tio.run/#vsl) 

## Link to Code
{% github https://github.com/vsl-lang/VSL %}

## How I built it (what's the stack? did I run into issues or discover something new along the way?)

This is one of the most theoretically and technically complex projects I've worked on. The major flaw was implementing the compiler in Node.js. VSL's syntax is a relatively advanced context-sensitive grammar and managing massive tree transformations and graphs in Node.js is the bane of tracing garbage collectors.

The goal of the language was to optimize the compiled code as much as possible however this is a relatively heavy task for the compiler. It requires manipulating large data structures to track data flow over tens of thousands of lines of code and graphs with potentially millions of nodes. Such a task would be better suited for a language like Go or C++ where a more asynchronous and more fine-grained implementation of the toolchain could be done.

The actual language itself runs on top of the LLVM compiler infrastructure along with some hacks I implemented in a bindings fork to best interact with underlying system libraries.

The WebAssembly layer runs on a (likely buggy) heap allocator which weakly manages references to JavaScript objects to be able to fully access DOM APIs from the language.

The Python interoperability layer was in progress but the compiler generated direct calls to CPython's libraries.

The Objective-C/Swift interoperability layer could seamlessly directly call any API through a Clang bridge.
After finishing my exams, I launched my startup
Tags: devgrad2020, octograd2020, showdev
Published: 2020-05-20 01:00:36

---
title: After finishing my exams, I launched my startup
published: true
description: I just graduated from Colegio San Ignacio and launched a startup.
tags: devgrad2020, octograd2020, showdev
---

I've been coding as a hobby since I was 10. I started building little projects and open-sourcing them and ended up building bigger and more ambitious projects. This year, after finishing my final exams, I launched a startup.

Meet [Sitesauce](https://sitesauce.app), a service that can convert any site into a static site and deploy it to [Vercel](https://vercel.com/home) in seconds.

I started building Sitesauce a few months ago (using my regular Laravel-Vue stack), but never found a time to finally set it live. After quarantine hit and we finished our exams, I finally decided to share it with the world. It's been around two weeks since the launch, and Sitesauce has reached its first $1k of revenue!

If you're curious and want to learn more about how the launch went, [I wrote an article about it](https://miguelpiedrafita.com/launching-sitesauce/). There's also [another one talking about my journey building the app](https://miguelpiedrafita.com/building-sitesauce/), if you're curious. You can also [follow me on Twitter](https://twitter.com/m1guelpf), where I'm sharing my journey as a maker.
Cole Rau’s Flatiron School Sinatra Project 
Tags: flatiron, sinatra, ruby
Published: 2020-05-20 00:28:25

# Project Description

I’ve created a Ruby CRUD MVC web app that allows users to signup, login, logout, write a review for a book, edit their review, delete their review, and see all the reviews they’ve made. A user’s reviews are persisted in a database unless a user decides to delete their review. One user cannot access another user’s reviews, nor login to another user's account. A user’s password is encrypted when it is stored in the database. 

To login, signup, create a review, or edit a review, a user fills out a form. To logout, see a review, or delete a review, a user clicks a button. 

My project’s schema (the database tables and their relationships to each other) is presented below:

![schema](https://dev-to-uploads.s3.amazonaws.com/i/wqic53ey3xcnhrgoufo5.jpg)
	
I used the following technologies in my project: 
- Sinatra
- ActiveRecord
- SQLite


#Project Process

My database caused several hiccups in my work-flow. When I wanted to re-seed my database, I ran ```rake db:reset``` in my terminal, but I received the following error:
```ActiveRecord::AdapterNotSpecified: 'development' database is not configured. Available: []```
My first attempt at a remedy was to delete my db folder. But when it wouldn’t return from my computer's trash folder, I decided to make a new Github repository. *My ultimate solution to reseed my database was to delete just the .sqlite file in the db folder, then run* ```rake db:migrate```*then* ```rake db:seed```


---
In another subject, organizing my project’s code was a bit of a challenge. I had some trouble understanding which controllers to use for what reason. In the end, I had a `sessions_controller`, a `users_controller`, a `books_controller`, and a `reviews_controller`. In hindsight, I could have deleted the `books_controller` and moved the code into the `reviews_controller`. This would have made my project easier to understand for other developers. 

The coding process wasn’t all a struggle - I did enjoy creating the forms and using some HTML to make my index page (http://localhost:9393/) look nice. I also added an image from Micah Ulrich’s fantastic online art collection. However, as a whole, I prioritized getting my code to function properly rather than focusing on how my website would look to the end-user. 

My project’s code can be found here: https://github.com/colerau/sinatra_project_v3
How to easily set up Material UI theme toggle in React
Tags: react, materialui, darkmode, lightmode
Published: 2020-06-20 15:01:06

---
title: How to easily set up Material UI theme toggle in React
published: true
date: 2020-05-20 00:00:00 UTC
tags: react, materialui,darkmode, lightmode
canonical_url: https://adityanaik.dev/how-to-easily-set-up-material-ui-theme-toggle-in-react
---

### Scaffold React Application


A new react app is easily scaffolded using

```bash

$ npx create-react-app my-app

```

### Install dependencies

I need to install material ui `core` package.

```

// with npm

$ npm install @material-ui/core



// with yarn

$ yarn add @material-ui/core

```

### Wrap application in Theme Provider

For the purpose of this demo, I will use `App.js` to set up everything.


- Add **Light** and **Dark** themes

```js

export const light = {

  palette: {

  type: 'light',

  },

}

export const dark = {

  palette: {

  type: 'dark',

  },

}

```

- Import `ThemeProvider` and `createMuiTheme`

```js

import { ThemeProvider } from '@material-ui/core'

import { createMuiTheme } from '@material-ui/core/styles'

```

- Set up the toggle logic

```js

const [theme, setTheme] = useState(true)

const icon = !theme ? <Brightness7Icon /> : <Brightness3Icon /> 
// Icons imported from `@material-ui/icons`

const appliedTheme = createMuiTheme(theme ? light : dark)

```

- Wrap the render inside `ThemeProvider` and pass the `appliedTheme`

```js

return (

 <ThemeProvider theme={appliedTheme}>

 //rest of the code

 </ThemeProvider>

)

```

- Trigger toggle using `onClick`

```jsx

 onClick={() => setTheme(!theme)}

```

Now our theme toggle logic is in place.

Add rest of the material ui components and see the toggle in action!

You can see a working example here, along with the code.

{% codesandbox 175t8 %}
BEM and Utility Classes for a scalable CSS architecture
Tags: css, bem
Published: 2020-06-14 14:10:34

---
title: BEM and Utility Classes for a scalable CSS architecture
published: true
date: 2020-05-20 00:00:00 UTC
tags: css, bem
canonical_url: http://blog.gnclmorais.com/bem-and-utility-classes
---

I’ve been trying to define my way of writing and thinking about CSS for a while now, and I think I’ve cracked it. However, I’ve found that someone else wrote it down for me!

I’ve came across [this article](https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes) by [Sebastiano Guerriero](https://twitter.com/guerriero_se) titled “Building a Scalable CSS Architecture With BEM and Utility Classes” that describes what I believe my current approach is. It has been evolving throughout the years but I think I finally landed on solid ground.

This approach works especially well for a _component-less_ application (i.e. no React/Vue/etc. tool that allows you to _trully_ modularise components). There is global CSS everywhere but you have to put practices into place that will help you **reduce side effects** and write **refactoring-friendly** CSS.

- **Use BEM to build logical components**  
Use this mostly to describe the inner parts of your components (cards, navbars, footers, forms, etc.)
- **Rely on utility classes for non-crucial details**  
This means animations, variations on fonts, margins and paddings, and other small visual attributes

This is a small summary of the [whole article](https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes) (please go read it, it is worth your time), but it crystallizes my view quite well. As someone that has been working in the same fast-moving startup for almost five years, I can’t tell you how many component variations we end up doing. We don’t have time to stop all development work and spend a few weeks creating a design system. We have to do this as we build features and, to be honest, that’s like trying to change parts of a car while you’re driving on the highway going somewhere.

![I don’t want to be doing this with my code…](https://media2.giphy.com/media/Wc48iceXhpvtm/source.gif)

In a situation like this, you learn how to **write CSS defensively** and to be kinder to your future self. You start seeing the problems you can encounter when you tie things together and leave no room for a fast, clean removal of things. Using BEM for the skeleton of components and finishing them off with utility classes has allowed us to quickly iterate on modules as we reuse and polish them. When I can’t rely on tools like React, Vue, and the like, this is what I go for.
Windows News 05-2020
Tags: windows, microsoft
Published: 2020-05-20 12:57:02

---
title: Windows News 05-2020
published: true
date: 2020-05-20 00:00:00 UTC
tags: windows,microsoft,news
canonical_url: 
---

The holy triumverate of Windows, Mac, and Linux is well established in my industry. Mac and Linux have legions of fans on the interwebs, but keeping an eye on the Windows ecosystem is part of my reality.

[PowerToys 0.18](https://github.com/microsoft/PowerToys/releases/tag/0.18.0) includes a Spotlight-esque launcher. `Win+R` always felt like a consolation prize with fancier options like [Alfred](https://www.alfredapp.com/) on other platforms. [The Verge has a write-up with pics](https://www.theverge.com/2020/5/19/21262060/microsoft-windows-10-launcher-powertoy-spotlight-alfred-download-build).

[Rust/WinRT Public Preview](https://blogs.windows.com/windowsdeveloper/2020/04/30/rust-winrt-public-preview/). I’m not a Windows guru, but I’ve long been under the impression that WinRT/UWP was still over-shadowed by many developers’ preference for Win32. In any case, I just think this is neat because I like Rust.

[WinForms Designer for Net Core](https://devblogs.microsoft.com/dotnet/windows-forms-designer-for-net-core-released/). Drag-y and drop-y tools are neat.

[Windows Package Manager](https://devblogs.microsoft.com/commandline/windows-package-manager-preview/). Given the ubiquity of package managers in the \*NIX world I always found the absence on Windows… perplexing. I’ve got mixed feelings about this one. [Chocolatey](https://chocolatey.org/) (and a few others) have existed for a while, but can’t be relied on for **everything**. Maybe with official MS support and dog-fooding by PowerShell, VS Code, .NET Core/5, etc. teams this will be the “package manager we deserve”.

[.NET 5 Preview 4](https://devblogs.microsoft.com/dotnet/announcing-net-5-preview-4-and-our-journey-to-one-net/). The impending “one .NET to rule them all”.

[PowerShell 7.1 Preview 3](https://devblogs.microsoft.com/powershell/powershell-team-may-2020-update/) based on .NET 5. Also includes [PowerShellGet 3.0 preview 3](https://devblogs.microsoft.com/powershell/powershellget-3-0-preview-3/) which will hopefully get integrated with their new package manager along with nuget.

[WSL2 will include GPU and GUI support](https://ubuntu.com/blog/new-gpu-and-gui-features-announced-for-wsl-at-build), including [DirectX support for Linux](https://devblogs.microsoft.com/directx/directx-heart-linux/).

Finally, [Windows Terminal 1.0](https://devblogs.microsoft.com/commandline/windows-terminal-1-0/).
Need Advice on React App, Contact Form
Tags: react, node, devops
Published: 2020-05-19 23:24:48

Hi All,

New to React and Node, and this is my first post to Dev.to, but I think I need some advice on deployment / connecting to back-end logic / security.

I just built my first 'production' site with Create React App, a portfolio site, and it is currently deployed to a Digital Ocean VPS running an Apache server. (I am coming from working mostly with WordPress and I use Linux full time, so I was pretty comfortable setting that all up.) To deploy, I just ssh'd the ./build/ directory to the /var/www/html/ directory on my VPS and it works.

I still need to tweak some things and styles, but the static front-end of the site is currently live here:
https://ronholt.info

So right now it's just a static site. I need to make the Contact form functional next, and I know there are a thousand different ways to do this, but I just need something simple. However, this is leading me down a rabbit hole of analysis paralysis. There are a couple of big questions I have:

1. I chose to set up an Apache server just because I'm familiar with it, but is it more common / recommended to simply use 'npm serve' or Express or other Node-based framework to serve the site?
2. What's the best way to handle sending simple email notifications? I'm looking at using Nodemailer
3. Regardless of the solution, I'm going to need to store SMTP credentials somewhere. I know it's obviously dumb to hard code them into a front-end script, but I'm wondering where to write the method to actually send the email, even with, say, an imported secrets file. Will that be exposed when I compile the build package?

Possible solutions I'm thinking about:

-Set up a separate Node app with an Express API endpoint that my front-end React app submits a POST request to

-Switch to a Node-based server on the VPS.
--If I do this, will it automatically serve only the necessary public files while leaving access to the back-end method / credentials?
--Or, will it expose my credentials in the build and I will still need to set up a separate app / API for back-end methods like that.

I'm sure this is obvious to somebody more experienced with this, but I'm just having a hard time wrapping my brain around where the line is drawn between the React front-end and the Node back-end.

Any help would be appreciated!
Bootcamp final project 🥳
Tags: devgrad2020, octograd2020
Published: 2020-05-19 21:51:16

## My Final Project
As part of my full stack 16 week development bootcamp we spend the final 4 weeks working on a team project. I was in a team of 3. Jodie, Mel and I built a Bootcamper Network App for alumni and current school of code bootcampers to connect and share details of their roles etc. We loved building this app together and worked in sprints of 5 days to firstly meet our MVP and then achieve some of our stretch goals. 

## Demo Link
[Bootcamper Network App](https://bootcamper-network.netlify.app/)
Our app is live for now but we are planning to continue to work on it whilst we wait for the job offers to role in...!
We did a live demo last week, so if you're interested, please have a watch (we start at about 16 mins into the vid) 

<a target="_blank" href="https://www.youtube.com/watch?v=GMoxQ1RvbzU" > <img src="https://dev-to-uploads.s3.amazonaws.com/i/cryuti4ki2mbyejp18w5.png" width="500" alt="front page of app presentation"/></a>

## Link to Code
{% github https://github.com/SchoolOfCode/Bootcamper-Network-App-React %}
{% github https://github.com/SchoolOfCode/Bootcamper-Network-App-Back-End %}

## How we built it
- We used React to build the front end and we decided to build it as a progressive web app so that we could have one code base that worked flexibly across all devices. We built it mobile first, but currently it only looks nice on mobile...we still need to work on desktop sizes!
- We chose to use google firebase for user authentication
- We used the meet up pro api to pull in local tech events. We discovered we needed to use OAuth2 to interface with the api. This was a giant faff and took us a long time to get to grips with, but we did it!
- We used the google maps api to embed little maps for company locations, i really like this!
- We challenged ourselves to learn a bit more about AWS so used RDS and elastic beanstalk for our database and for hosting our back end. Elastic beanstalk has a really nice cli that let us deploy our back end code easily quite early on. 
- We used nodejs and express for our server as we knew it and felt very comfortable with it. 


## Additional Thoughts
We're really proud of our app. There is still more we'd like to do (push notifications, fixing the edit form patch request, adding form validation, private messaging) but after 12 weeks of learning and 4 weeks of building I think we did a great job and i'm really proud of it!

Thank you for letting me share our app!
Running Scheduled Firebase Functions Locally
Tags: firebase, local
Published: 2020-05-19 22:58:09

<!-- wp:paragraph -->
<p><strong>TL;DR</strong> Use<code class="language-bash"> $ firebase functions:shell</code> and then type in the name of your function (tab autocomplete is available) along with any arguments you need to pass and press enter. You receive the output to the console.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>While developing Firebase Functions, we need to run them locally to ensure that everything works as we might expect before we deploy the function to the cloud.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For HTTP Functions, it's a straightforward process to run <code class="language-js">$ firebase serve</code> in the terminal and then visit the browser.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Firebase Scheduled Functions can have one of several triggers (similar to HTTP Functions that are triggered by a HTTP Request).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The problem is that we often cannot set up the trigger for Scheduled Functions the way we can for HTTP Functions.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For example, with the PubSub triggers it would be impractical to try to set up a pubslisher-subscribe system on our local environments and test that our functions run every minute as prescribed.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We'll instead leave that to the Firebase team. Instead, we want to test that our functions executes as it should.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Use<code> $ firebase functions:shell</code> and then type in the name of your function (tab autocomplete is available) along with any arguments you need to pass and press enter. You receive the output to the console.</p>
<!-- /wp:paragraph -->