teleren/devto huggingface dataset:
How to crop image in browser using JIMP?
Tags: html, javascript, jimp
Published: 2020-07-26 15:09:18

I had a situation where I had no backend server to handle the crop and resizing of an image. I know of a few cloud services which could do this easily however they come with a cost. So I thought to implement the solution within the browser itself. Before we proceed, let we warn you that this might not be an optimal solution for a page with a lot of images and which might require the use of web worker to offload the task to worker threads.

[Read full article](https://tutorial.tips/how-to-crop-image-in-browser-using-jimp)

Output

![Crop image vs original image JIMP output](https://dev-to-uploads.s3.amazonaws.com/i/bbsdg8puztuctabsh7dn.png)
Calling all developers around Oslo!
Tags: it, development
Published: 2020-07-26 15:09:17

---
title: Calling all developers around Oslo!
published: true
description: Start a gathering! 
tags: it, development
cover_image: https://assets.simpleviewcms.com/simpleview/image/upload/c_limit,h_1200,q_75,w_1200/v1/clients/norway/Barcode-Oslo-Norway-2-1_bd5d9b33-a6cf-4db3-b77d-ff8ca69f8edf.jpg
---

Hello! 
I just moved to Oslo to work! As I am pretty alone here it would be a great time for me to get to know some people in Tech! I love to fika and talk nerdy stuff but also I wish to learn more about Oslo, Norway and how the IT landscape is evolving in here. Perhaps also learn to understand Norwegian. 

I'll try find some meetup groups as well but would be nice to meet people from Dev.to!
ACCESS CANVAS LMS API USING POWERSHELL
Tags: powershell
Published: 2020-07-26 14:59:28

In this post I will demonstrate how to use the Canvas LMS API. I will create a course and grading standard (scheme) in Canvas. Then I will use PowerShell to create a script that pulls course data using the Canvas LMS API. Finally, the script will update the courses grading standard. This process can be extended to dynamically set grading standards / schemes for your institution based off of student information systems (SIS) data. This is useful because the SIS import process in Canvas does not allow you to set the grading scheme.


[Read more](https://teckstack.io/teck-blog/access-canvas-lms-api-using-powershell/)
Basics of Scraping with Python 🐍
Tags: python, webdev
Published: 2020-07-26 14:57:13

![Snap](https://dev-to-uploads.s3.amazonaws.com/i/8ipi7mjpvgb1gclc1pu1.png)

## Prologue
Hello, in this post I am gonna describe the process of writing a scrapper script in Python, with the help of the Beautiful Soup library.

## Installing the dependencies
First of all, since Beautiful Soup is a 3rd-party community project, you have to install it via the PyPI registry.
```sh
pip install beautifulsoup4
```

## Philosophy of Beautiful Soup
BS is a library that sits atop an HTML/XML parser (in our case it's the prior)

## Basic Script
Now that we know how it works, let's write a tiny script:
```py
from urllib.request import urlopen
from bs4 import BeautifulSoup
import requests


WEBSITE = "https://google.com"


html = urlopen(WEBSITE)
bs = BeautifulSoup(html.read(), 'html.parser')
```
In this example, we also make use of the `urllib` requests library, this just downloads the HTML for us.
Then, we read it with the pre-declared `html` variable that contains the google.com document

## Parsing data
Sometimes, we want to get specific parts of a document, such as a paragraph or an image.

You can search for a specific HTML tag in BeautifulSoup with the find() attribute.

Let's scrape the Google logo tag from their homepage!
Add the following lines of code to the already existing file:
```py
google_logo = bs.find('img', { 'id': 'hplogo' })
print(google_logo)
```
This two lines of code will hopefully produce this output:
```html
<img 
alt="Google" 
height="92" 
id="hplogo" 
src="/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png"
style="padding:28px 0 14px" 
width="272"/>
```

So, how does this work?
Well, we are using the find() method and passing to it some arguments.
To be exact, we are telling it that we are searching for an `<img>` tag with an id called `'hplogo'`

## Epilogue
That's all.
To learn more about Beautiful Soup, read the [docs](https://www.crummy.com/software/BeautifulSoup/bs4/doc/)
ENABLE SMTP FOR OFFICE 365
Tags: powershell
Published: 2020-07-26 14:56:04

I recently signed up for a office 365 account for my domain. I tried to create a simple C# application that sends emails via SMTP. I was getting the following error "The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.7.57 SMTP; Client was not authenticated to send anonymous mail during MAIL FROM [CH2PR18CA0002.namprd18.prod.outlook.com]". This error also prevented me from setting up database mail in SQL Server. I followed the Microsoft documentation and tried the direct SMTP Auth, direct send, and Office 365 SMTP relay methods. After a ton of Googling and wasting more time then I am willing to admit I finally landed on a solution that worked for me.


[Read More](https://teckstack.io/teck-blog/enable-smtp-for-office-365/)
Quick Tip: Appcelerator Titanium Dark-Mode colors
Tags: appcelerator, titanium, app, mobiledev
Published: 2020-07-26 14:35:49

In the upcoming Appcelerator Titanium release 9.1.0 (currently available as a nightly build from http://builds.appcelerator.com/) you can use custom color names for normal or night/dark-mode. 

## How to
As previously you have to create a `semantic.colors.json` file at `app/assets/semantic.colors.json` with your colors:

```
{
    "windowBackgroundColor": {
        "dark": "#212121",
        "light": "#ffffff"
    },
    "text": {
        "dark": "#ffffff",
        "light": "#212121"
    },
    "bright": {
        "dark": "#212121",
        "light": "#ffffff"
    }
}
```

## Before 9.1.0
Before 9.1.0 you'll have to redefine your colors like this:
```
Alloy.CFG.color.windowBackgroundColor = Ti.UI.fetchSemanticColor("windowBackgroundColor")
```
and use that in your TSS file
```
"Window": {
  backgroundColor: Alloy.CFG.color.windowBackgroundColor
}
```

## After 9.1.0
Starting with 9.1.0 you can just use the semantic name:
```
"Window": {
  backgroundColor: "windowBackgroundColor"
}
```
No need to redefine it!

If you want to check if your app is in dark/night mode you can use this inside your controller

```
if (Ti.UI.userInterfaceStyle == Ti.UI.USER_INTERFACE_STYLE_DARK) {
  // dark mode
}
```
Might be useful if you want to change something else depending on your mode.

## Under the hood (Android)
For Android it will create two XML files during build:
```
build/android/app/src/main/res/values-night/ti.semantic.colors.xml
build/android/app/src/main/res/values/ti.semantic.colors.xml
```
Inside those files you'll find your defined colors. If you have some errors or wrong colors it might be useful to have a look at the generated files.
Passed the test, next class that covers Psudo Programing [WGU basics]
Tags: webdev, codenewbie, database, sql
Published: 2020-07-26 14:20:34

The first class was defined terms for IT professionals.  Passed the exam.  This class is Psudo Programing to learn loops and "if" statements without learning syntax.  It appears people have passed it within 14 days. Still want to piviot to UX & UI design with DB back end.  Onward and Upward.
Trying to g move from WSL 1 to 2 
Published: 2020-07-26 14:11:17



I believe that I followed the instructions but it is not migrating properly.  At a loss to complete the upgrade.

PS C:\WINDOWS\system32> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-18.04    Running         1
PS C:\WINDOWS\system32> wsl --set-version Unbuntu-18.04 2
There is no distribution with the supplied name.
PS C:\WINDOWS\system32> wsl --set-version Unbuntu 2
There is no distribution with the supplied name.
PS C:\WINDOWS\system32>
Why take a Java certification?
Tags: certification, java, skills
Published: 2020-07-26 14:05:45

This post is about my experience with Java Certifications and I´m assuming that content could be applied in other areas/certifications.

## Table Of Contents
* [Why](#why)
* [How tough it is?](#howtoughitis)
* [My certifications](#mycertifications)
* [Final words](#finalwords)

### Why <a name="why"></a>
These were my "why" to try and take some certifications
* Better understanding of technology
* Enhance my developer skills
* Have a better CV
* In a interview you can go deeply in some topics and show what you know about.
* Write articles and participate on discussion topics about technologies and not only be a reader.

### How tough it is?<a name="howtoughitis"></a>
* Back in time, more precisely in 2006 was very tough to take maybe because was my first the Java Programmer 1.4 and was very anxious and had afraid to fail, it could be happened.
* Have time to study and sometimes create brain muscle to study every or 5 times a week at least.
* Try using great mocks, because on my last try I bought one mock that give a bunch of wrong answers and I fail on the test.
* Fail is normal more than I thought, the thing to do is have a time for you review the failed topics, study be calm and schedule another test.

### My certifications<a name="mycertifications"></a>
All my certifications are related with Java and check out below:

| Year | Name                                                                     |
|------|--------------------------------------------------------------------------|
| 2015 | Oracle Certified Master, Java EE 6 Enterprise Architect                  |
| 2008 | Sun Certified Enterprise Architect for Java Platform EE 1.3              |
| 2007 | Sun Certified Business Component Developer for the Java Platforn, EE 1.3 |
| 2007 | Sun Certified Web Component Developer for the Java Platform, EE 1.4      |
| 2005 | Sun Certified Java Programmer 1.4                                        |

### Final words<a name="finalwords"></a>
* Do it by yourself because in my case the certifications having me help until nowadays to thing how to solve problem no matter how old I took.

Cover image credits - ![https://unsplash.com/@landb?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText](https://unsplash.com/@landb?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)

Thank you by your time reading my post. If you've any question, please let me know.
elm-tsでReactの代わりにPreactを使う
Tags: react, preact, typescript
Published: 2020-07-26 14:03:23

---
title: elm-tsでReactの代わりにPreactを使う
published: true
description: elm-tsという、fp-tsのエコシステムでElm Architectureを実装したフレームワークにおいて、デフォルトで使うことになっているReactの代わりにPreactを使う方法を紹介します。
tags: React,Preact,TypeScript
// cover_image: https://direct_url_to_image.jpg
---

## TL; DR

- `gcanti/elm-ts` というライブラリがあり、[fp-ts](https://github.com/gcanti/fp-ts)で[Elm Architecture](https://guide.elm-lang.org/architecture/)を実装している
- elm-tsは`virtual-dom`の代わりにReactを使っているがPluggableである
  - > `React` instead of `virtual-dom` (pluggable)
  - しかし、具体的にどのように他のVirtual DOMの実装を使えばよいか具体的な記述はない
  - この記事ではPreactを使う場合の具体的なやり方を紹介する。おそらく同じやり方で他のVirtual DOMの実装（snabbdom-modulesなど）も使うことが出来るはず

## やり方

一言で言えば、`elm-ts/lib/React` の `Html` インターフェースの代わりにPreact Compatibleな `Html` インターフェースを自前で定義して使えばok。

```typescript
/**
 * `Dom` is a `ReactElement`.
 * @category model
 * @since 0.5.0
 */
export interface Dom extends ReactElement<any> {
}
/**
 * `Html` has `Dom` type constrained to the specialized version for `React`.
 * @category model
 * @since 0.5.0
 */
export interface Html<Msg> extends html.Html<Dom, Msg> {
}
```

`elm-ts/lib/React` の `Html` インターフェースの定義はこんな感じなので、`Dom`(=`ReactElement<any>`)をPreact相当のものに差し替えればよさそう。

```typescript
// Instead of Html, use PreactHtml
export type PreactHtml<Msg> = Html<h.JSX.Element, Msg>;
```

よしなにview functionの定義で `PreactHtml` を使う。

```typescript
export function view(model: Model): PreactHtml<Msg> {
  return <div>...</div>
}
```

あとは `program` を `run` するだけだが、`React.program` を使うことはできないので `elm-ts/lib/Html` の `program` を次のようにして使う。

```typescript
import { programWithDebuggerWithFlags } from "elm-ts/lib/Debug/Html";

import { Flags, Model, Msg, flags, init, update, view } from "./App";
import { programWithFlags, run } from "elm-ts/lib/Html";
import { VNode, h, render } from "preact";

// React.programはもういないんだ
const program = process.env.NODE_ENV === "production" ? programWithFlags : programWithDebuggerWithFlags;

// もうあの時間は終わって、君も人生と向き合う時なんだ
// programのGenericsの4つ目にpreactの VNode を使っているところに注意
const main = program<Flags, Model, Msg, VNode>(init, update, view);

const app = document.getElementById("app");
if (app === null) {
  throw new Error("id=appな要素がない");
}

run(main(flags), dom => render(dom, app));
```

おわり。

## おことわり

- elm-tsはできて間もないライブラリなので仕様がすぐ変わり、このやり方では動かなくなるかも
  - 公式のREADMEにPRを出さずにBlog Postにした理由はこれ
Audio Player with Wavesurfer.js & React 🏄🏽‍♂️
Tags: react, audio, wavesurfer, tutorial
Published: 2020-07-26 13:43:45

Recently I was in need to set a simple view that can show audio file waveform and play its audio using React.JS. After some googling, I found this [Wavesurfer.js package](https://wavesurfer-js.org/). It has pretty exciting use examples, except it lucks of React.JS example, which as we know lives in its [own virtual world](https://reactjs.org/docs/faq-internals.html), what force you write code in its specific way. So, I share my example here with some main points. 

### Here is the final result (with some soundcloud-like style)

{% codesandbox bd499 module=/src/Waveform.js %}

# Code In Details

## 🌊 Reference to DOM

We can import package and use the module as usual. 

```js
import WaveSurfer from "wavesurfer.js";

WaveSurfer.create({ container: someDiv });
```

Most tricky things happen when React rerenders component replacing DOM elements and old ones lost. `WaveSurfer.js` doesn't expect these changes, so we need to provide an alias to a needed HTML element within React. 

We can do it setting `ref` to some element and passing this `ref` to WaveSurfer object on creating. 

```js
const waveformRef = useRef(null);

useEffect(() => {

  WaveSurfer.create({ 
    container: waveformRef.current
  });

}, []);

return <div ref={waveformRef} />;
```

## 🐟 Reference to Audio Player

A similar thing we need to do to access Wavesurfer instance from our React component. Again, because of React nature, on each rerender React component born in a new body (function) and it doesn't have access to variables from previous live. So we need to save it between rerenders with similar `ref` technique. 

```js
const wavesurfer = useRef(null);

useEffect(() => {
 
    wavesurfer.current = WaveSurfer.create(options);

    // Removes events, elements and disconnects Web Audio nodes.
    // when component unmount
    return () => wavesurfer.current.destroy();
  }, [url]);
```

And, when component life is over or when we want to create a new instance we need to destroy the previous one manually, otherwise, you will have multiply copies displayed on the screen and you won't have access to them.

Lastly, at this stage, we need to destroy the old instance and create a new one each time we will have `url` property changed. Based on docs, looks like you can use the same instance over-and-over, but for me, it wasn't updated properly so I did it this way.  

```js
useEffect(() => {
  ...
}, [url]);
```

## 🦦 That's all.

That is actually all you need to do specific to React - Wavesurfer.js communication. Next, you can follow [Wavesurfer.js docs](https://wavesurfer-js.org/docs/methods.html) on how to use it. For example:

```js
wavesurfer.current.load(url);

wavesurfer.current.on("ready", function() {
  // https://wavesurfer-js.org/docs/methods.html
  wavesurfer.current.setVolume(0.5);
  wavesurfer.current.play();
});
```
Keeping your medium content fresh in your 11ty website using Github Actions and Netlify
Tags: githubactions, jamstack, netlify, 11ty
Published: 2020-07-26 15:22:26

---
title: Keeping your medium content fresh in your 11ty website using Github Actions and Netlify
published: true
date: 2020-07-26 13:37:50 UTC
tags: githubactions,jamstack,netlify,11ty
canonical_url: 
---

On my personal website I use Medium as my content platform so I can channel my content via multiple channels. This is great because it allows me to take advantage of medium’s rich text editor and the [implementation](https://github.com/code-mattclaffey/personal-site/blob/master/src/site/_data/blog.js) is really easy to do in 11ty.

### Tech Stack

[Website](https://mattclaffey.co.uk/)

The website is built by a popular framework called 11ty which is just a simple static site generator that helps you build Jamstack websites. It gets the medium data at the build time so it can build the blog pages before deploying them to Netlify.

### Problem

The problem with this approach is that my content has a dependency on Medium to trigger a webhook that will trigger my Netlify build but it doesn’t have anything like that unless you upgrade your account.

### Solution

The requirement I gave myself was to have the ability to keep my content fresh on the site. I post blog posts every couple of weeks so for me having a build at the end of the day is more than enough for what I wanted it to do.

I needed to figure out a way to trigger a Netlify build everyday just to keep the blog content fresh on my website. Netlify has a feature called build hooks which allows you to hit a Netlify endpoint that will then trigger a Netlify build.

You can access the build hooks in by going to Netlify —  **Settings > Build & deploy > Continuous deployment > Build hooks**.

![](https://cdn-images-1.medium.com/max/1024/0*MsqhjgltFIkc_uCW.png)<figcaption>Credit to Netlify website — <a href="https://docs.netlify.com/configure-builds/build-hooks/">https://docs.netlify.com/configure-builds/build-hooks/</a></figcaption>

Once the build hook is setup the next thing to do is to setup a Github action to hit this build hook endpoint every day or so. For example:

.github/workflows/main.yml

```
name: "Netlify Trigger - Get updates from Medium"

on:

schedule:

- cron: '0 0 \* \* \*'

jobs:

curl:

runs-on: ubuntu-latest

steps:

- name: curl

uses: wei/curl@v1

with:

args: -X POST -d {} https://api.netlify.com/build\_hooks/${{ secrets.NETLIFY\_BUILD\_HOOK }}
```

This takes around 20s…

> Note — make sure the build hook id is stored in your Github secrets so no one can spam your Netlify builds.

### Conclusion

The nicer approach to this would have been having a webhook that listens to an event from Medium to see when a new blog post has been added but to get you up and running a cron job daily seem to do the trick.

### Resources

- Build hooks with Netlify [https://docs.netlify.com/configure-builds/build-hooks/](https://docs.netlify.com/configure-builds/build-hooks/)
- Run your Github Actions workflow on a schedule [https://jasonet.co/posts/scheduled-actions/](https://jasonet.co/posts/scheduled-actions/)
Safely control your goroutine pipeline (safe-step)
Tags: go
Published: 2020-07-26 12:45:51

Goroutine is one of Golang best feature, with it we can do concurrent functions easily. But things can get pretty messy if some function is dependent to other function result, you will write lots of synchronization, which you can do using [channel](https://gobyexample.com/channels) or [waitgroup](https://gobyexample.com/waitgroups).

So I made a library to help you easily control your goroutine pipeline. 

{% github felixgunawan/safe-step %}

Let's jump right into example, assume you have 5 functions that needs to be run (f1-f5). And you want to structure it so f1,f2,f3 runs concurrently before running f4,f5 concurrently. You can do it easily with this code below.

```golang
package main

import (
	"fmt"
	safestep "github.com/felixgunawan/safe-step"
	"time"
)

func main() {
	step := safestep.New()
	step.AddInput("id", 1)
	f1 := func(input map[string]interface{}) (interface{}, error) {
		fmt.Println("function 1 started")
		fmt.Printf("id = %d\n", input["id"])
		time.Sleep(time.Millisecond * 500)
		fmt.Println("function 1 ended")
		return 1, nil
	}
	f2 := func(input map[string]interface{}) (interface{}, error) {
		fmt.Println("function 2 started")
		time.Sleep(time.Millisecond * 750)
		fmt.Println("function 2 ended")
		step.AddInput("id2", 2)
		return 1.5, nil
	}
	f3 := func(input map[string]interface{}) (interface{}, error) {
		fmt.Println("function 3 started")
		time.Sleep(time.Millisecond * 1000)
		fmt.Println("function 3 ended")
		return 3, nil
	}
	f4 := func(input map[string]interface{}) (interface{}, error) {
		fmt.Println("function 4 started")
		time.Sleep(time.Millisecond * 100)
		fmt.Println("function 4 ended")
		return "abcde", nil
	}
	f5 := func(input map[string]interface{}) (interface{}, error) {
		fmt.Println("function 5 started")
		fmt.Printf("id2 = %d\n", input["id2"])
		time.Sleep(time.Millisecond * 1000)
		fmt.Println("function 5 ended")
		return 5, nil
	}
	// this will :
	// 1. run f1,f2,f3 in goroutine and wait for all of them to finish
	// 2. run f4,f5 in goroutine and wait again
	// 3. return result of all function execution in map
	res, err := step.
		AddFunction("f1", f1).
		AddFunction("f2", f2).
		AddFunction("f3", f3).
		Step().
		AddFunction("f4", f4).
		AddFunction("f5", f5).
		Do()
	if err != nil {
		fmt.Printf("err = %v", err)
	}
	fmt.Printf("result = %v", res)
}
```
Output : 
```
function 1 started
id = 1
function 2 started
function 3 started
function 1 ended
function 2 ended
function 3 ended
function 5 started
id2 = 2
function 4 started
function 4 ended
function 5 ended
result = map[f1:1 f2:1.5 f3:3 f4:abcde f5:5]
```

This library have 2 main features : 
1. Safe execution, it will automatically recover from panic inside your function.
2. Context-aware (use `safestep.NewWithContext(ctx)`), so you can easily add timeout.

You can find out more about this library [here](https://github.com/felixgunawan/safe-step). Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Launching Portfolio 🥳 🎊 🎉
Tags: showdev, gatsby, saas, react
Published: 2020-07-26 12:45:23

Finally launched my personal website and blog, designed and developed myself. Built with Gatsby, React and flavor of SASS

[saikrishna.dev](https://saikrishna.dev)

Would love the DEVCommunity Feedback/Suggestions ❤️
Buttons With Animated Hover Effects using HTML & CSS only
Tags: css, beginners, tutorial, design
Published: 2020-07-26 12:28:24

{% youtube UGiJauE28D0 %}

In this Tutorial, we'll build Buttons With Animated Hover Effects UI Design using HTML & CSS only. This Project-based Tutorial is suitable for all especially Beginners.

📕 Image download link:  https://drive.google.com/drive/folders/1txh7ZCKt6bVtdA7VwyNYQI7A8JTLtUYk?usp=sharing

🧠 Concepts covered in this video:
 - Flexbox
 - CSS transitions
 - Transforms
- Modern Web Design


If you are interested in more real-world **project-based tutorials** then consider checking out the [**Code League**](https://www.youtube.com/channel/UCBF2LIwr2Odb3-pRnNBRegA) Youtube channel and inspire the tech industry.

Share this [video](https://youtu.be/UGiJauE28D0) with a friend

Let’s connect:
[Instagram](https://www.instagram.com/codeleague7)
[Twitter](https://www.twitter.com/codeleague7)