teleren/devto huggingface dataset:
Should I keep my UI and my API in different repositories?
Published: 2020-07-14 21:20:44

**Probably not**. I would keep the number of repositories as low as possible. <br />You can easily start with just one repository and move some code to another when needed. This is to make your life within the project as easy as possible. 
As most increments require changes both in the API and the UI, it makes sense to treat them as one

---

So in most cases, you can get by with just one repository for all packages of the same system (e.g. a web app) to the same repository:

```
my-project/
  ui/
  api/
``` 

I tend to use [Yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) when working a project like this. In most cases, you can go without. It is only when you have co-dependent packages that share the same dependencies as React.

## Pros of having all subprojects in one repository
- Much nicer to navigate the project and make changes
- Easy to come up with descriptive commit messages. "Add a logout feature" vs backend: "Add an endpoint for removing user's session" + frontend: "Add a logout button"
- You see all changes you've made with `git status`
- You can run tests for all projects at once
- No risk of deploying non-matching / incompatible versions of the project

## Cons of using separate repositories:
- You need to create 2 separate commits for each increment
- Changes are reviewed in two separate PRs
- 2 repositories can easily get out of sync when one PR is accepted before the other one is ready
- "Why isn't this feature working? 🤔" "Ah, I forgot to pull in the latest changes from the backend repo" 

---

## Keep these in mind
- Some tools are not made with monorepos in mind. Especially all tools that build your project (CI tools, static site hosts) sometimes make assumptions of where your "`public`" directory is. 
Most of these can be configured these days though. We've had some issues with for example Serverless and monorepos.
- Should you put all your company's projects under one repository? Probably not. There are no absolutes when it comes to where different packages should be kept and you should discuss it within your team. If 2+ packages depend on each other, they probably belong to the same repo
Github Profile README 🔥
Tags: github, markdown, branding, notion
Published: 2020-07-14 21:05:37

One of the biggest news with lots of tweets last week was GitHub's profile README! You can finally add more than just pinned repositories to your GitHub profile!

**Github** recently released a feature which allows you to add a README to your profile page. This is a great way to introduce yourself to the Github community as you highlight your skills and projects. In this post, we'll be looking how i have created my profile's _README!_ 
I have updated my GitHub profile immediately too. Mine is pretty simple, but I have seen so many creative ones.

# What to add to your README?

Check out my [Github profile](https://github.com/adityasharan01)
If you would have seen my profile you can easily see a gif moving around typing my name and stuff around who i am.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dixmlxiwr1lczpct9o18.JPG)
Let's break down some of the elements you can add to your own page.
+ So I Created a website using **particle js** and **typewriter js** _(you can easily find them using google )_.However if you are feeling lazy then these are the links: [1](https://github.com/VincentGarreau/particles.js/) [2](https://codepen.io/bradtraversy/pen/jeNjwP)
+ I have used some free tools to create gif & took the entire website area to get captured as gif.
+ After that, I have uploaded that to my username github profile so that it would get a link and you can simply putup the link
into **README** ,Push it your repo.
+ You can edit out the background's as well as particle's color as per your choice.(You will get it inside particle.js file what kind of shape,size and color of a particle you want. )
+ **Bonus tip**: You can increase or decrease the density of particles
**(Read doc.)**

---
That's all folks so easy... right ?
**Dont forget** to give **star** on my repo.
Give this post a like and thanks for reading :)
Make Elements Mobile Friendly 
Tags: recycling, help, mobiledevice
Published: 2020-07-14 20:52:55

I was seeking some help with adjusting the code to get it to look right at all pixel widths. It's going to be a public facing app that will presumably be accessed for the most part by mobile device. It looks fine at 1K pixel width, but not good at anything less. 
{% codepen https://codepen.io/underjollyroger/pen/XWXPgqm %}
Responsive CSS Width 
Tags: css, beginners
Published: 2020-07-14 20:44:06

Have you been writing CSS and you had to use media queries just so your website could look good across all devices? Well, the good news is, you don't always need media queries.
This series would be focused on various CSS tricks you could use to make your site responsive without using so much media queries.

In this article, we would be looking at how you can make the width of a particular element resize automatically without having to write several media queries.

Here's how you can go about it:
```css
.container {
  width: 1200px;
  max-width: 100%;
}
```
Basically, we're saying the `container` element should have a width of `1200px` but at no point should it exceed the maximum width of the parent which is 100%. So if the parent has a width greater than `1200px`, the element would grow to `1200px`, but if the parent is less than `1200px`, the element would only take up `100%`.

Let's use this knowledge to create a container class that will house the content of our application.
```css
.container {
  width: 1200px;
  max-width: calc(100% - 20px);
  margin: 0 auto;
  padding: 0 10px;
}
```
In this case, we added a margin of `0 auto` which would center the element horizontally on the page, and also a padding of `0 10px` which would add spacing within the element on the left and right side. You might have noticed the change in our `max-width` property. We're doing this to account for the padding we added to the element. The `calc(100% - 20px)` is telling CSS to subtract 20px from the 100% and setting it as the `max-width`. Without this property, the total width of the element when the parent is less than `1200px` would become 100% + 10px padding on the left + 10px padding on the right.

With this, we have a container that looks good on small devices and does not exceed a `1200px` no matter how large the screen size which is good.

Here's a codepen link showing how it would in code.
{% codepen https://codepen.io/abdulqudus001/pen/BajPJXL %}
Hello Dev! Introducing myself to the community
Tags: watercooler, career, showdev
Published: 2020-07-14 20:38:45

I recently found out through an article that you can create a special repo on Github that can display a Readme on your profile. It's a pretty neat feature, and I'd recommend reading this if you're interested in learning how to do it! 

{% link https://dev.to/jayehernandez/3-ways-to-spice-up-your-github-profile-readme-1276 %}

Anyways, I wanted to share what I wrote and introduce myself a little bit to the community and my followers. I've been posting on here since late 2019, and one of my goals is to write 50 posts by the end of the year. Here's a little bit about who I am, what I'm working on, and some other tidbits:

I am a fullstack developer working at a [creative agency](https://www.hdmz.com/) using the LAMP stack, building websites and applications for companies in the medical and biotech fields. On personal projects, I lean towards a [JAMstack](https://jamstack.org/) with Node and Vue/Nuxt/Vuex, relying on API integrations and static site generators.

## 🔭 I’m currently working on:

- Internal projects at work built on [Pimcore](https://pimcore.com/en)
- Building up my online presence through [blogging](https://dev.to/) and [Twitter](https://twitter.com/legendofluis)
- A few personal projects, like a small social network for family members, an interactive site for hiking trails, and an NPM package

## 🌱 I’m currently learning:

- React - After so many years of using Vue, I figured it would be also good to see what it's like developing with a different framework. It'll also give me a chance to understand JSX and CSS-in-JS.
- TypeScript - Currently finding ways to introduce it into my applications.

## 👯 I’m looking to collaborate on:

- Open source projects built with JS, especially ones that use React or TypeScript
- Resolving issues with CSS layouts and responsiveness, Nuxt/Vue, or other JS bugs

## 🤔 I’m looking for help with:

Finding ways to meet and connect with other developers, especially during the limbo of quarantines and lockdowns. I have always been recommended to find a mentor, and would love to hear from other people's experiences in those types of programs.

## 💬 Ask me about:

- Ways you can improve your lighthouse scores
- How to get the most out of CSS Grid and Flexbox Layouts
- How you can preserve the planet and reduce your carbon footprint.

## 📫 How to reach me:

You can contact me at my [email address](mailto:hello@luis.codes) or at one of the other places I hang out at, such as on Dev, my [Twitter](https://twitter.com/legendofluis), and [LinkedIn](https://www.linkedin.com/in/luisbaugusto).

## 😄 Pronouns: 

He/Him/His

## ⚡ Fun facts:

I have a Bachelors in Music Production & Engineering, which helped nourish my interests in creativity and design. I later translated those skillsets into programming and web development, and I have enjoyed building cool things for over 8 years now.

---

You can find more about me on my [personal website](https://luis.codes/), and feel free to comment below if you have any questions, thanks!
How do you make notes?
Tags: discuss
Published: 2020-07-14 20:25:29

---
published: true
title: 'How do you make notes?'
cover_image: 'https://raw.githubusercontent.com/Kvanrooyen/dev.to/master/blog-posts/how-do-you-make-notes/assets/notes-todo.jpg'
description: ''
tags: discussion
series:
canonical_url:
---

I recently wrote a post titled ["Why I use Markdown to take notes"](https://dev.to/kvanrooyen/why-i-use-markdown-to-take-notes-5fpl), the tl;dr is: I started using Markdown for meeting notes, and the benefits for me. Now I come to you with the question, how do you take notes?

Let me give you an example: You are working as normal, and then someone says something important to you. This is something you either need to complete or make note of for the future.
How would you take note of that? For me, I have post-it notes, and I will write the note on them. I then stick it on my desk in front of me. I have also tried using a To-Do application, like [Microsoft To Do](https://todo.microsoft.com/tasks/).
I guess I am trying to find a happy medium between the two :man_shrugging:

# Found a typo?

If you've found a typo, a sentence that could be improved or anything else that should be updated on this blog post, you can access it through a git repository and make a pull request. Instead of posting a comment, please go directly to [github.com/Kvanrooyen/dev.to](https://github.com/Kvanrooyen/dev.to) and open a new pull request with your changes.
The Forem Repo is Live 🌱
Tags: meta, forem
Published: 2020-07-14 20:02:00

Type this liquid tag `{% github forem/forem %}`

...and you get this...

{% github forem/forem %}

The code that powers DEV is now located at [here](https://github.com/forem/forem), in the forem repo within the forem org.

There are no code updates, besides the other updates which happened to go in today, but we're getting that much closer to having all the little things in place to enable the whole ecosystem to start growing.

Here was the Forem announcement post in case you haven't been paying attention to my continued references to Forem in the past few weeks... 😄

{% link https://dev.to/devteam/for-empowering-community-2k6h %}

Follow [@forem](https://twitter.com/forem) on Twitter if you haven't yet.

Happy community building ❤️
What speakers do you use?
Published: 2020-07-14 19:54:39

---
title: What speakers do you use?
published: true
description: webdev, discuss
tags: 
//cover_image: https://direct_url_to_image.jpg
---
For those who love to listen to music while coding or even create your own music in free time, what speakers do you use? 

I've heard a good feedback on [KRK Rokit series](https://www.amazon.com/KRK-RP5G3-Powered-Studio-Monitor/dp/B00EO7UNXO) and [Mackie series](https://www.amazon.com/Mackie-Studio-Monitor-3-inch-CR3/dp/B00KVEIY4E/ref=sr_1_13?dchild=1&keywords=krk+rokit+5&pd_rd_r=d85db07d-a2c5-4529-b232-70b6df6d1c6d&pd_rd_w=hsohj&pd_rd_wg=4Bamp&pf_rd_p=0ec05f25-9534-48fe-9c3e-40b89957230e&pf_rd_r=FDY3A29PFMC0RDZ582TW&qid=1594756217&sr=8-13).
Windows System Programming: Copying Files / Directory
Tags: windows, cpp, systemprogramming
Published: 2020-07-14 19:51:36

Howdy readers, hope you are doing good. So previously you have learn about what system programming is and how to create a directory. 

Now in this post, you will learn about copying files or folders from one path to another. 

So for copying files whose names are in ANSI string, you should use `CopyFileA`. You can find the declaration of this function in [`WinBase.h`](https://docs.microsoft.com/en-us/windows/win32/api/winbase/)

The function definition would look like this
```c++
BOOL CopyFileA(
  LPCSTR lpExistingFileName,
  LPCSTR lpNewFileName,
  BOOL   bFailIfExists
);
```

Function parameters description as follows
+ **lpExistingFileName** &rarr; Pass the path of the existing file / folder (aka source path). If the path doesn't exist, you will get **ERROR_FILE_NOT_FOUND**
+ **lpNewFileName** %rarr; Pass the path of the new file (the location where you want to copy the file and the name of the file, aka destination path)
+ **bFailIfExists** &rarr; If this is `TRUE` and file lpNewFileName already exists, it will return **ERROR_ALREADY_EXISTS**. Otherwise, it will overwrite the new file. 

So suppose, if you want to copy a file from `C:\secret.txt` to `D:\secret-file.txt` and it the file already exists, then it should be overwritten, the function should be called like below

```c++
CopyFileA(
  "C:\\secret.txt",
  "D:\\secret-file.txt",
  FALSE
);
```

The complete code as follows
```c++
#include <Windows.h>
#include <iostream>
#include <WinBase.h>

int main(int argc, char** argv)
{

	if (argc == 1) {
		printf("usage: %s <old filename> <new filename>\n", argv[0]);
		return 1;
	}

	/*
	 * For function documentation
	 * https://docs.microsoft.com/en-us/windows/win32/api/winbase/nf-winbase-copyfilea
	 */
	BOOL flag = CopyFileA(argv[1], argv[2], TRUE);

	if (flag) {
		printf("File Copied\n");
	}
	else {
		switch (GetLastError())
		{
		case ERROR_FILE_NOT_FOUND:
			printf("ERR: File '%s' not found\n", argv[1]);
			break;
		case ERROR_FILE_EXISTS:
			printf("ERR: File '%s' already exists\n", argv[2]);
			break;
		default:
			printf("ERR: %d\n", GetLastError());
			break;
		}
		return 1;
	}
	return 0;
}
```

Hope you have learnt something new today. Follow the links to reach me

+ Email: tbhaxor@gmail.com
+ Twitter: [@tbhaxor](https://twitter.com/tbhaxor)
+ Facebook: [@tbhaxor](https://fb.com/tbhaxor)
+ GitHub: [@tbhaxor](https://github.com/tbhaxor)
+ LinkedIn: [@gurkirat--singh](https://www.linkedin.com/in/gurkirat--singh)
+ Instagram: [@_tbhaxor_](https://instagram.com/_tbhaxor_)
Making MySpace in 2020
Published: 2020-07-14 19:37:06

I recreated MySpace on my GitHub profile thanks to the new GitHub Profile README feature and I am now going to share the quick details on how you can too.

![bdougie readme gif](https://user-images.githubusercontent.com/5713670/87226971-5fc68d00-c34c-11ea-9682-8c4ff1ff533f.gif)


## New Profile README Feature who dis?

GitHub shipped a new feature to all profiles, called a README—a novel I know, but this one is different because you can now update this secret README to render content on your GitHub profile page. 

## Opting into the Profile README

So, all you need to enable this feature is a repository with your name on it. Monica already covers that in her post, so definitely check that out if you are just getting started. 


{% post m0nica/how-to-create-a-github-profile-readme-1paj %}


## Making your Top 8 with Actions. 

Some folks may not know, but GitHub has the concept of followers, and I am following cool cats and kittens myself, but I want a way to highlight developers I think others to follow, exactly how MySpace did back in 2006. 

Thanks to GitHub Actions, I can automate adding and removing developers from my Top 8. Managing a markdown table with images is fine when you first get started, but in my previous experiences, it can be a nightmare to take contributions from a table. 

### developers.yml
I opted to use a [Ruby script](https://github.com/bdougie/bdougie/blob/master/create-readme.rb#L50-L56) and a [GitHub Action workflows](https://github.com/bdougie/bdougie/tree/master/.github/workflows) to re-build the README every time a user is added via the GitHub Issue template. The template was necessary because YAML is everyone's first point of failure. In the future, I plan to update it only when developers.yml is changed, but only after I find a proper YAML validation tool for Actions Workflows--open to suggestions on YAML validation. 

I came to a perfect solution originally in the [awesome-black-developers](https://github.com/bdougie/awesome-black-developers) repository, and I want to give major props to [Damon for improving on my original idea](https://github.com/bdougie/awesome-black-developers/pull/12).

{% github bdougie/awesome-black-developers no-readme %}

Thanks for reading. I look forward to seeing what you create with these features. Feel free to add me to your Top 8 friends.
Easy SCSS color-function 
Tags: sass, scss, css
Published: 2020-07-14 19:17:45

I decided to share with you a function that makes my life easier. Function organizes convenient work with colors on the page, uses css-variables.
```scss
// Creating a map with our colors:
$colors: (
  primary:#f37021,
  secondary:#b4341d,  
);

// Declaring colors as global variables of page
:root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};
  }
}

/* Creating a function that returns our color, 
in accordance with the syntax of css-variables */
@function color($color-name) {
  @return var(--color-#{$color-name});
}

// Usage
body{
  color: color(primary);
  background-color: color(secondary);
}
```
At the output we get the result:
```css
:root {
  --color-primary: #f37021;
  --color-primary-dark: #CE5A14;
}

body {
  color: var(--color-primary);
  background-color: var(--color-secondary);
}
```
The Legend of Data - Ep.7 - Data Visualization 4
Tags: python, datascience, tutorial, beginners
Published: 2020-07-14 19:05:19

---
title: The Legend of Data - Ep.7 - Data Visualization 4
published: true
description: In this last episode of a series of data visualization tutorial, we talked about using Boken, an interactive plotting library to generate some interactive plots with our pokemon dataset. We also tried making a widget which will take a user's input to control the look of our plot.
tags: python, datascience, tutorial, beginner
---
In this last episode of a series of data visualization tutorial, we talked about using Boken, an interactive plotting library to generate some interactive plots with our pokemon dataset. We also tried making a widget which will take a user's input to control the look of our plot.

If you have any questions or any suggestions about which Python or Data Science topics to cover, please leave your comment at my [Twitch channel](https://www.twitch.tv/cheukting_ho)

You can get the slide deck [here](https://slides.com/cheukting_ho/legend-data-pandas1/). The notebook that I used can be found [here](https://github.com/Cheukting/legend_data).
The habits I am trying to build to be a better engineer
Tags: career, leadership
Published: 2020-07-14 19:04:10

I know this is a never-ending journey. I know that I cannot be complacent. This industry is changing so fast that you have to be both a sprinter and an ultramarathon runner. 

So what do I do to stay in shape?

Here are a few of the daily quests I do to make sure that I am on top of my game.

1. Read some of the top stories from your favorite news outlet (dev, twitter, favorite blogger, etc.)
1. Build a personal project and dedicate some time every day to it (I try to do 2 hours minimum).
1. Read the docs. I probably spend more time googling and reading than I do coding. This makes sense for people early in their careers, there is so much to learn. I am constantly checking Reactjs.org and [ecma262](https://github.com/tc39/ecma262) for new things on the horizon.
1. Step away, drink water, go for a walk.
1. Do some competitive programming (not a daily for me). I try and do a few problems a week from leetcode. I spend no more than 3 hours per week solving 1 of each: easy, medium, hard.
1. Open source contributing. I try and commit to something related to OSS, contributions via PRs or docs, do something that will improve OSS.
1. Blog. I have had a hard time with this one since it takes some time to craft a blog and think about what you want to say. I have become more consistent now that I have found a platform that I enjoy blogging on, and the dev community is great! So whether I release a blog post daily or I write something for the future I try to do this every day. It helps me think introspectively.

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

I try to keep my daily quests in a to-do list so I can keep track of what I have done for the day. This helps me stay focused on what I need to accomplish.

# What do you do to make yourself a better engineer?
Learning to program well instead of just learning new skills
Tags: discuss, help, javascript
Published: 2020-07-14 19:03:24

---
title: Learning to program well instead of just learning new skills
published: true
description: 
tags: discuss,help,javascript,
//cover_image: https://direct_url_to_image.jpg
---

I see a lot of posts around here that tell you to level up your frontend dev career by learning webpack or something. I'd like to level up my frontend dev career by figuring out how to determine the most logical and sustainable path to build in a new feature or refactor some code in a complex app the first time around. In other words, I'd like to advance my frontend dev career by getting good at writing the code. Are there classes for that that focus on frontend and are about real architecture and not building a react to-do app?