teleren/devto huggingface dataset:
Custom JavaScript CreateElement Function
Tags: javascript, html
Published: 2021-08-28 13:24:38

• One of the most common functions to create `HTML` elements **dynamically** using `Vanilla JS` is [Document.createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) which takes 1 parameter which is the tag name, this function returns the newly created element, then after that you will write some code to add properties or attributes to it then append it to another element in your `DOM`.

• This process usually takes many lines which makes creating a simple html structure a headache.

• So let me introduce a simple function that can make this process easier :
```js
    let createElement= (initObj)=> {
        var element = document.createElement(initObj.Tag);
        for (var prop in initObj) {
            if (prop === "childNodes") {
                initObj.childNodes.forEach(function (node) { element.appendChild(node); });
            }
            else if (prop === "attributes") {
                initObj.attributes.forEach(function (attr) { element.setAttribute(attr.key, attr.value) });
            }
            else element[prop] = initObj[prop];
        }
        return element;
    }
```
#So, let's see what this function can do:
- Create the html element normally.
- Add attributes to it (Key value pairs).
- Add any custom property or events to it
- Add child nodes to this element

**All in one line**

#How to use it:
- First of all, this function takes an object that must have a property named Tag, to specify the element **Tag name**:
```js
let myElement = CreateElement({Tag:'div'});
```
- To add an **id** and some **classes** for example:
```js
let myElement = CreateElement(
{
   Tag:'div',
   id:'myId',
   classList:'btn btn-danger'
});
```
- To add an **on click function** and an **inner html**:
```js
let myElement = CreateElement(
{
   Tag:'div',
   innerHTML:"<i class='fas fa-trash-alt'></i>",
   onclick:yourOnClickFunction()
});
```
and it is the same for all object properties or even new properties you need to add to the object.

- To add **attributes** with **keys & values**:
```js
let myElement = CreateElement(
{
   Tag:'div',
   attributes:
   [
     {key:'customAttr1': , value: '500'},
     {key:'customAttr2': , value: 'ABC'},
   ],
});
```

- To add **Child Nodes** to this node after it is created:
```js
let myElement = CreateElement(
{
   Tag:'div',
   childNodes: [nodeElement1 , nodeElement2],
});
```
**This is how easy you can use it**🤷‍♂️
It's a function that I love to use in each project I am involved in.
Hope you like it 👋
Maker Flow - All your favorite creative dev tools & links in one place
Tags: showdev, react, webdev, auth0hackathon
Published: 2021-08-28 13:22:38

## What is Maker Flow ❔

It is a Web app for devs that keeps all your favorite online tools in one place so you can easily access them plus it shows you tools used by other devs which you might want to try out 👌.

> [Github](https://github.com/arndom/maker-flow) / [Demo](https://maker-flow.web.app/)

## Inspiration ✨

So if you hadn't already guessed from the above, I have a hard time remembering the URLs for tools I use during development, the usual process is google search then looking through all the results for the ones that serves the need the best or I've used before.
Overtime it felt tedious having to google search for the sites I need which is why I created **Maker Flow**. 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630147260057/xM3qtHXFN.png)

Maker Flow allows you to save the tools you use regularly in one place plus the additional feature of seeing other tools fellow devs use in their process that you might find interesting. It is a PWA so you don't even need to remember the link just install and you're good 👌. ( Chrome extension on the way, 
just right click to save ).
 
## Stack  👨‍💻

Aside from auth0, The following was used in the development process :  

- **React**

The design for maker flow is pretty simple, flexbox for arrangement and responsiveness, Material UI for styled components, [Dicebear Avatars](https://avatars.dicebear.com/) for profile images and finally [AOS](https://michalsnik.github.io/aos/) for animation. The design was the quickest thing to get done. 

- **Firebase**

Firebase was used for hosting as well as storage capabilities. Additionally cloud functions were used which I must say are pretty convenient 👏, it  had to be used to generate a custom sign in token from Auth0 for firebase so as to enforce the firestore DB rules.

## Features 📝

The major features of the app are: 

- SSO login with Google

- PWA functionality

- Explore and Saved pages

- Mobile responsive

## What's next 💭

The plans for the app Include the following: 

- Chrome extension to make add functionality more seamless

- Upvote functionality to show most popular tools

- Categorizing tools, Smart Search, etc.

Feel free to add what features you want below in the comment section 🔽👇🔽 or in the github repo.

## Conclusion

The past month has been quite busy but I'm glad I was able to find the time to build this, thanks hashnode and auth0 for this exciting hackathon. 


### Don't forget to contribute and leave a ⭐ on github

https://github.com/arndom/maker-flow

### Try it ❕❕

https://maker-flow.web.app/   



![end giph](https://media.giphy.com/media/h8ZUMDy8LWxGW4h73I/giphy.gif?cid=ecf05e479w02vi9497foxrlry4pae044wfa7a49cxjqzxiya&rid=giphy.gif&ct=g)
Imagine Git hooks in Rust..
Published: 2021-08-28 13:20:28

I'm going to say it.... Git hooks are *bad*.

Well, not bad, just annoying, and way too much setup. You have to write a bash script, etc, and things like [husky](https://github.com/typicode/husky) simplify it.. but not enough.

I wrote something a few months ago called [Glitter](https://github.com/Milo123459/glitter), with its sole purpose being a commit message templating system. It works fantastic, but recently I had someone create an issue: [https://github.com/Milo123459/glitter/issues/33](Glitter Hooks)

They basically asked for Git Hooks in Glitter. I'd already implemented a task system (so you could do something like `glitter fmt` or `glitter cc fmt`) just by using a simple bit of config, but I thought that just like the user suggested, automatically running them before `git add .` in the push command.

Some benefits:
- Git Hooks can be quite slow
- Git Hooks can sometimes not pick up paths of packages installed with npm
- Simple config, and can be setup in less than 30 seconds

So lets look at something to format our Rust code before we push. 
```json
{
  ...
    "custom_tasks": [
        {
            "name": "fmt",
            "execute": [
                "cargo fmt"
            ]
        },
        {
            "name": "lint",
            "execute": [
                "cargo clippy --all-features --all-targets"
            ]
        }
    ],
    "hooks": [
        "fmt",
        "lint"
    ]
}
```
*...* is other config. Check out [this post](https://dev.to/milo123459/introducing-glitter-4505) if you want to know how to initially set it up.

Right, it's quite a lot to take in, lets break it down.

`custom_tasks` are tasks that we can run, or, alternatively, can be used as hooks. From this example, I can do `glitter fmt` (or `glitter cc fmt`) and it'll run `cargo fmt`. If I ran `glitter lint` (or `glitter cc lint`) it'll run `cargo clippy --all-features --all-targets`, and so on.

We can then reference these tasks in the `hooks` field. This field takes in the name of your tasks and will just run the commands specified in the `execute` field.

## Problems I faced

Things like `yarn` (or any NPM package installed with npm globally) wouldn't be picked up in the path. I was able to fix this rather simply by using the crate [which](https://crates.io/crates/which) which allows me to get a path to an executable (or a shell script) to run to run the cli. This can also sometimes be a bit faster than just running the name of the command (ie, it'll be faster if I provide a path to `yarn`, and don't run `yarn` itself)

## Additional info

Hooks will exit and cancel the command if the command fails or it's exit code is not **0**. It's very simple. 

If you feel this is cool, please leave a star on the [repo](https://github.com/Milo123459/glitter).

Feature requests can be put in issues on the repo if possible. If you have any questions, you can make a discussion or ask in the comments.

Thanks!
This week in Flutter #18
Tags: flutter, dart, news
Published: 2021-08-28 12:09:36

[Google Summer of Code](<https://summerofcode.withgoogle.com>) is a way to help students get started with **open source development**. This year there were [three Dart projects](<https://summerofcode.withgoogle.com/organizations/4658845562961920/>). One of them is a Flutter desktop app that helps developers choosing lint rules to apply to their projects.

[Abdullah Deshmukh](<https://twitter.com/abdullahzakir99>), the student working on the project, published an [article about the project and his experience](<https://medium.com/flutter/gsoc-21-creating-a-desktop-sample-for-flutter-7d77e74812d6>) in the Summer of Code program.

I never attended a program like Summer of Code when I was a student. It looks like an **amazing opportunity** to learn from experienced people: you get assigned a mentor who will guide you during the process.

<small>- Michele Volpato</small>

## 🧑‍💻 Development

### [Flutter: How to draw a task completion ring with CustomPainter](<https://codewithandrea.com/articles/flutter-drawing-with-custom-painter/>)

[Andrea Bizzotto](<https://twitter.com/biz84>) publishes ([another](<https://ishouldgotosleep.com/this-week-in-flutter-17/#flutter-timer-vs-ticker-a-case-study>)) lesson from his [Flutter Animation Masterclass](<https://codewithandrea.com/courses/flutter-animations-masterclass/>). In this one, he uses `CustomerPainter` to **draw a "task completion" widget** that looks a lot like a progress indicator.

---

### [Flutter: Animated Task Completion Ring with AnimationController and AnimatedBuilder](<https://codewithandrea.com/articles/flutter-animation-controller-animated-builder/>)

And right after the "task completion" widget, learn how to **animate it** with this related article.

---

### [How to create a custom Scrollbar using RenderShiftedBox](<https://medium.com/@safchemist/how-to-create-a-custom-scrollbar-using-rendershiftedbox-d1384f933ab4>)

In the latest project I worked on, I had to implement a **custom `ScrollBar`**, but it wasn't as cool as the one [Elina Safaryanova](<https://github.com/safchemist>) implemented in this article.

---

### [Flutter state management for purists](<https://inclucat.wordpress.com/2021/08/27/flutter-state-management-for-purists/>)

We are always eager to try **new packages**, and there are plenty of them that help us with **state management**. But what if we do not need them? Certainly for a small app or some sample code, using what is already available in the Flutter framework is **enough**. [Inclu Cat on the Gentle Trail](<https://twitter.com/inclu_cat>) elaborates more on this subject in this article. He also mentions another article, from [Suragch](<https://twitter.com/Suragch1>), called "**Flutter state management for minimalists**" which I also recommend reading.

---

[...]

[Read the rest on ishouldgotosleep.com](https://ishouldgotosleep.com/this-week-in-flutter-18/)
What is Virtual Studio Technology (VST)? 
Tags: vst, productivity, plugins
Published: 2021-08-28 12:00:55

My first article here will be about the Virtual Studio Technology (VST) and its plugins. I will try to explain what it is and why this software is a must for the sound developers.

##What is Virtual Studio Techonology (VST)?##

Virtual Studio Technology (VST) is a popular [audio plug-in](https://en.wikipedia.org/wiki/Virtual_Studio_Technology) software which is widely used by the sound developers and editors. This software actually can do a integration of synthesizers and effects units into digital audio workstations.

##Top 10 VST Plugins##

Below is a list of the top 10 most popular and most used Virtual Studio Technology Plugins.

- **Native Instruments Massive** -wavetable synthesizer by Native Instruments.
- **Native Instruments FM8** - another great plugin by Native Instruments.
- **Arturia V Collection 8** - popular for plugin evocative synthesizers and keyboards.
- **Kontakt 6** - great sampling platform also developed by Native Instruments.
- **Reveal Sound Spire** - amazing software synthesizer developed by Reveal Sound.
- **u-he Hive** - modern synth with a great sound developed by by Howard Scarr and Kevin Schröder.
- **Lethal Audio** - powerful software synthesizer.
- **FabFilter Pro-Q 3** - advanced equalizer plug-in.
- **Waves API 550A & 550B** - amazing plugin developed by Waves Audio Ltd.
- **Soundtoys EchoBoy** -  software echo factory for delay and echo sounds.

Note: This list is made based on my own personal experience using some paid and [free VST plugins](https://www.vsttorrente.com/vst-crack-torrent/). In addition, there are such a lot of other great plugins you might try. Of course, it all depends on your needs and your current sound project classification.

###Summary###

The sound producers are using these VST plugins to create perfect audio samples and  powerful projects. If you are a sound developer you might have probably heard about most of them. However, if you are not, as a experienced sound developer, I highly recommend to try any of these while working on your project.
CS50x Final Project Update
Tags: cs50x, beginners, webdev
Published: 2021-08-28 12:00:53

<h4>My Project</h4>
<p>I'm finally at the climax of the Harvard's CS50x course with only the Final Project remaining. I decided to do a News site using some of the new things I've learned in CS50x. I use the default HTML CSS Js for Front-end and Flask as my Back-end along with a News API gotten from newsapi.org</p>

<h4>Progress</h4>
<p>So far I've gotten a few things done which are</p>
<ul>
<li>Register and Login Page with validation</li>
<li>Database for storing user-data</li>
<li>The main page which displays News gotten from the API</li>
<li>Lazy-Loading: More news are loaded as the user scrolls to the bottom of the page</li>
<li>Searching for specific news</li>
<li>Filter out news by categories e.g Sports, Business, Tech</li>
</ul>

![FrontPage of the Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ludocx9nqkma87o5qk8t.png)
 
![Searching for OnlyFans](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/saf2v5kl1vlak8zq190j.png)
 

I'm currently thinking of removing the ability to create accounts because I can't think of a way to utilize it, I originally wanted it to be that the user can choose their interests and only get news based on that but now I'm not sure if it's even necessary to implement that. But I will try to implement the feature, if I can't then I will remove the ability to create an account.
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2021-08-28 12:00:02

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258d16351b.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ What do you get when you cross a computer and a life guard?

___A:___ A screensaver!
 -->
Website qrcode cross login with mobile phone like whatsapp web
Tags: qrlogin
Published: 2021-08-28 11:52:01

I have been trying to integrate a website cross login with smartphone on my website but am kind of new to django channels and redis so i find it a bit tricky to accomplish. I'm looking for someone within the community who can guide me through the whole process with code exampple if possible, Thanks in advance!
Error Handling with HTTP Error Response Generation in node.js Application
Tags: node, webdev, errorhandelling
Published: 2021-08-28 11:48:28

In one of my blog posts [Separate routing from business logic in node.js | Central response generation in node.js](https://www.cloudnativemaster.com/post/separate-routing-from-business-logic-in-node-js-central-response-generation-in-node-js) we have seen how we can perform central HTTP response generation from the responses generated by the business logic module. In application different error conditions can occur. We would like to code for those error conditions using a try-catch, and throw constructs provided by the programming language. But that is not good when it comes to HTTP error responses. In cloud native application development we need to convert those errors to HTTP error responses. It would be necessary to handle the throws exceptions from code and convert them to HTTP error responses centrally. 
We can create a *errorHandler.js* file where we write the code to convert the errors to HTTP responses.
The errorHandler will look like this
```
function errorHandler() {
  return (err, req, res, next) => {
    if (err instanceof TypeError) {
      return res.status(400).json(err.name + ": " + err.message);
    }
    if (err && err.statusCode) {
      return res.status(err.statusCode).json(err.body);
    }
    return next(err);
  }
}

module.exports = errorHandler;
```
Then we need to import this errorHandler to the application server and apply it as `app.use(errorHandler)`. In this way we don't have to convert error to HTTP response in every place, we just do it in one place. Of course, in all those files where error can occur we need to use try-catch-throw construct to throw errors. All those thrown errors will be caught by this block of code centrally. 

For an complete example please refer to [my blog post](https://www.cloudnativemaster.com/post/error-handling-with-http-error-response-generation-in-node-js-application).
不動産クラウドファンディングの危険性とは
Published: 2021-08-11 23:41:36

##不動産クラウドファンディングとは
宅地建物取引業者が、不動産特定共同事業法に基づく許認可を取得して、自身の新たな不動産取得のための資金を、オンラインのクラウドファンディング形式で調達し、その後不動産から生じた利益を投資家向けに分配するビジネスモデルが、「[不動産クラウドファンディング](https://social-lending.online/real-estate-crowdfunding/listed-companies/)」と呼ばれています。

近年の不動産特定共同事業法の改正によって、

* オンラインでの契約締結や書面交付
* SPCに不動産を保有させる、「特例事業スキーム」

などが解禁され、特に不動産特定共同事業者側にとって、更に使い勝手のよいスキームへと改変されました。
※不動産クラウドファンディングのスキームの詳細については、別途、ソーシャルレンディング・ラボにて掲載されている専門記事などを参照下さい。

#不動産クラウドファンディングの基本的なスキーム
不動産クラウドファンディング事業者は、より端的に言えば、電子取引業務の許可、及び、不動産特定共同事業法第1号許可を取得した、宅地建物取引業者です。

このうち、電子取引業務の許可は、投資家との間での不動産特定共同事業契約の締結や必要な書面交付を、紙ベースで行わず、オンラインで執行するために必要な認可となります。

また、不動産特定共同事業法の第1号事業許可は、
* 投資家から資金を募り、
* 募った資金（不動産）の運用を行うために、
必要な許認可です。

なお、不動産特定共同事業法では、その他、
* 2号許可を取得して、他の1号事業者の出資募集を媒介するビジネスを展開したり、
* 別途、3号許可、及び4号許可を取得して、特別目的会社（SPC）に不動産を保有させる、「特例事業」を展開したり、
などといったビジネス展開が認められています。

#不動産クラウドファンディングのメリットとは
不動産特定共同事業者、及び、投資家、双方にとって、不動産クラウドファンディングには、いくつかのメリットがあります。
##不動産特定共同事業者側のメリット
* 新たな資金調達チャネルとして活用できる
* SPCを利用すれば、不動産のオフバランスが実現できる
* 自社が開発した投資用不動産を、ファンドに対して売却することも出来る
* 銀行が融資を提供しないような物件（借地権付きの土地物件や、底地物件、既存不適格物件など）に関しても、クラウドファンディングで資金調達が実施出来る

##投資家サイドのメリット
* 数万円程度の小口から不動産投資を行うことが出来る
* 手続きはオンラインで完結する
* 現物不動産投資と異なり、不動産の取得や運用は不動産クラウドファンディング事業者が行うため、投資家の手間がかからない

#不動産クラウドファンディングのデメリット・リスク
様々なメリットの反面、不動産クラウドファンディングには、下記のようなリスク・デメリットも存在します。

##不動産クラウドファンディング事業者側のデメリット
* 参入費用が高い（不動産特定共同事業法の許可取得やシステム開発コストなど）
* 不動産のオフバランスを実現できる特例事業スキームは、合同会社の設立・維持費用等が別途生じて、特に割高となる
* 投資家保護に対しても留意・態勢が必要となる。

##投資家サイドのデメリット
* 元本割れのリスクがある
* 大半の不動産クラウドファンディング事業者が、出資の中途解約を不可としている
* ファンドの運用期間が変更となる可能性がある
LGM-SOC'21 open Source Contribution
Tags: opensource, letsgrowmore
Published: 2021-08-28 11:41:48

I am very glad to share that I have completed 1 month of Open Source Contribution at **Let's Grow More Summer of Code 2021 (LGMSOC'21)**. Also LGMSOC'21 is my First Open Source Contribution Program .

Such an amazing Experience it was were I have contributed in **Athavani** project as a Front-End Developer where I have Re-designed the **Log-In and Sign-Up UI** and I was Awarded **Level 3** tag on My Pull Request and It was also Merged Successfully. I am very Thankful to **LGMSOC'21** for Such opportunity .

For more Information about the Event please visit <a href="https://dev.to/heetkumar/lgm-soc-21-open-source-contribution-kp2">letsgrowmore.in</a>

![LGMSOC'21 Participant Badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0n03e27f1cgy3edh8nr.png)
What a word processor taught me about HTML
Tags: html
Published: 2021-08-28 11:20:56

When I was little we had an Amstrad PCW. On it was a word processor called LocoScript. I loved that you could write a document on it, save it and come back to it later to add more, which was a novelty at the time.

But what I most liked about it was that all the files had 8 characters followed by a dot and then 3 characters.  Those 3 characters were not the file type, as you'd expect, they actually accepted any letters. So effectively your file names could be 11 characters long, with a dot randomly before the final 3.

But that's not the important part of this article. The important point here is that this is pre-Windows (yes, I'm old). These days if you want to make some of your text bold you just press a button. But with no Windows and no mouse, all you can do is to use the keyboard.

If you wanted to make the next bit of text bold you pressed the + key and then the b key. When you wanted your text to stop being bold you pressed the - key and then the b key.

HTML is pretty similar. If you want your text to be bold then you type `<b>` and when you want it to stop being bold then you type `</b>`. Okay, so these days you'd actually do that with CSS, but you'd still need some sort of tag around your text, even if it's not b (or strong) But it's the same principle of how you set your text to be bold in LocoScript.

Although there was one point that tripped me up when I first learnt HTML. In LocoScript bold is b, italics is i and underline is ul. In HTML bold is b, italics is i and underline is... u. ul is an unordered list.