teleren/devto huggingface dataset:
Easy way to add a dark theme on your website.
Tags: webdev, uiweekly, css, javascript
Published: 2020-09-10 18:10:06

## What is a dark theme?

A dark theme displays dark color in the maximum of the UI, reducing strain in our eyes. Recently, a dark theme is a common trend, that can be seen on most websites and apps.

Here in this blog, I am going to share one of the easy ways to add a dark theme when we click a button.

`Turn Your webpage from here:`

![Button Light](https://ishanbagchi.github.io/Ishan-Tech-Blog/day3/images/button-light.PNG)

`To here:`

![Button Dark](https://ishanbagchi.github.io/Ishan-Tech-Blog/day3/images/button-dark.PNG)

> Our main concern is to change the theme, so we are not focusing on beauty and other functionality.

## HTML

We are just creating a button, so we need just a single `button` tag in the HTML file. 

```html
<button id="myBtn">Push Me</button>
```

## CSS

The below code is used to create the basic light theme on the page. 

```CSS
* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #ededed;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    color: #000;
    background: #fff;
    border: solid .12rem #121212;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    width: 4rem;
    border-radius: 7%;
}
```

The below code is concerned about the UI(User Interface) of the dark-theme.

```css
.dark-mode {
    background: #121212;
}

.dark-mode > button {
    background: #000;
    color: #fff;
    border-color: #ededed;
}
```

## JavaScript

This is the main script involved in giving the dark-theme to our website when the `push me` key is pressed.

```javascript
document.getElementById("myBtn").addEventListener("click", function() {
    var element = document.body;
    element.classList.toggle("dark-mode");
});
```

Walla! Our fully functioning toggle dark theme is completed. Isn't it short and simple? 

> There is a small limitation, link to your JavaScript file in the `body` tag, and not in the `head` tag of your HTML code. 

You can check the full functioning button by pressing [here](https://ishanbagchi.github.io/Ishan-Tech-Blog/day3/button.html).
Sending file in a POST request
Tags: typescript, axios, post, file
Published: 2020-09-10 18:10:05

I had some troubles trying to send a file via **POST** using Typescript 2.7 and Axios, so I wanted to write my solution here, hopefully it will be helpful to others.

The method I was trying to use is to simply make an object and send it as the body of the Post request:

```typescript
// Headers object
const headers = { 'userID': "1234" };
// Body Object
const body = { 
    'processID': "4321",
    'file': fs.createReadStream( "files/data.zip")
    };
// URL
const url = 'localhost:8080/api/Extension/deploy';
// POST request
let results = await axios.post(url, body, { headers });
// Showing results
console.log(results);
```

But the file was not reaching its final destination, so after looking for a while I found that it worked using **form-data** to construct the body of the request:

```typescript
// Importing library
const FormData = require('form-data');
// Headers object
const headers = { 'userID': "1234" };
// Creating a new form data
var bodyFormData = new FormData();
// Appending info to body form data
await bodyFormData.append('processID', "1234");
await bodyFormData.append('file', fs.createReadStream("files/data.zip"), "data.zip"); 
//URL
const url = 'localhost:8080/api/Extension/deploy';
// POST request
let results = await axios.post(url, body, { headers });
// Showing results
console.log(results);
```
You can learn more about form data here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
Remove duplicates from an array
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-09-10 18:10:05

```
const array = [1, 1, 2, 3, 5, 5, 1];
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // [1, 2, 3, 5]
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack  
**[codedrops.tech](https://www.codedrops.tech/)**
Patterns for writing better git commit messages
Tags: git, github
Published: 2020-09-10 18:04:00

It's an opinionated guide I keep with me to consult every time I catch myself in doubt if I'm writing nice commit messages with context of what I'm delivering.

-----

## A good commit should complete the following sentence

A properly formed Git commit subject line should always be able to complete the following sentence:
`If applied, this commit <will your subject line here>`

## Commit Sample

See an example of commit below:

```bash
[type](optional scope): [subject]

[optional body]

[optional footer]
```

## Types

Must be one of the following:

-   build - Build related changes
-   ci - CI related changes
-   chore - Build process or auxiliary tool changes
-   docs - Documentation only changes
-   feat - A new feature
-   fix - A bug fix
-   perf - A code change that improves performance
-   refactor - A code change that neither fixes a bug or adds a feature
-   revert - Reverting things
-   style - Markup, white-space, formatting, missing semi-colons...
-   test - Adding missing tests

## Scope

A scope may be provided to a commit’s type, to provide additional contextual information and is contained within parenthesis, e.g., feat(parser): add the ability to parse arrays.


## Subject

The subject contains a succinct description of the change:

-   Use the imperative, present tense: "change" not "changed" nor "changes"
-   No dot (.) at the end.


## Body

Just as in the subject, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.


## The 7 rules of a great commit message:

1.  Separate subject from the body with a blank line
2.  Limit the subject line to 50 characters
3.  Summary in the present tense. Not capitalized.
4.  Do not end the subject line with a period
5.  Use the imperative mood in the subject line
6.  Wrap the body at 72 characters
7.  Use the body to explain what and why vs. how


### Commit Template

[Go to my git commit template](https://github.com/helderburato/dotfiles/blob/master/git/.gittemplates/commit)


## References

-   [How to Write a Git Commit Message by Chris Beams](https://chris.beams.io/posts/git-commit/)
-   [Why Use Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.2/#why-use-conventional-commits)
-   [@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional)
- [commit-messages-guide](https://github.com/RomuloOliveira/commit-messages-guide)
Remove Duplicates from Sorted Array - Leetcode
Tags: python, javascript, leetcode
Published: 2020-09-10 17:53:24

Given a sorted array of numbers with duplicates, remove all duplicates from array, leaving one of each number. Return the length of the array. 
For example:
```
input = [1,1,2,2,2,3,3]
output = [1,2,3]
```
This problem is relatively straightforward. If you want to accomplish it using O(n) time and 0(1) space, you want to use the two pointer method. I will instantiate two pointers, i and j, set to 0 and 1, respectively. I will use a while loop, and I will check whether the num with i index is equal to num with j index. If not, I increment both of them by 1. If they are equal, I pop out the number with j index. 
```python
def removeDuplicates(nums):
    i, j = 0, 1

    while j < len(nums):
        if nums[i] != nums[j]:
            i += 1
            j += 1
        elif nums[i] == nums[j]:
            nums.pop(j)
    return len(nums)
```
In javascript, it's similar:
```javascript
function removeDuplicates(nums):
    let i = 0;
    let j = 1;
    while (j< nums.length) {
        if (nums[i] != nums[j]) {
            i+= 1;
            j+= 1;
     } else if (nums[i] == nums[j]) {
         nums.splice(j, 1);
}
    return nums.length;
}
```
In javascript function, I use splice instead of pop since javascript doesn't pop by index. Splice takes the element with the specified index, and if there's a 1 as parameter, it removes that element.
My Experience with the Impostor Syndrome
Tags: motivation, resarch, improvement
Published: 2020-09-10 17:32:52

I've just read this wonderful article about the "impostors-advantage" terminology to described people with the "Impostor Syndrome": [The Impostor Syndrome](https://www.zainrizvi.io/blog/the-impostors-advantage)

I used to struggle with Imposter Syndrome a lot when I first started my undergraduate at McGill in Anatomy and Cell Biology. I didn't speak English very well at all, so the feeling of being out of place was very strong. I remember one day during my first year, feeling brave, I've raised my hand to ask a question in a fully packed 700+ student organic chemistry auditorium. I've mumbled my way through the question so bad that the teacher was startled for a moment and then moved on with her class. 

However, at some point something switched in my head. I was telling myself "I already clearly don't belong here, I might as well push harder". Messing something up and making mistakes were a fact of life at that point, so I took more and more chances and tried stuff out. 

Whenever I had a question I knew it was a dumb one so I thought myself "Might as well ask it now" and raised my hand. If something didn't make sense, I said it aloud and asked the teacher to explain it more, outing myself as a slow student. If I didn't understand why I got point removed in an exam I would go straight to the teacher office and argue my point. I constantly had the feeling that the teachers body knew I wasn't the sharpest tool in the shed so letting them down wasn't a big deal.

Fast-forward to my graduation and I've made the Dean's Honour List in Neuroscience taking 13 credit more than I had to because I genuinely was interested by the classes and worked in three different research labs to pursue my passion. 

Making peace with the fact that it is OK to suck at something and that it is the natural process of learning is what freed me from the Impostor Syndrome and led me to use it as an advantage:

"That feeling of being an impostor is your subconscious telling you something: It’s saying you’re about to push yourself past your comfort zone and into the growth zone."

---

→ Curious about AI,  Machine Learning, Deep Learning or the Brain? Head to my [Youtube Channel](https://www.youtube.com/c/codethiscodethat)

→ For Business Inquiry: [Linkedin](https://www.linkedin.com/in/yacine-mahdid-809425163/) 

→ For Banters: [Twitter](https://twitter.com/CodeThisCodeTh1)
console.log("My First Post")
Tags: beginners, javascript, codenewbie
Published: 2020-09-06 14:15:04

Hi, my name is Idman 👋🏾

Welcome to my first post!

I'm reading 'The Software Craftsman' by Sandro Mancuso and he advises that every developer should have some sort of blog to document their learning and progress - so here I am. 

This blog is for me to look back on and hopefully see improvement in my understanding of the technologies I'm learning. Also, I've benefited immensely from developers documenting their journeys and sharing tips. Maybe this will be useful to a beginner at some point.

I've been enrolled on a bootcamp for 6 weeks now and, prior to the bootcamp, I had a bit of experience with HTML and CSS so the learning curve wasn't too steep.

Then we started JavaScript 😬

My background is in social science and education, so the last time I solved a logical problem involving numbers was probably during my maths GCSEs, which were nearly a decade ago!

I've spent the past week solving beginner's-level JavaScript katas just to get my brain re-accustomed to conditional logic and reasoning. A tip that has helped a non-maths-inclined individual like myself is to: break down the problem in digestible bits and think of how you'd solve it in real-life.

I'm hoping that the JavaScript content I've learnt so far will become less abstract once I apply it to the projects I'm working on.
Edpresso Spotlight: Harsh Jain
Tags: webdev, datascience, career
Published: 2020-09-10 17:23:49

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sbxdjze4vmgqdry9z51g.jpg)
> "Coding is nothing more than formulating your ideas and solutions into the form of a code."

[Harsh Jain](https://www.educative.io/profile/view/5084051834667008) is the author of, [Data science career guide](https://www.educative.io/edpresso/data-science-career-guide), the shot that received the most views of any community-contributed shot in August 2020. He has been a part of the Edpresso community for 5 months.

Harsh has been coding since the age of 15 when he created a static website for a school project. He was given positive feedback on this project, which pushed him to major in computer science with a specialization in Artificial Intelligence. 

For Harsh, "The day is not over if I have not done any coding. I usually try to solve Competitive Programming problems, which help me to improve my problem-solving skills. Every day I try to learn something new."

Although Harsh has always been a coder, he has not always been a writer. 

"To be honest, I never thought that I could even write technical blogs. One day, the idea just came up and I searched what are the places where I can write these kinds of blogs. I found Medium, Educative's Edpresso, and some other places. I tried Edpresso because after writing an article, the Edpresso's team reviews it and provides feedback (which is not present on other platforms)."

Harsh believes in the "ability to express your knowledge to a large portion of the community. You can share your views on any technology domain and reach a large portion of the dev community."

Even though Harsh was initially hesitant to write, due to the "human tendency to avoid those things which look to be tough (although we want to do them)", he eventually did it. He recommends people who are also hesitant to, "give it a shot and don't be scared."


For anyone interested in coding who is unsure of how to start, Harsh recommends tutorials. 

"There are many great tutorials where you can learn how to code and improve your confidence. Make sure that you are coding and not just following the tutorial -- try some code on your own problems, and ​spend time writing and practicing how to solve problems with code. I hope that my suggestions and journey will motivate you."

**Connect with Harsh on [LinkedIn](https://www.linkedin.com/in/hjain5164/) or visit his [webpage](https://hjain5164.github.io/portfolio/).**

>[Edpresso](https://educative.io/edpresso) is a free database of short, concise articles on dev topics written by Educative community members.
My #100DOC - Day 15
Tags: changelog, 100daysofcode, log
Published: 2020-09-10 17:17:36

### Day 15: September 10, 2020

#### **Today's Progress**: 
1. **[Continued with The Complete JavaScript Course](https://github.com/pablohs1986/javaScriptCompleteCourse2020_Schmedtmann)** (1h 38min):I continued with section 5, delving into objects, functions and the IIFE pattern.
    
#### **What I learned**: 
* What is IIFE pattern and its use.
* Handle objects and functions in JavaScript.

#### **Total time**:
1h 38min.
Database Scaling Tutorial - System Design Basics
Tags: career, webdev, tutorial, beginners
Published: 2020-09-10 17:13:05

Part 3 of series on System Design
{% link https://dev.to/renaissancetroll/load-balancer-tutorial-2020-system-design-basics-4g3i %}
Databases are generally the bottleneck to application performance. While app servers can be scaled horizontally with ease, all those servers will still be hitting the same database, which will eventually kill performance. In this tutorial I'll cover some of the key concepts of database design and database scaling

**While you don't need to be a database expert, it is good to understand some of the fundamental concepts related to how they work in large scale web applications**

Concepts covered:
- Indexes
- Denormalization
- Caching
- Replication
- Sharding / Horizontal Partitioning 
- Vertical partitioning
- Tradeoffs of the above strategies 

{% youtube VhsMXWb5Eew %}
WOW!!! The Lorem Ipsum for photos :Lorem Picsum
Tags: html, css, javascript, beginners
Published: 2020-09-10 17:11:06

Just Imagine, you get a functionality to show random images in html page. Every time viewer open he gets a new image. But lorem picsum is more than this and created by David Marby & Nijiko Yonskai.

(1) Use the official site links to showcase your template without hosting any image. 

https://picsum.photos/

*The below image is  generated*

![picsum random image](https://picsum.photos/200/300?random=1)


 (2) Host your images by your self. I am planning to use randomise my "join my team" image. The Picsum Repo is here:

{% github DMarby/picsum-photos %}

**Please visit my profile for more interesting articles**


######***IMP REQUEST:***

###### You are most welcome to join my team 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qhbvg5fsrh3nt7anh36.png)

[ Click here for joining my team ]
(https://forms.gle/pSCALuEWHus3pg9F6).

###### *Also you are most welcome to join OPEN SOURCE INTELLIGENT SYSTEM (OSINT) if you can help in open source project regarding safeguarding humans from various diseases like CORONA outbreak*
######https://github.com/Manishfoodtechs/OSINTHRH/wiki

Contact email: Manishfoodtechs@gmail.com. 

If you have any problem, our team is also engaged in professional consultancy and delivery.

![](https://media2.giphy.com/media/oNrPzIy3OhHm7zrvA3/source.gif)

Imagecredit: pixabay
What is the difference between Gitlab and GitHub?
Tags: devops, github, gitlab, difference
Published: 2020-09-10 17:09:23

Doesn't it sound very similar? However, there are trucks of differences between these two friends. A glance over a few aspects would help us get a better view of the contradiction.
*GitHub*-A software development and distributed version control host; it offers the provision in source code management, whereas *GitLab* is a DevOps lifecycle tool(now Agile as well) which yields Git repository manager for issue tracking and continuous pipelining. Both Gitlab and GitHub collaborate on code and also offer a simple issue tracker that enable status and assignee change for various issues.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nbdtxd940kte1lf0geow.png "Gitlab vs GitHub")

Most of us are aware that GitHub public repositories are freely available to a vast audience(of course developers)-an open-source software. The recent release by GitHub gives you a provision of integrated CI/CD tool to automate the tests and buckle up the development process. Tracking comment changes, navigation towards method/function in a changed file and triggering the pipeline are few of the exceptional features of GitHub. 
Though GitHub makes a continuous effort to prove itself, the amenities that Gitlab provides, made a shout-out right from its birth.

The key endorsements of Gitlab that won the hearts of developers over GitHub include the following:

* The Share Runners allow the usage of Gitlab CI/CD for free up to 2000 build minutes for private and unlimited for public projects.
* You can import into, export projects and issues from various sources such as Bitbucket, GitHub, google code, etc. and self-learn with the documentation and guides.
* Project issues, Milestones and Iterations can be carefully scrutinized in sync with your Agile project development. 
* Gitlab is now available for the Agile operations; the highlighting features like Environment Auto-stop, single integrated tool, value stream analytics and self-monitoring would switch the excitement mode on if you're a developer.
* If you're struggling with feedback, fixture and preview changes, Gitlab's Web IDE helps you stay in touch with your client Merge request and Gitlab CI.
What is Flatiron School?
Tags: javascript, react, ruby, rails
Published: 2020-09-10 17:07:45

If you're reading this article on THIS website, chances are you've attended a bootcamp if you're not completely self-taught. This is for those just getting into software engineering/website development.


As of September 10th, 2020, I am writing this blog on the day of my graduation to celebrate this accomplishment and those who helped me along the way. Flatiron is a highly intensive bootcamp mainly for Data Science, Software Engineering, and UI/UX Design curriculums. Personally, I went for software engineering. It teaches the fundamental concepts of Object-Oriented Programming in website development through rigorous lectures, labs, and close collaboration with classmates.

In the beginning, I have to be honest -- I wasn't too sure of what to expect. I had this notion in my head that you had to be incredibly intelligent to learn how to code. This is far from the truth. Flatiron didn't just teach me how to code. They taught me how to *learn!* It wasn't just about learning to build websites, but how to truly be a software engineer. 

If I had anything I wanted to place a spotlight on the most, it would be the highly supportive staff the school has. I had the pleasure of working with my cohort lead, Juan Castillo, for the majority of my time at Flatiron. He was always there for us whenever we needed him. He played a huge role in all of our development as students, and that is truly a treasure and debt we could never repay to someone who genuinely cared about us and our success.

If you're thinking of making a change in your life as a serious developer, I highly recommend applying to Flatiron for the biggest opportunity to change your life. It helped me change mine, and now I feel like I have all the power of the universe in the palm of my hand. 

Here is a link to their website:
https://www.flatironschool.com/

## Side Note From Author:
Please don't forget to follow me! I like to post mostly about code and tutorials. You can also find me on Twitter! [@MattPDev](https://www.twitter.com/mattpdev)
Material Ui com Styled Components no React
Tags: materialui, react, styledcomponents
Published: 2020-09-10 16:58:29

Quando comecei a aprender material ui não tinha noção da sua proporção e possibilidades, pra mim era apenas uma lib engessada, com seus components iguais em todos os sites, criei essa prerrogativa na cabeça porque não sabia como editar seu estilo.

Até que descobri o método **styled()** do Styled-Components que nos permite estilizar componentes usando exatamente a mesma sintaxe de uma folha de estilo CSS.  
  
Código:
```javascript
import React from "react";
import Card from "@material-ui/core/Card";
import Typography from "@material-ui/core/Typography";

import styled from "styled-components";

const CardStyled = styled(Card)`
  text-align: center;
  width: 200px;
`;

const TextStyled = styled(Typography)`
  width: 200px;
  height: 100px;
  font-size: 24px;
  color: blue;
  background-color: wheat;
`;

export default function Index() {
  return (
    <CardStyled>
      <TextStyled>Meu Card MUI com texto azul</TextStyled>
    </CardStyled>
  );
}
}
```
Resultado:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/utty05t58j302sg7cdw0.PNG)
Five-unbelievable-open-source-object-detection-projects-ready-to-use-in-2020-(part-2)
Tags: machinelearning, computerscience, datascience, python
Published: 2020-09-10 16:56:30

###Open-Source is a great resource to enhance your skills and learn new technology. 

###Always contribute to and support the open-source community.

###Here is a link to read about the best five object detection open source projects. 

[five-unbelievable-open-source-object-detection-projects-ready-to-use-in-2020-part-2](https://medium.com/@waliamrinal/five-unbelievable-open-source-object-detection-projects-ready-to-use-in-2020-part-2-c0de88666a97)

(#machinelearning #ai #ai #machinelearning #python #deeplearning #datascience #artificialintelligence #computervision #ai #datascience #deeplearning #artificialintelligence #computervision #ml #imageprocessing #scikitlearn  #transferlearning )