teleren/devto huggingface dataset:
How do you organize pet-projects?
Tags: webdev, discuss, productivity, beginners
Published: 2020-10-08 18:06:22

---
title: How do you organize pet-projects?
published: true
description: 
tags: webdev, discuss, productivity, beginners
cover_image: https://www.eduplace.com/math/mathsteps/artwork/k_sort_what1.gif
---
Pet-projects are useful to explore new technologies, to experiment with new features and approaches, and to get down the basics before diving into more advanced projects. 

It might be a simple app or anything else with no serious use. Based on your learning path, you might do lots of them and your workspace can get a mess pretty quickly. So how do you organize them?

Do you develop them locally and then delete them or maybe leave them hoping you will add features later on when re-visiting?

Do you prefer to use some online sandboxes like Codepen or CodeSandBox instead, cause of easy set-up, access and no local mess? 

Maybe you create a GitHub repo for each for version control/branches for experimenting and clone options later if you delete the local repo?

Or maybe you try to develop them into something useful, host them on Netlify (or services like Heroku for backend) and add them to your portfolio?
ISO: Canvas UI/UX
Tags: ux, javascript, html, canvas
Published: 2020-10-08 18:03:32

**In Search Of**: a lightweight UX/UI JavaScript library for drawing interface elements on an Html5 canvas.


So far the best option seems to be ZimJS, but it's doesn't seem very performant, and somewhat bulky as it includes many many features that I won't use.


I need very basic elements, buttons, text entry, check boxes, etc.  Thanks for the read and I appreciate your recommendations ❤️
Death by complexity and other misconceptions
Published: 2020-10-08 18:03:09

You don't understand complexity. Complexity understands you, then it finds your weak spots and goes straight for the jugular.

The thing that I find often, is I can't understand things. I think maybe the problem presented to me is too large and so I might break it down. We do the same for our computers, any programming language is a simplified series of questions for our computers to understand. So why should code be complex for us to understand as well, who does that benifit?

Arrogant 20 year old me would say stupid things like, "well maybe you don't know the language as well as I do, it's not my problem if your a junior, go and learn more". 30 year old me feels great shame in my attitude, I feel like I was obsessed with making fancy complex solutions because clever is somehow better. It's so much worse, if you have no team then sure, write whatever but don't expect to understand it months later, if you do have a team, everyone should be talking with effective communication, since programmers tend to talk in code, perhaps code should be simple by default.

## The hardest thing in programming
Naming things is hard in code, I think it's worse for somebody like me, I want my code to have a certain appeal. So why call a function by what it does, why not cut alot if the details away and stick Manager on the end leaving it open to interpretation. 😅 Okay there are some habits that die hard, but lately I'm taking names extremely seriously, naming things should not be hard, actually it isn't, just ask, what does it do? Then don't be scared of long names, short names don't make you smarter, the introduce another meta puzzle to solve, so more comments are needed and more noise.

## Did I ever really reuse my code?
You see, I used to live firmly in camp generic where functions must ALL be generic and reusable. But actually that just *sounds* wonderful, 2 / 10 times have I ever truly reused some code, I tend to do rewrites and study my own functions because iteration is improvement, copying is staying still.

## OOP vs FP
Your both wrong, the answer is choice! I choose state machines then maybe next week it's something imperitive then the next I like declarative. Am I supposed to feel bad for being so middle of the road?

## The latest library
Sooner or later you will become not young, and keeping up with tech becomes the buzz words of recruitment as we all join software houses that still use tried and true technology that isn't new. Fads come and go, find stuff you like then run with that, don't be afraid to look back at the 1970s theres a lot to know. (I wasn't born)

## Respect your elders
...

Thank you I have no point.
COVID19 Symptom Tracker for Schools
Tags: opensource, flutter, flask, hacktoberfest
Published: 2020-10-08 17:55:11

Need a good project to complete your Hacktoberfest PR's? I'm looking for help polishing up an open-source project to help schools track COVID-19 symptom logs for students. This was tailored towards the requirements of the Wyoming High School Athletic Association. It is built with Flutter and uses a Flask API so there is something for everyone! You can find the [WYcorder Repository](https://github.com/tannercrook/wycorder) on GitHub.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/20ma9tdzuzbc82gvp1q5.png)
Develop pluggable widgets for fun
Tags: webdev, javascript, showdev, fun
Published: 2020-10-08 17:48:33

Development is easy and fun with the proper development tools, less manual work and some fancy things we love.

This article is about creating our own widget and integrate it into a website that helps us in the development or looks cool or does both.

The idea here is unlike components, widgets will be rendered automatically, floats on the UI and can be movable and resizable like the desktop or the mobile widgets.

Here is the sample template of the widget that I have created to create widgets.
```
// IFFE for scoping
(function () {

    let html = ``;

    let styles = ``;

    // Do not use window.onload as it will override other mehtods instead adding new listner
    window.addEventListener('load', function () {

        // Create container div and append it to body


        // Code to make the div resizable

        
        // Code to make the div movable


        // Widget specific javascript code

    });
})();
```
Let's see an example of such a widget- a Todo widget
{% codepen https://codepen.io/Mau1ik/pen/ZEOEvWy default-tab=result %}

I have cloned a sample dashboard from a codepen pen and imported the widget file in it. You can see a floating todo widget floating at top right that shows a list of todo tasks. This widget uses local storage so even on reload, you can see your previously added todo list. 

Here is the git repo for that todo widget. You also will find a sample template where you can put your html, css and JS code and try your idea.
{% github Maulikdes/JS-Widgets %}

We can create any kind of widget that we want. Here are some other examples

* clock
{% codepen https://codepen.io/Mau1ik/pen/LYZEGpm default-tab=result %}

* or a music player
{% codepen https://codepen.io/Mau1ik/pen/RwRNraE default-tab=result %}

What else you want as a widget? please comment 

Also, if you see the code, you will find it a bit ugly and you have to keep in mind that the style of your widget should not affect the existing application and also need to think about scope... which is a bit difficult in vanilla javascript as you have to write code for it. But, it would be easy for us to write the same code in angular or other frameworks, right? 

Angular has the functionality of creating a single file web-element which can be used in any site developed in any framework or even in simple HTML after exporting the angular component and importing it in any project.

These widgets also have an advantage over plugins that they have more access to plugins. My next article will be creating this type of widgets using angular.
Voila Hack the Problem-ProHack
Tags: cpp, computerscience, cp, learning
Published: 2020-10-08 17:30:46

Hola A todos!
My short blog to approaching a problem in programming,Just follow these rules just  I learned...
- I bought a little pocket notebook with just 20 rupees and start to think how to utilise it?
- Open your laptop
- GEt your problem in the :awesome: place :smile:
- Your laptop again
- Read It thoroughly :do It several: **times**.
- Now point out the variables or anything like an object in the problem 🙂
- Great relate problem with it's condition you can get from it.

- More likely it's viability
- Time to code
- Test
- refractor it.
And - Finished
Implementing a Singly LinkedList with Javascript
Tags: javascript, webdev
Published: 2020-10-08 17:22:33

 A linked list is a linear data structure in which each node
points to another node. Unlike arrays, which have a fixed size, a linked list is a dynamic data structure that can allocate and deallocate memory at runtime.
 There are two types of linked lists: singly and doubly-linked
lists. Let’s examine the singly linked list.

#SINGLY LINKEDLIST#
 The linked list data structure is one where each node (element) has a reference or address to the next node i.e each node object stores a data and a link to the next node.

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

**Creating a Node object**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hionk76vp4ieja99jnro.png)

#Implementation of a Singly LinkedList#
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pxel5g2k93fcj62xtznz.png)

The logic in the following methods i.e deleteNodeByValue, searchNode, getAllNodeData can be found below
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fhxj1x62clbp073ap9hj.png)

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

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

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

There are different methods one can implement in a LinkedList. Till next time!!
OSD600 - Lab 3 -2 More Features
Published: 2020-10-08 17:13:10

In Open Source Development at Seneca, [Lab 3](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/lab-3) "Merging": this required us to ensure our original Release 0.1 had no errors and then create two branches to add new features to the code. 

The Process...

My first branch "[label](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails/pull/5)" I chose to add the "GOOD" and "BAD" tags and because it's fall and I am feeling colorful I made the GOOD print out in a rainbow and the BAD print out as a red box!
The second branch "[exitcode](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails/pull/6)" was to make sure my program exits with an appropriate 0 code.  After reading up on [Node.js](https://nodejs.dev/learn/how-to-exit-from-a-nodejs-program)I assumed this would be simple but the results did not turn out the way I anticipated.  My code would print out a couple URLs and then exit. I created a function instead to do the job and by appearance it works fine, but I am not really sure I did it correctly.  

The Conclusion...

I realized after my branches were created that I forgot to create the issues... facepalm to me. Here I thought working in the kitchen had difficult processes!  Some days I love this and some days I miss Chef life!  When things get stressful, I find myself taking a break from coding to go cook or bake.  My family loves this!
What are you looking forward to when the pandemic is over?
Tags: watercooler, discuss
Published: 2020-10-08 16:46:53

Regardless of our individual circumstances, everybody is, in some capacity, still living through a pandemic.

It's certainly made me miss things I didn't even necessarily know I liked or needed.

What about you? What are you looking forward to doing in a post-pandemic world, whenever that is?

I may have asked this before 😄
Hacktoberfest
Tags: hacktoberfest, opensource, css, framework
Published: 2020-10-08 16:40:42

## Completed 4 Pr's on the first day itself 😃.

And now looking for some contributor's for my open source project

The GitHub Repo link is : https://github.com/SuNiL-Chau/Mine-CSS-Framework

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
cai win tai nha
Published: 2020-10-08 16:37:24

Hungphatcp.com là địa chỉ cung cấp dịch vụ cài win tại nhà,sửa máy tính tại nhà giá rẻ uy tín hiện nay. Chúng tôi cài win tại nhà hcm uy tín nhất, giá cài win tốt nhất. Dịch vụ cài win 10 tại nhà chất lượng. Kỹ thuật có tay nghề cao sẽ làm quý khách hài lòng nhất.
Website: https://hungphatcp.com
Địa chỉ: 431 Lê Thị Riêng,Phường Thới An,Quận 12,Hồ Chí Minh
Điện thoại: 0902 098 960
Facebook: https://facebook.com/caiwintainhahungphat
Email:caiwintainhahungphat@gmail.com

https://hungphatcp.com

https://hungphatcp.com/cai-win-tai-nha-tai-hcm/

https://hungphatcp.com/bang-gia/







<a href="https://hungphatcp.com">cài win tại nhà</a>
Rust 2021
Tags: rust, roadmap, future, development
Published: 2020-10-08 16:33:33

Over at my home blog I wrote about [what I want and wish from Rust][post] in the next year and beyond.

Also note that I will not republish full articles on dev.to anymore.

So, please bookmark and visit [markentier.tech][mtt] instead (and it even has Atom/RSS feeds if you like).

[post]: https://markentier.tech/posts/2020/10/rust-2021/
[mtt]: https://markentier.tech/
Let's build for Ruby and Rails developers - Part 10
Tags: rails, ruby, community, tutorial
Published: 2020-10-13 22:27:51

---
title: Let's build for Ruby and Rails developers - Part 10
published: true
date: 2020-10-08 16:27:00 UTC
tags: rails, ruby, community, tutorial
canonical_url: https://web-crunch.com/posts/lets-build-for-ruby-and-rails-developers-part-10
---

{% youtube tPx9XDExDV4 %}

In part 10 of my Let's build for Ruby and Rails developers series I begin adding new job details fields on our new job form.

Much of the work in this part is foundational to get the necessary data from a given employer to the app itself. We'll add fields related to the job in this part and continue adding more fields related to the company in part 11.

This entire form is built with Vue.js which I'll use AJAX to push new data to the Ruby on Rails app behind the scenes.

#### The series so far

- [Part 1](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-2g1)
- [Part 2](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-part-2-3310)
- [Part 3](https://web-crunch.com/admin/posts/lets-build-for-ruby-and-rails-developers-part-3/)
- [Part 4](https://web-crunch.com/admin/posts/lets-build-for-ruby-and-rails-developers-part-4/)
- [Part 5](https://web-crunch.com/admin/posts/lets-build-for-ruby-and-rails-developers-part-5/)
- [Part 6](https://web-crunch.com/admin/posts/lets-build-for-ruby-and-rails-developers-part-6/)
- [Part 7](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-part-7-47n0)
- [Part 8](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-part-8-f1)
- [Part 9](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-part-9-56ip)
- Part 10 - **You are here**

- [View the entire collection](https://web-crunch.com/collections/lets-build-for-ruby-and-rails-developers)
Day 25 - Pricing Component
Tags: beginners, codenewbie
Published: 2020-10-08 16:13:42

I built a [pricing component](https://josno.github.io/pricing-component-with-toggle/) with a toggle feature!

## What I Learned
I was able to practice using elements as selectors vs classes. It shrunk my codebase considerably. Spending some time to think through parent-child relationships for styling before coding helps to streamline work!

## How This Will Help Me
It is high time I read into design patterns and best practices for styling conventions.

Onto the next challenge!
React JS - Material UI Dashboard
Tags: react, javascript
Published: 2020-10-08 16:07:24

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

React admin panel created with React, Redux and using material-ui framework

login without user / pass

Codes: https://gitlab.com/ma2web/material-ui-blue-sky
Try Catch, everything?
Tags: discuss
Published: 2020-10-08 16:00:22

Just to give a background, I was mainly self taught CSS/HTML/JavaScript and basic PHP. Found Laravel &Laracasts.com and have create a few applications in production. Starting to work on more complex applications while applying more strategies/architectures (CQRS, DDD, event driven...) I know I'm lacking some basics, and one of them is the use of try catch. Do I use them everywhere? I'm creating APIs, and for now I know who will be programming against them. But who knows in the future if the API outlives my involvement. Anyways, do I try catch everything? Are there some basic principles/guidelines I should follow when using them? I know laravel provides its own generic ones, I'd like to improve on that with more specificity. 
thanks!
TIL: Mirroring My Mac's Laptop Screen to a Specific Monitor 
Tags: todayilearned, productivity
Published: 2020-10-08 15:53:31

Recently I have been having heat issues with my computer in this Southern California heatwave. My normal office setup has 2 external monitors and I keep my computer closed because I thought I needed to close my monitor to only use my external displays. This detail has been making me sad since it keeps the laptop for also dissipating heat through the keyboard.

Well, I thought wrong, you can have your MacBook display also mirror on of your external monitors. I have used a MacBook for YEARS and never knew about this! All you have to do is go to `Settings > Displays > Arrangement` and `Alt` drag your laptop display over the one you want it to display.

Click the image to see a video playback with all the action.
[![OSX Mirror Specific Displays](https://i.imgur.com/zqwsuNZ.gif)](https://imgur.com/zqwsuNZ)

Check out [How to Mirror Specific Displays in OS X](https://create.pro/how-to-mirror-specific-displays-in-os-x-mirror-some-but-not-all-of-your-monitors-on-an-apple-system/) for all the details.
Flutter Login and Sing Up form
Tags: flutter, dart, opensource, googlecloud
Published: 2020-10-08 15:50:53

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


//Coding Start

import 'package:flutter/material.dart';
import 'package:signup_ui/Screens/HomeScreen.dart';
import 'Screens/SignInScreen.dart';
import 'Screens/SignUPScreen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sign Up Screen ',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      initialRoute: 'SignIn',
      routes: {
        'SignIn':(context)=>SignInScreen(),
         'SignUp':(context)=>SignUpScreen(),
         'Home':(context)=>HomeScreen(),
      },
    );
  }
}


//Coding end
Angular's Navigation Challenges
Tags: angular, navigation
Published: 2020-10-08 15:48:09

<sub> Did you know Jupiter's moons were used for Navigation and Map making starting in the 1600's up to the 1800's? [A fascinating story of using Jupiter's moons for Navigation and Map Making](https://archive.briankoberlein.com/2015/04/19/from-heaven-to-earth/index.html)
</sub>

**Angular's Default Navigation Behavior**

Angular will not reload an already loaded component when navigating to it by default.  


```javascript
 // Browser is already on /pathName/5102 
 // We see the proper display which means
 // our router paths are correct.
 // And now we attempt to go to a new path.

 let newLocation = `/pathName/5110`;
 // override default re use strategy
 this.router
    .routeReuseStrategy
    .shouldReuseRoute = function () {
        return false;
 };
 this.router
   .navigateByUrl(newLocation)
   .then(
   (worked) => {
     // Works only because we hooked
     // routeReuseStrategy.shouldReuseRoute 
     // and explicitly told it don't reuse
     // route which forces a reload.
     // Otherwise; the url will change but new
     // data will not display!
   },
   (error) => {
    debugger;
    }
 );
```
**Angular's Route ReUse Strategy**

There have been many questions such as ["My page url changes, but the navigation doesn't do anything"](https://www.google.com/search?q=angular+doesn%27t+navigate+site%3Astackoverflow.com)  This is the effect of Angular's default behavior.

**How to Override Angular's Default Behavior**

```Typescript
this.router
    .routeReuseStrategy
    .shouldReuseRoute = function () {
        return false;
 };
```
Just before any navigation is done, this code will allow the page to reload, refresh etc.

But there are alternatives. For the page that doesn't reload, we can create a data injection entry point and call the ChangeDectectorRef detectChanges() function.

JWP2020 Angular Navigation doesn't work
HashiCorp Vault Enterprise and Azure Active Directory
Published: 2020-10-08 15:42:58

---
title: HashiCorp Vault Enterprise and Azure Active Directory
published: true
description: Some Approaches to hook Vault Enterprise up to AAD
tags: 
cover_image: https://miro.medium.com/max/1200/1*T4D7fxVyQA7KS3ftbM4VEg.png
---

If you're using AAD for authentication in other parts of your organization, there's a good chance you should be using it for Vault, too. 

LDAP, compared to OIDC, is insecure. And don't even get me started about the potential problems at scale with good ol' `userpass`...

To do this, you'll need to make an App Registration for Vault Enterprise.

Then, you'll need to follow these instructions, but figure out how they work with Azure Active Directory instead of Auth0: 

https://learn.hashicorp.com/tutorials/vault/oidc-auth?in=vault/auth-methods 

(Guess which one is easier...)

But you have a few choices about what to do with that App Registration you make in Azure Active Directory. 

## Approach number 1:  Use AAD's idea of App Roles. 

AAD has an idea of "App Roles" in its App Registration manifests. These App Roles can be assigned to various groups, and provided as a "claim" in part of the JWT (JSON Web Token) in OIDC. Every time you want to add a new Azure AD "App Role," though, you have to edit the "Manifest" of the App Registration to add items to the JSON array labeled 'appRoles'. If you need to have an AAD Security Group with a different Vault Policy or set of Policies, you'll need add yet another Azure AD App Role, and a new Vault Auth Role in the Vault OIDC Auth Method for your Azure AD App Registration. Then, you add the AAD Security Group to your App Registration, and assign it the new AAD App Role you just made in your AAD App Registration.

## Approach number 2: Use Vault Identity Groups

Skip the AAD App Roles, which have a limit of 1200 roles, and AAD App Roles require painful mutation of the "Manifest" by hand. Just use Vault Identity Groups instead. To each Vault Identity Group, you add an Identity Group Alias, and name that Identity Group Alias after the "Object Id" of the AAD Security Group that you want in Vault Enterprise. This means you still get to have AAD as an identification store and "source of truth" for authorization, where removal from or addition to AAD Security Groups controls authentication & authorization in Vault. But you also don't have to edit any JSON manifests.

## Approach number 3: Use Vault Entities

A third approach, for admins of Vault Enterprise, would be to map various AAD user aliases to corresponding "entities" in Vault Enterprise's "Identity" Secrets Engine, then add those "entities" to the Vault Identity Groups that have various policies associated to them. I guess it is more of an onboarding scenario in which Vault manages much of the identification, and, because this is all done on a user-by-user basis, this entails no mapping of any given AAD Security Groups to Vault Identity Groups. It's a bit tricky, since Vault, at this point, is its own "source of truth" for permissions, and the only thing AAD is getting used for is to determine whether they have a valid AAD User.