teleren/devto huggingface dataset:
Green Energy Tips That Help The Environment
Tags: productivity, dotnet
Published: 2021-10-07 07:38:29

Maybe you've watched a TV show about someone who has altered their home to use green energy, or maybe you're just concerned about the environment and want to change your own home. Whatever your motivation, this article is a great start for anyone who wants to start using green energy today.

Talk to your electricity provider and see if they offer an alternative that allows your home to use green energy. Several companies are now using wind or solar power for their electricity, and you can take advantage of this! Call your provider today to find out if you can switch to green energy.

If you want to conserve energy, adjust your air conditioning unit so that it is set two degrees higher in the summer and two degrees lower in the winter. You will probably not be able to tell that you have changed it, but taking that step will save you on your monthly bill and bring down your carbon emissions.

Before you start incorporating green energy sources into your home, you should cut back on the amount of electricity you use. Make sure you're not wasting power by leaving things turned on when you're not using them. This way, when you make the switch over to alternative energy sources, you'll be more efficient with your energy usage.

A helpful tip to live greener and conserve energy is to have the windows in your home tinted. The windows in your home act like glass in a greenhouse and when you want you home to be cool, the windows will heat it up and work against your air conditioner and cost you a bundle.

Are you still using oil heat? You could switch to a greener solution without replacing your furnace. Find a qualified technician to inspect your system and make sure you can switch to a biofuel. Biofuels are non-toxic, degradable and renewable sources of energy that you will be able to re-use.

Use solar hot water. By installing a solar hot water system, you can use solar power to heat the water you use for everything in your home. It will work for your showers, washing dishes and doing laundry. If you are worried about not getting enough sun, you can invest in a small, traditional water heater as well.

If you want to save energy, try not to use your dishwasher very often. Instead, let your dishes air dry. Dishwashers tend to use a lot of energy and because they use so much power, your electricity and your water bill will be through the roof. If you have to use the dishwasher, put it on a low setting.

During the holidays, it can be tempting to want to put up a lot of lights, both inside and outside your home. However, this is not wise. Not only will your electric bill be extremely high, but you will be using too much energy. Try to use Christmas lights sparingly.

The tips in this article are many, but they are all so easy to use that you'll be able to implement each within your own home. Make the changes necessary and monitor the benefits you get from each, then you can select which are working and which don't fit your needs. You'll be energy-independent in no time!
Using Atomic Habits to become a better software developer ⚛️
Tags: programming, productivity, beginners, motivation
Published: 2021-10-07 07:30:42

I’m currently working on building better habits (and breaking bad habits) in order to become a better software developer.

I started reading (well, listening to) Atomic Habits by James Clear and so far it’s been insightful. ⚛️

The first two concepts that have already moved me to make changes were:

##1. Removing the points of friction in my environment for good habits I want to build 
— Ex. To keep from being stuck thinking of what to code or learn the next day, the day prior I write down what I want to code/learn while my mind is still active. That way I avoid analysis paralysis the next day and can quickly jump in. **Remove friction**.
— Ex. Some evenings I hop in bed and find it hard to get up and go to the office to code. So I started to keep my laptop bedside so that I can work there too if needed. **Remove friction**.

##2. Rather than always try to make large improvements (and being discouraged when I fail), I focus on making small improvements daily, which add up over time, and provide daily satisfaction.
— Ex. For working on my projects, I implemented a “never miss twice” policy for updates, and I will update even if I only have 10-30 minutes for a small change. Making even a little improvement daily adds up. **1%+ improvement daily**.
— Ex. I automated a reminder on my phone to make sure I learn at least one new programming concept/problem a day, whether it’s a coding challenge, new technology, or conceptual improvement. Even if it’s quick I make sure not to miss. **1%+ improvement daily**.

It’s not easy though, and sometimes I mess up, so I’m constantly looking for ways to improve my processes/accountability…
⁉️ What ways are ya’ll using to build good habits and break bad ones?
New SSG Feature: Support config file
Tags: opensource, github, beginners
Published: 2021-10-07 07:18:08


# Finding the code to work
I was trying to find a teammate to work on each other's code. Professor suggested some repositories to get started. I never thought I would choose a python project as I don't have any experience in this language. However, I asked Andrei[SSG](https://github.com/abatomunkuev/static_site_generator) if anyone was working on his project. After he confirmed no one created an issue. I immediately made request to work.[issue#13](https://github.com/abatomunkuev/static_site_generator/issues/13)

## NEW FEATURE

A user could run the SSG by doing either of the following:
```
# Option 1: use command line arguments:
ssg --input ./site --output ./build --stylesheet https://cdn.jsdelivr.net/npm/water.css@2/out/water.css --lang fr

# Option 2: use a config file
ssg --config ./ssg-config.json
```
The config file option means we can have a much shorter command, and instead store our options in a file.

# Writing & Testing code in python
After I forked the project, I thought not to take much time to write code on python. The problem was the packages required to run and took some time for me to figure out. I had mac OS that had a different version of python installed after reinstallation, it worked. I started studying code and was surprised to know its similarity with swift. I copied similar structures and made some small changes. Then, I looked for reading JSON files in python on the internet. I was able to find the web link to read the JSON file: [geeksforgeeks](https://www.geeksforgeeks.org/read-json-file-using-python/).
```
# Python program to read
# json file

import JSON

# Opening JSON file
f = open('data.json',)

# returns JSON object as
# a dictionary
data = json.load(f)

# Iterating through the json
# list
for i in data['emp_details']:
	print(i)

# Closing file
f.close()
```
I was able to write code without any issues.  However, testing was a bit tricky as I had to undergo a lot of changes and exceptions.

# Tackle the problems
I didn't have many challenges. The only thing is having code tested for all outcomes and avoid any mistakes. Because after merging, it is not good practice to re-edit code. So, reviewing code is very important while developing.

# Using git
Well, working with git can be trickier. However, I didn't find it difficult practising with git and followed notes provided by professor. I merged it into my code and made a push request to the master. I wanted the owner to test before merge to the original repository. So, I created a draft pull request for the owner to read and verify[PR](https://github.com/abatomunkuev/static_site_generator/pull/14).

# Conclusion
It was not easy to work with an unfamiliar language yet, working in open source helps you a lot in terms of learning new rules. I have learnt, the syntax is different in every language. The technique and ideas to build are the same. 
[FinalCode](https://github.com/japneetsingh035/static_site_generator/commit/861a0166c725c7f6b2cd3604c2839d2fc6a4c93c)
Configure Emotion with your Vite React Project
Tags: javascript, react, webdev, tutorial
Published: 2021-10-07 07:15:23

[`@vitejs/plugin-react-refresh` was migrated into `@vitejs/plugin-react`](https://github.com/vitejs/vite/pull/3588), and many Emotion + Vite tutorials and boilerplates out there became outdated as a result.
The Vite monorepo has an [example react-emotion setup](https://github.com/vitejs/vite/tree/main/packages/playground/react-emotion), which seems to works quite well. Here's the gist:

## 1. Install Emotion Dependencies
Make sure you have the following installed:
```shell
yarn add @emotion/react
yarn add -D @emotion/babel-plugin
```

## 2. Update vite.config.js

The `@vitejs/plugin-react` plugin accepts a [custom babel config](https://github.com/vitejs/vite/blob/main/packages/plugin-react/README.md#babel-configuration) via the `babel` option. Here, we add the `@emotion/babel-plugin` plugin we just installed.
Also, to be able to use the `css` prop in our JSX, we need to instruct `@vitejs/plugin-react` to use Emotion's `jsx` function instead of the default jsx-runtime when compiling JSX. We do this by setting the `jsxImportSource` option to `@emotion/react`.
```js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
  ],
});
```

## Optional: TypeScript support
When using Emotion with TypeScript, your editor may complain that `css` is not a valid prop. This is because by default, `css` is not a recognised prop in React and your TypeScript compiler doesn't know about Emotion. Fix this by instructing TypeScript to use types from Emotion instead:
```json
{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react"
  }
}
``` 
Hope this helps!
What is the ROLE of “Full Stack Developer”?
Tags: webdev, fullstack, beginners
Published: 2021-10-07 07:09:54

# **What is Full Stack Development?**
In the world of software programming, there are many roles in the industry, one main role is Full Stak Developer, it helps to have someone on the team who is something of a jack of all trades. They can help with various stages of development and have the versatility and time management to assist all levels of the development team. Full Stack is a layer of software or web development consisting of the front-end and the back-end portions of an application. Front-end is what the users will see or interact with on your application. Back-end part is what users do not see, such as the application’s logic, database, server, etc. A full-stack web developer is comfortable working with both back-end and front-end technologies that make a website or application function properly.

# **What Does a Full Stack Developer Do?**

A Full Stack Developer is someone who works with the Back End or server side of the application as well as the Front End, or client-side. Full Stack Developers have to have some skills in a wide variety of coding niches, from databases to graphic design and UI/UX management in order to do their job well.

# **Front End vs. Back End vs. Full Stack Web Developers, What’s the Difference?**

Front End Developers: Deal with the interface and user-facing systems Develop the navigation, interface, and visuals Focus on user experience Utilize HTML, CSS3, and JavaScript Are the most aesthetically forward web development position.

Back End Developers: Deal with the server and database of the application Create the back frame that allows the front end development to exist Utilize Python, Ruby, and PHP Store user information into a database.

Full Stack Developers: Cross-discipline web development skills involving front and back end Deal with the overlap between the front end and back end Utilize all the coding languages of the first two-plus MySQL, machine learning, and more. Take responsibility for the entire experience to make sure it goes smoothly.

# **Skills and Tools Used By Full Stack Web Developers**

Front-end technologies like HTML, CSS, Javascript, ReactJS.

Back-end programming languages like Python, Ruby, Java, C#.
Version control systems like Git and GitHub.
APIs like REST and SOAP as well as protocol like HTTP.
Database storage solutions like MongoDB, SQL, and NoSQL.
Graphic design and visual communications skills.
Apache or Nginx servers.

# **Personality Traits of a Great Full Stack Developer**
*A Time Management Master
*Creative Thinking
*Patience
*Curiosity for learning
*Conclusion

To conclude, Full Stack Developers are highly skilled experts who can handle everything related to web development. These Full Stack Developer skills are what distinguishes them from Frontend and Backend Developers. 
If there’s any doubt comment here and Contact me on my Socials.
Instagram: https://www.instagram.com/lithira.buwaneka/
Twitter: https://twitter.com/Lithira_
GitHub: https://github.com/LithiraBuwaneka
How To Print Right Alphabate Triangle in Golang and Javascript.
Tags: go, javascript, programming, beginners
Published: 2021-10-07 06:52:06

Hello Guys,
So in this articles we're about to cover up , How to print right triangle in golang and javascript as well.

Flow of the code for both quite similar but for converting an int to character can be different for both languages.

Let me tell you which pattern we're going to print in this article

Pattern

A
B C
D E F
G H I J
K L M N O
P Q R S T U 
V W X Y Z [ \

We are about to print this pattern , So without wasting anytime let's start writing code as well

1. Golang

``` ```package main

import "fmt"

func main() {
	temp := 65
	rows := 72
	for i := 65; i <= rows; i++ {
		for j := 66; j <= i; j++ {
			fmt.Printf(" %c", temp)
			temp++
		}
		fmt.Println()
	}
}```

Let's Explore code step by step , what we have did in code

1. We have loaded the package which is main .
2. importing fmt package which is helping us to print the statement.
3. We've created main function and then main things comes here
4. we've created two variables and both are important for the program. temp variable is holding the incremented values and another variable to use as rows.
5. running the loop , There is main focus we have to do is on loops how they have been running.
6. here we're using formatter to convert int to character, Formatter is %c

For More Reading you can checkout this 
https://kdsingh4.blogspot.com/2021/10/right-triangle-characters-pattern-in.html
Customize the Edit Dialog Using Templates in Blazor TreeGrid
Tags: blazor, csharp, dotnet, webdev
Published: 2021-10-07 06:48:51

Learn how to customize edit dialog in a Syncfusion [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) using templates. 

Download an example from GitHub: https://bit.ly/3uHCk7z 

Refer to the following documentation to work with the edit dialog template in the Blazor TreeGrid component: https://bit.ly/3BqIGuo 

Check out this online example of the dialog editing in the Blazor TreeGrid component: https://bit.ly/3uQMDX6

{% youtube TxHrtyVwY4A %}
Music players built using VueJS
Tags: webdev, vue, productivity, music
Published: 2021-10-07 06:35:42

Nowadays almost every industry has adopted an online portal to share their content and one of them is the music industry. Yes, around 70% of the music industry has already adopted an online streaming platform to share their music content by offering a subscription based streaming platform.

Are you planning to design a streaming platform for yourself or for customers? Then you might need an awesome music player to integrate into it. And if you are choosing Vue JS as your front-end stack then my friend you have come to the right place.

In this post, you are going to see some simple, lightweight, intuitive and easy-to-use designs of music players made using Vue JS. So without delay let's get into our list.

### Music Player - One

This music player is designed by [Phil](https://codepen.io/ph1p) it has a very simple design with a play, pause, next, previous, shuffle and repeat buttons on it and a gramophone disc rotating on it to give a decent look to the player.

![Music player](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jt8evh4g1mak0oo9pnf.gif)
 
Check out it in action [here](https://codepen.io/ph1p/pen/OrYQoM)

### Music Player - Two

This music player is designed by [Ahmed Elsakaan](https://codepen.io/ixahmedxi) and it has a very lean design with music cover image on top and play, pause, next and previous button on it.

![Music Player 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99yvs0owfdpook45yyl1.gif)

Check out it in action [here](https://codepen.io/ixahmedxi/pen/BRarWZ)

### Music Player - Three

This music player is designed by [Davi Guimarães](https://github.com/Davigl) and it has two card designs, one for music player and one for playlist.

![Music Player 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpo5qlwy2tgkqt826lgt.gif)

Check out it in action [here](https://basic-music-player.netlify.app/)

### Mini Music Player - VueJS

This music player is designed by [Muhammed Erdem](https://codepen.io/JavaScriptJunkie) and it is by far my favorite music player. It has a minimalist design and have some decent animation effects added to it.

![Music Player 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ukpejxcadybbp89kcqy.gif)

Check out it in action [here](https://codepen.io/JavaScriptJunkie/pen/qBWrRyg)

### Bruga Music Player

This music player is designed and developed by [Andrés Brugarolas](https://www.andres-brugarolas.com/) and it is not just a music player it is a complete web portal with playlist, search bars, music player, album view and much more.

![Music player - 5.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1633522484111/m9dGBACdj.gif)

Check out it in action [here](https://www.andres-brugarolas.com/bruga-music/)


> 
I hope you like my curated list of music players built on using VueJS. Please share your favorite one in to comment box and do follow me here and on [twitter](https://twitter.com/KodeWithChirag)
Intro To MongoDB Realm with VueJS, Ionic Framework And ViteJS
Tags: mongodb, vue, ionic, vite
Published: 2021-10-07 06:35:33

>The [MongoDB Realm Web SDK](https://docs.mongodb.com/realm/web/) enables browser-based applications to access data stored in MongoDB Atlas and interact with MongoDB Realm services like Functions and authentication. The Web SDK supports both JavaScript and TypeScript applications.

In our project, we are going to connect to a MongoDB backend hosted in the cloud, Create Users, Login Users, Save extra profile information with the User Execute Queries against the Mongo Database using the same mongo query language you normally use and run some cloud functions. 

This will be split between three different video, this first one will get you started all the way from the beginning where you set up your app and create your database.

We are building the application using [Vuejs](https://v3.vuejs.org/), it is being packaged and developed using [ViteJS](https://vitejs.dev/) and the UI Components are from [Ionic Framework](https://ionicframework.com/vue)

{% youtube HIIqSWB_4G8 %}

Chapters
---------------
00:00 - Intro
01:50 - what is Realm
03:10 - Setup Project and Database
07:03 - Setup Email Password Authentication
08:35 - Store Custom User Data, Setup Database
13:08 - Starting to code, Ionic Vite VueJS
14:10 - Starting off with Some Code to Save Time
16:03 - Login User Template UI
17:05 - Login User Coding Functions
19:21 - Integrating Realm WebSDK - Login
25:00 - Create Account Template UI
28:46 - Integrating Realm WebSDK - Create Account & CustomData
34:16 - Testing Create Account
36:30 - Managing Private Routes and Redirection, Getting User Session
44:15 - Integrating Realm WebSDK - User Logout 
47:00 - Testing Login, See User Info and Logout
47:28 - Forgot to Redirect on Successful Login
48:17 - Debugging Logout
50:04 - Tracking User Session To Redirect When App Launches
51:11 - Overview and What's Next

Links
--------
- Getting Started - https://docs.mongodb.com/realm/web/#std-label-web-intro
- Queries - https://docs.mongodb.com/realm/web/mongodb/
- Cloud Functions - https://docs.mongodb.com/realm/web/call-a-function/
- Project Setup - https://docs.mongodb.com/realm/tutorial/realm-app/

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W31U7HM)
How to Self Host Notion API Worker (from Splitbee)
Tags: notion, javascript, typescript, opensource
Published: 2021-10-07 06:28:32

## Introduction

Lately, I'm learning React and its frameworks (like Next.js) and libraries. I even remake my personal site as my first portfolio in React. Just made it using Next.js and Chakra UI and integrated it to my Notion workspace.

To connect my web to my Notion workspace I used [React Notion](https://github.com/splitbee/react-notion) from Splitbee. You can check it for a while.

So, React Notion use [Notion API Worker](https://github.com/splitbee/notion-api-worker) to handle its requests. It can be also self-hosted using Cloudflare. Cloudflare offers a generous free plan with up to 100,000 request per day.

I will not explain about React Notion details, you can check it alone by yourself. I'll write about how to self-host the Notion API Worker using Cloudflare.

## How to Self Host it?
* You can login to [Cloudlfare worker site](https://workers.cloudflare.com/) or register if you don't have an account yet.
* Before go further, you can fork and clone the [Notion API Worker](https://github.com/splitbee/notion-api-worker).
* After you cloned it, install the dependencies using `yarn`.
* Rename the file named `wrangler.example.toml` to `wrangler.toml`.
* Edit `wrangler.toml` according to your preferences. Here's also example of mine.
```
name = [Your worker url]
webpack_config = "webpack.config.js"
type = "webpack"
workers_dev = true
compatibility_date = "2021-10-07"

account_id = [Your Cloudflare account ID]
zone_id = [Your Cloudflare zone_id]

route = "[Your domain]/*"
```
![Wrangler Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2n0aufbbrwdat2ptprf.PNG)
* Make sure you have installed **wrangler**. You can see how to install it [here](https://developers.cloudflare.com/workers/get-started/guide).
* You can edit the scripts in `package.json` if you want so you can run it with your custom command.
```
  "scripts": {
    "build": "webpack",
    "dev": "wrangler dev",
    "preview": "wrangler preview",
    "deploy": "wrangler publish"
  },
```
* To run it locally, you can run `yarn dev` and open the link.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9iecorvzieab4ozco51.PNG)
* To see the preview you can run `yarn preview`.
* The last thing, you can deploy it to Cloudflare server using `yarn deploy` or `wrangler publish`. Then open the link in your browser.
![Wrangler publish](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4rgv6u7vkueqlou16fc.jpg)

Tadaaaaa, it's done. You can check your API worker in your Cloudflare dashboard. This is my first english article, LOL. I hope it can help and inspire you.

Reference: [https://github.com/splitbee/notion-api-worker/issues/32#issuecomment-773613634](Reference: https://github.com/splitbee/notion-api-worker/issues/32#issuecomment-773613634)