teleren/devto huggingface dataset:
Music Melon and learning so much more about CSS styling
Tags: react, bootstrap, spotifyapi, css
Published: 2021-09-10 03:40:19

I've decided to build a Spotify clone. to diversify my GitHub portfolio and show I'm not just a one trick pony focusing on tabletop RPGs. not that I wont be building more in that realm. There is just to much to make with all the information Dungeons and Dragons offers.

anyway with this Spotify clone I am calling MUSIC MELON. I wanted a simple API connect with a button click to get users logged in then a search bar and player and when the search wasn't populated to show the song lyrics. Cool I got my checklist of what I wanted and took to the documentation for Spotifys API and installed some nifty nodes.

getting into I knew I wanted to make it look really good. music and aesthetics go hand and hand to the artist albums to the shows they put on its all an expression of the artists view. So I looked into increasing my CSS knowledge, and man was I missing so much.  

I want to talk about bootstraps inline CSS and how nifty it is to get everything up and going. in the past I utilized style sheets and definitely appreciate them for my more robust projects in the past. However for this I just needed a super quick way to build the look and feel. since this wasn't gonna be a to crazy version just yet. I wanted something that looked nice out of the box and could see that on my updated DOM.

As you can see below in the `className` for the `<Container />` I've utilized some bootstrap inline css. d-flex to create a flex box for my button justify-content-center for centering the button and align-items-center for the button content to be centered. 

```
<Container
        className="d-flex justify-content-center align-items-center"
        style={{ minHeight: "100vh" }}
      >
        <a className="btn btn-success btn-lg" href={AUTH_URL}>
          Login With Spotify
        </a>
      </Container>
```

These are some of the more simple tags you can use and there are many. check out the included link for all of the possible uses.
https://getbootstrap.com/docs/4.0/utilities/borders/

Use the left index looking under Utilities to find some amazing simple to use styling to get your page looking the way you need to. version 2 will definitely be more robust. adding some custom images and some more functionality like lyrics look up and a fun equalizer.
How To Add Summernote Editor In Laravel 8
Tags: laravel, summernote, editor, laravel8
Published: 2021-09-10 03:32:53

Today we will see how to install and use summernote editor in laravel 8 or how to add summernote editor in laravel 8. Summernote editor is rich textbox editor summernote editor through you can add images, tables, links, snippet code, font styles etc.

For summernote editor you need to add only summernote js and css cdn.

```
<html>
<head>
  <title> How To Add Summernote Editor In Laravel 8 - techsolutionstuff.com </title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="row">
    <div class="col-md-12">
        <h1 class="text-center">How To Add Summernote Editor In Laravel 8 - techsolutionstuff.com 
        </h1>
        <div class="col-md-12">        
            <textarea name="summernote" id="summernote"></textarea>
        </div>
    </div>
</div>    

  <script>
    $(document).ready(function() {
        $('#summernote').summernote({
            height: 400, 
            placeholder: 'techsolutionstuff.com',
        });
    });
  </script>
</body>
</html>
```

---

You might also like :

- **_[Read More : How To Add Toastr Notification In Laravel](https://www.techsolutionstuff.com/post/how-to-add-toastr-notification-in-laravel)_**

- **_[Read More : How To Generate QRcode In Laravel](https://www.techsolutionstuff.com/post/how-to-generate-qrcode-in-laravel)_**

- **_[Read More : Bootstrap Session Timeout Example In Laravel](https://www.techsolutionstuff.com/post/bootstrap-session-timeout-example-in-laravel)_**
Updates on dev.to clone in Angular - Sept 10
Tags: angular, typescript, showdev
Published: 2021-09-10 03:17:58

##### Help me improve these updates by giving suggestions.

Github Repo - https://github.com/ajitsinghkaler/devto-clone

Deployed on Firebase - https://dev-toclone.firebaseapp.com/

Last week I did some research on how to implement login or signup in the clone but was to no avail the Oauth2 is still in private alpha. Then I tried keys with local storage too which did not work because the API does not allow you to make calls with the api_key header its allows in postman but nit in the browser. If it was allowed I would have saved the key in local storage and delete it on sign out but with that out of the window only a few things are left in this project

Adding tests
Tags Page
Cleanup

After understanding that I will not be able to add any post features to the app I was bit dejected that is why I did not post any updates last week.

Now what I did this week I added a user details page and the top dropdown that is in the header. To implement the user details page was fairly simple as the api does not give much  details of the the user and does not even allow me signin. So I built a fairly simple webpage. There was only thing we have the article component in the home module and we needed it in the user module too so to separate them I used a module for one component ie SCAM. You can check it [here](https://github.com/ajitsinghkaler/devto-clone/blob/9fae16ddfe4d74818a63bf2265c927bb55449499/src/app/pages/home/articles/article-card/article-card.component.ts#L25) 
  

Most of the stuff in my dev.to clone is finished. Next time I'll add tags and do finalization.

## Issue 

1. [Things left to do](https://github.com/ajitsinghkaler/devto-clone/issues/37)

## Commits

1. [Header Dropdown](https://github.com/ajitsinghkaler/devto-clone/commit/ac0726293f86dac2131efcc539456a5462d68010)

1. [User details page added](https://github.com/ajitsinghkaler/devto-clone/commit/9fae16ddfe4d74818a63bf2265c927bb55449499)

We can only learn new things on this so suggest some cool new experiments that you want me to do on this repo.
Who am I...
Tags: opensource, osd600, github, geomet
Published: 2021-09-10 03:15:38

About
Hello, I’m Tengzhen Zhao, and I’am Computer Programming & Analysis student. I’m located in Toronto.
I take this course because of the recommendation of my classmates and also, I recognition of the open source concept. Open source attracts me because of more effective development mode, more independent peers' double review of code and design, and most authors' great sense of honor for their works.

Goal
I have three goal of taking this course. First, improve my programming skill; second, master the Git and GitHub; third, connect with project developers.

My GitHub Repo
I chose the reop is GeoMet Data Registry and link is https://github.com/ECCC-MSC/geomet-data-registry.
GeoMet Data Registry is a system to manage access to the Environment and Climate Change Canada's Meteorological Service of Canada (MSC) open data, including raw numerical weather prediction (NWP) model data layers and the weather radar mosaic, via Open Geospatial Consortium (OGC) standards such as the Web Map Service (WMS). Meteorological layers…
I used to be an environmental engineer, and dedicated to data analysis and feasibility study of municipal solid waste. Solid waste is an important reason of the climate change, so I want to do this project.
Helpful math for machine learning
Tags: machinelearning
Published: 2021-09-10 02:57:28

#Introduction
- This series is going to be my attempt to build a very basic neural network in C++ from scratch. All the information from this series can be found in the book, `C++ Neural Networks and Fuzzy Logic by Valluru B. Rao`.


###Helpful math
 - On a more theoretical level of machine learning, according to the university of Toronto's `machine learning and data mining` class, found [HERE](https://www.cs.toronto.edu/~mren/teach/csc411_19s/) , there are 4 sections of math that are helpful for machine learning.

**1) Linear algebra:** vector/matrix manipulations, properties

**2) Calculus:** partial derivatives/gradient

**3) Probability :** common distributions; Bayes Rule

**4) Statistics :** expectation, variance, covariance, median; maximum likelihood.

- A broad overview of these sections of math can be found [HERE](https://www.cs.toronto.edu/~mren/teach/csc411_19s/#tutorials)

#Conclusion
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
Element(ary), my dear Watson.
Tags: opensource
Published: 2021-09-10 02:42:22

Today I took on the task of fixing my html output files for the Release 0.1 of textToHTML, my command line SSG (static site generator) tool.

A couple days ago I thought I had it working because I tested some txt files I wrote and the paragraph HTML tags seemed to be around each line. 

Then... I tested the Sherlock Holmes texts to see how it handled large data. And it turns out my program was creating a paragraph tag around every single line. To fix this, it was required to ask "what is a paragraph?". A paragraph is a line of text that is followed by 2 newlines rather than another line of text. 

So using a combination of split on the string, and map was the solution:
 const html = data.split(/\r?\n\r?\n/)
           .map(para =>
             `<p>${para.replace(/\r?\n/, ' ')}</p>`
           ).join(' ');

To break it down line by line:
1. split the data by 0 or 1 occurrences of \r, followed by \n, followed by 0 or 1 occurrences of \r, followed by \n. This covers all the combinations of \r and \n we could have. Returns an array.
2. Map the returned array, and replace within the paragraph string any occurrence of either \r and \n together, or just \n, with a space.
3. .join(' ') makes it so that our HTML doesn't contain "," separating the paragraph tags as if it were an array. This makes it 1 string separated by spaces.
4. const html will contain our returned paragraphs.

It was fun seeing a use of regex like that in web development, considering I am used to seeing them in Linux and bash scripts hehe.

Seems to be working good... to be improved. :)

All the best friends!!!

Andre Willomitzer
Curso de .Net Core C#
Tags: csharp, api, javascript, entityframework
Published: 2021-09-10 02:31:11

Olá!
Estou montando um curso de .Net Core C#

- [Playlist no Youtube](https://youtube.com/playlist?list=PLs3yd28pfby7WLEdA7GXey47cKZKMrcwS)

- [Code](https://github.com/midori-fukami/squad-manager)
SHIFT15M: Multiobjective Large-scale Fashion Dataset with Distributional Shifts
Tags: machinelearning, deeplearning
Published: 2021-09-10 01:34:05

![Overview of the SHIFT15M dataset.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l72ux3fhh2mzreh3mtip.png)

Hi, everyone.

We present a novel dataset aimed at properly evaluating machine learning models under distributional shifts.

Our SHIFT15M dataset has several good properties:

- Multiobjective. Each instance in the dataset has several numerical values that can be used as target variables.
- Large-scale. The SHIFT15M dataset consists of 15million fashion images.
- Coverage of types of dataset shifts. SHIFT15M contains multiple dataset shift problem settings (e.g., covariate shift or target shift). SHIFT15M also enables the performance evaluation of the model under various magnitudes of dataset shifts by switching the magnitude.

In addition, we provide software to handle SHIFT15M in a very simple way.


If you are interested feel free to check out:

Arxiv: https://arxiv.org/abs/2108.12992

GitHub: https://github.com/st-tech/zozo-shift15m
How to contribute to OSS AsyncAPI Initiative 🌈
Tags: contributorswanted, opensource, eventdriven, tooling
Published: 2021-09-10 01:31:16

You may remember that I joined Postman, focusing solely on the *Open-Source (OSS)* [AsyncAPI Initiative](https://www.asyncapi.com). 💕 

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

Yesterday, someone on social media asked me what contributions are needed the most for AsyncAPI Initiative. After asking my team, they gave me a comprehensive list of what is most needed. Ready to contribute? 😃 

## What contributions are needed most
- Volunteers and speakers for the [upcoming October Hackathon and our Online Conference](https://www.asyncapi.com/blog/events2021) running from November 16-18. 
- More [docs](https://www.asyncapi.com/docs/getting-started)! 
- Dev effort in our react component in the 1.0 version so that we can start working on [Studio UI](https://github.com/asyncapi/studio).
- More hands-on CLI development; we're using TS and [Ink](https://github.com/vadimdemedes/ink).
- Regular maintenance for our [VS Code plugin](https://github.com/asyncapi/vs-asyncapi-preview).
- Continue improvements and add new features to core tools such as our [spec parser/validator](https://github.com/asyncapi/parser-js) and [code generator](https://github.com/asyncapi/generator).
- Test out our new baby [Glee](https://github.com/asyncapi/glee) and share feedback.
- Our [website](https://www.asyncapi.com/) sorely needs a Front-End Dev that is willing to work without designs; we're using React, Tailwind, and Next.js. (**Note:** Since our OSS team doesn't have a designer, this means being open to improve stuff via trial/error and having the patience to accept that in open source, any contributor can jump into a PR and comment.) 

![AsyncAPI, the future of event-driven architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmrfv2yseumh0sle4y0w.jpeg)

## Thank you for contributing 💕  
We constantly need help at **AsyncAPI Initiative** and look forward to regular contributors. In return, we offer any onboarding support you need and a lovely community of people!

Let us know if you need anything to get started! 🌈 

👉🏽 Don't forget to join our [Slack channel](https://asyncapi.slack.com/join/shared_invite/enQtNDY3MzI0NjU5OTQyLTM5NTlkYzFmZDQyMGVkNzVkOTRhMGU2N2VmMWRlOTdkNWE0YzdjMGQ2NzRlOWU1NGJkYjUyZDEzMzM3ZGYzYzM#/shared-invite/email)!
Top 4 websites to get blockchain resources
Published: 2021-09-10 01:09:46

Listed below are websites to access blockchain materials for free.

1. [Awesome Blockchain](https://github.com/openblockchains/awesome-blockchains)

2. [CryptoMarketPool](https://cryptomarketpool.com/)

3. [Python Repo](https://pythonrepo.com/search?catalogid=0&q=blockchain)

4. [IBM Developer](https://developer.ibm.com/gettingstarted/blockchain/)
Commit messages are mostly useless
Published: 2021-09-10 00:57:20

Commit messages are really not that useful! you can argue as much as you want only if people did it this way or only if they implemented that set of standards.

Commit messages will still be useless!

## Why?

All teams use some sort of git host like GitHub. and all of these services provide much better tooling to have a discussion around the feature you added or the bug you just fixed. Why would you use the commit body to explain what you did? what is the point? While you have a really nice UI with a nice text editor and you can tag your teammates and they can respond to you?

With this mindset let's think about what do we need in our commit messages.

## State your intent & Make it shorter

I hate long commit messages no one is going to read a long commit message. So declare your intent is it a fix, feature, enhancement, or a refactor.

The enhancement flag is for developer-related features. added linting, CI/CD enhancement, introduced a tool, docs, add tests, etc.

Write in 10 words or less what you made. e.g

fix/login-screen-validation
refactor/class-a-to-introduce-endpoint-b

## Reference the issue

As I said at the beginning commit messages are redundant because we don't need them to add context or start a conversation. So we need to bring context to our changes. The best context you can provide is where did this start so reference the issue at the commit. and have your conversation on the issue. this makes it accessible for devs, PM and QCs

You can use ref # which refers to the commit and add a comment to the original issue. this is supported by almost all of the Git hosting services.

I dislike close, fix and I prefer to do this manually from the issue itself as usually need to add final remarks but you can sometimes use them for hotfixes or something.

## Details are for PRs

What the told you to add in the commit message you can write it here. it's much clearer and more visible this way! here you should

1. What have you changed in detail?
2. Why have you made these changes?
3. Keep it short & use bullet points.
4. Emojis are fun please use them more.

## Stylistic preferences

You can write however you like but if you are not so great at writing like me I find these guidelines nice to follow.

Start with a verb I find past tense makes more sense. Rename class A to B. VS Renamed class A to B!
Stick to bullet points
Add a conclusion sentence "If applied, this commit will achieve X"
Django (DRF) 12 Factor App with examples
Tags: django, 12factorapp, python, security
Published: 2021-09-10 00:55:36

I've been working with Django (especially with DRF) for a while now. Deploying Django apps is the one thing that bothers me the most. It's hard and does not have a pattern. So I decided to build a guide here to keep notes for myself and that may help someone that is struggling with the lack of patterns out there.

You can check the completed article here: https://sourcecoded.dev/12-factor-apps-django-with-examples.html
Environment Variables (i.e hiding variables) in react-native-typescript
Tags: reactnative, typescript, environmentvariables
Published: 2021-09-10 00:52:13

With some understanding about ethical-hacking, it should be made obvious, as to how much sensitive information should be guarded, as developers, in our codes. Environment variables are hence, conceptualised, on this basis. In react-native-typescript (typescript basically), the presence of a variable in a code, must be intentionally thought about. This defines the type and consequently, the type of operation permissible on such variable. 
In this post, I'll be showing you how to hide a dummy API-key. Onwards then, let's install react-natve-dotenv library, with the command below:
```
yarn add react-native-dotenv
or npm install react-native-dotenv
```
In our src folder, create a "types" folder. Create a file: "env.d.ts". 
In this file, we'd define the variable name as will be used in our code and its type as well:
```
decalre module "react-native-dotenv" {
    export const API_KEY: string;
    export const REMOTE_BASE_URL: string;
    export const LOCAL_BASE_URL: string;
    .....
}
```
In our babel.config.js file, we'll add the following
```
module.exports = {
    presets: [
    'module:metro-react-native-babel-preset', // present by default
  ],
plugins: ["module:react-native-dotenv", {
    moduleName: "react-native-dotenv",
    allowUndefined: false
}]
}
```
In our tsconfig.json we'll add:
```
{
    ...
    "typeRoots": ["./src/types"], 
    ...
}
```
Then we'll define our variables and values in our ".env" file. Hence, create a ".env" file, this must sit outside your src folder i.e where your package.json file is located. In here define the variables and corresponding values;
```
    API_KEY = something##anything
    ...
```
With all these in place, one last step:
I'd create a config folder in my src folder and then add an env.ts file in the config folder. The reason for this is that; react-native has a "__DEV__" variable that tells if the app is in production or development mode.
Therefore, in our env.ts file, we'd do the following;
```
import {
    API_KEY,
    REMOTE_BASE_URL,
    LOCAL_BASE_URL
    ...
} from "react-native-dotenv;

const devEnvVariables = {
   API_KEY,
   LOCAL_BASE_URL
}

const prodEnvVariables = {
   API_KEY,
   REMOTE_BASE_URL
}

export interface EnvsInterface {
    API_KEY,
    REMOTE_BASE_URL,
    LOCAL_BASE_URL
}

// If we're in dev use "devEnvVariables" otherwise, use "prodEnvVariables"
export default __DEV__ ? devEnvVariables : prodEnvVariables;
```
in our code, say loginScreen.tsx, we'll do the following;
{% runkit %}
import envs, { EnvsInterface } from "./config/envs";
const { BASE_URL, API_KEY } = envs;
// as preffered
const handleSubmitForm = async () => {
    await axios.post(`${BASE_URL}/login`, {...loginData},       {headers... API_KEY)
}
{% endrunkit %}
My First Blog - Exploring Open Source! 
Tags: opensource, programming, javascript, webdev
Published: 2021-09-10 00:07:01

Hi, I'm Mizuho Okimoto!

I'm a junior programmer, and student in my 5th semester, at Seneca College in Toronto, Canada. One of my current courses, Open Source Development(OSD600), gave me a great opportunity to write blogs here.

First of all, let me introduce myself!
Before I came to Toronto, I lived in Japan. I worked as a human resource consultant, where my role included providing websites and human resource management systems and collecting and analyzing data. At the time I wished I could build websites and software myself for my clients, to improve their business issues.
After my one-year Canadian visa expired, I was going to go back to Japan, but I have decided to make a change and achieve my wish.

I chose the OSD600 course as one of my optional courses because when I attended a career session to find my Co-op job, all of the Seneca students who worked for the company recommended us to take the course by David Humphrey. After I watched his first lecture video on YouTube, I was fascinated by the course concepts.
He said we have to write a bunch of code, and it's challenging, so I'm still worried if I can do it. However, I thought if I didn't challenge myself during school, there was no way to improve my skills.

This term, my accomplishment is to get a Co-op job from January as a web developer and be involved the Open Source community through this course to expand my programming knowledge. I haven't made up my mind about what kind of project I want to work on yet, but I would like to find something specifically with JavaScript.

As part of the tasks I forked the following Open Source repository on GitHub.
30 Seconds of Code: https://github.com/MizuhoOkimoto/30-seconds-of-code
It's an open source JavaScript snippet that you can understand in 30 seconds or less. It's more like documentation, not a project, but I thought it was an interesting concept and very useful.

Finally, I'm working on creating my portfolio which is approximately 3/4 complete. Please take a look :D
-> https://www.okimotomizuho.com/

Thank you for reading my first blog. See you soon!