teleren/devto huggingface dataset:
How do you organize your projects?
Tags: watercooler, productivity, beginners
Published: 2020-11-03 02:04:30

---
title: How do you organize your projects?
published: true
description: 
tags: watercooler, productivity, beginners
cover_image: https://thelenslounge.com/wp-content/uploads/2018/12/best-way-to-file-photos-1080x675.jpg
---
An organized and well-thought-out folder structure is crucial to keep track of your projects and be in full control of their states. 

Currently, I use a simplified version of a [filesystem](https://dev.to/cecilelebleu/how-i-manage-my-projects-folders-and-files-38d3) used by [Cécile Lebleu](https://dev.to/cecilelebleu). Here is a rough sketch of what it looks like:

```javascript
PROJECTS
| - FINISHED
|   | - Finished Project 1
|   | - Finished Project 2
| - SANDBOX
|   | - Test Project 1
|   | - Test Project 2
| - Active Project 1
| - Active Project 2
```

1. First there are my 'Active projects'. I try to keep them around 5-10, so it's easier to get track of them. Those are all the projects I have a clear vision about what to build and why I need to finish them.

2. When an 'Active project' gets finished, I move it into the 'Finished' folder, so my root is clearer. I might sort them even more across 'Years' subfolders in the future, once I start to lose control.

3. Finally, there is the 'Sandbox' folder. This is my testing folder, an idea bank. I usually start my ideas there and move them outside if I see a future for them, so they become my 'Active projects'. I do regular cleanups there, by removing the ideas with lesser potential.

I would love to see your approaches on how you organize the projects.
My experiences in Hacktoberfest as a Newbie
Tags: hacktoberfest
Published: 2020-11-03 01:55:46

✨This is my first hacktoberfest! ✨ 


### Hello 👋 Hacktoberfest2020

Hello, I'm meharab. i am a undergraduate cse student. i am preparing myself to become a web developer  

### Background

i am brand new to open source. i code for a while but never give thought 💭 collaboration with other developers that i do not know! if it isn't for hactoberfest i might not be able to collaborate with other developers! 

### Progress

i did my first pull requests in github in the hacktoberfest2020! also learn tons of thing about github and open source! 

### Contributions

As a newbie i was confused! because in experience i know only c & c++! then it hit me , i can share my problem solutions that i have solve during contests! here are my contributions https://github.com/Meharab 


### Reflections
Overall, my Hacktoberfest 2020 experience was total blast ! as a first-timer, i have so much fun and willing to participate again next year. i have learned tons of things about github and open source. can't wait for next year!!!
Make changes to node_modules files with patch-package
Tags: productivity, reactnative, npm, javascript
Published: 2020-11-03 01:40:31

Original Source: https://www.roshan.info.np/posts/patch-package-nodemodules

If you have been working with Javascript, I am sure you have been in a situation where you found a perfect npm library for a feature but you have to make some changes there because of any compatibility issues or bugs.

**What will you do ?** 

I know what. One of these, right ?

* Fork the repository, make changes, send PR and wait for the PR to be merged
* Fork the repository, make changes, install from git or even publish your own npm module and use it.

This would normally be okay for smaller projects/libraries where PRs gets merged quickly or you don't care about publishing yet another *unmaintained* library.

You can use a npm package called [patch-package](https://www.npmjs.com/package/patch-package) that actually allows you to make changes to node_modules files directly, and yeah you don't have to worry about the changes being deleted with a fresh yarn installation. Sounds cool, huh?

Recently, I came across the exact problem. I had to make a minor change within the react-native folder inside node_modules to fix an issue. The issue was fixed in the new version of react-native but I dare not upgrade my react-native project because you know it's still a pain in ass to upgrade a react-native project. This is how I used [patch-package](https://www.npmjs.com/package/patch-package) to fix the issue and stay happy.

Let's talk about the issue before moving forward. The problem is with the image not showing up in the iOS app when building with XCode 12. (This is for the people who are here to solve this particular problem.)

First and foremost, you install the package.

`yarn install patch-package`

Now it's time to make changes to our react native code or, in other words  **patch the reactive native code**

1. Open the file `node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m`

   
2. Edit the source code as follow:

   From:

   ```
   #pragma mark - CALayerDelegate

   - (void)displayLayer:(CALayer *)layer
   {
     if (_currentFrame) {
       layer.contentsScale = self.animatedImageScale;
       layer.contents = (__bridge id)_currentFrame.CGImage;
     }
   }
   ```

   To:

   ```
   #pragma mark - CALayerDelegate

   - (void)displayLayer:(CALayer *)layer
   {
     if (_currentFrame) {
       layer.contentsScale = self.animatedImageScale;
       layer.contents = (__bridge id)_currentFrame.CGImage;
     } else {
       [super displayLayer:layer];
     }
   }
   ```
3. Now Make **Patch**

   `npx patch-package react-native --use-yarn`
4. Track the **patch files** in git

   `git add patches/*`
5. Add package script for applying patches

   ```
   "scripts": {
     ...
     "postinstall": "patch-package",
   }
   ```

   **DONE! YES DONE!**

   From now onwards, whenever you install new packages, it will patch from all your patch files. Voila!\
   
   Note: I used `react-native` library as an example here but you can apply this technique to any other libraries.\
   
   Thanks for reading! See you in my next blog.
First week of November plans
Tags: productivity, webdev, welcome, discuss
Published: 2020-11-03 01:31:47

### What I'm working on
- I've enjoyed the idea of cloning things as projects to put on your portfolio. Some advantages of cloning an existing site are you don't have to think about the UI too much, you have ideas of what functionality to include, and there might be other clone projects you can reference. With that being said, I've been working on a medium clone, something like [Conduit](https://github.com/gothinkster/realworld).
- For this project, I'm planning to use the MERN stack with redux and typescript.
- I've already built out a lot of the auth for the web app, so I'm excited to build the core functionality for the medium clone. I'll be updating my progress through blog posts.

### Experience job hunting
My experience with the job hunt hasn't been the best, but I'm determined to find out what my problem is. My current issue right now has been that I haven't been getting many interviews. I think this could be because of my portfolio, it might not be strong enough. I'm hoping that using typescript to build the medium clone will put me on some people's radar.

Thank You for reading! Let me know what you're working on, what worked and what didn't work for you during the job hunt, or your experience learning/using typescript.
Day 2 of 100 Days of Code
Tags: 100daysofcode, html, css, braziliandevs
Published: 2020-11-03 01:19:08

# Hello amazing guys :)

On this second day I learned to read and manipulate different types of files in Python using lib Pandas, this is 100DaysofCode's [repo] [repo], enjoy! :)


### Connect with me:

[<img alt="ricardo.digital" width="22px" src="https://img.icons8.com/ios/452/internet.png" />][website]
[<img alt="ricardocas | LinkedIn" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/linkedin.svg" />][linkedin]
[<img alt="clickdoricardo | Instagram" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/instagram.svg" />][instagram]


[repo]: https://github.com/ricardo-cas/pandas
[website]: http://www.ricardo.digital/
[twitter]: https://twitter.com/rcosta_digital
[instagram]: https://www.instagram.com/clickdoricardo/
[linkedin]: https://www.linkedin.com/in/ricardocas/
Github Action - Repository Roster | Shout-out Supporters In Your README.md
Tags: github, webdev, showdev
Published: 2020-11-03 01:04:42

As developers, we put a lot of work into our GitHub repos to make them as useful as possible for others, but great projects sometimes go under-appreciated, and under-starred. Asking for stars is tacky, but publicly thanking your supporters by name in your **README** file is a sign of appreciation that happens to incentivize more users to join the crowd.

## 💡 Inspiration
One fine day i got an email [DEV Digest](https://s2.do-spaces.com/2020/Nov/03/1604373796-15.jpg) in which i got attracted by the title [**1 Step to Incentivize Stars and Forks on GitHub**](https://dev.to/nastyox1/1-step-to-incentivize-stars-and-forks-on-github-2md3) and decided to read the full article. it was new & interesting to me.Thanks to @ [nastyox1](https://dev.to/nastyox1) creating such awesome tool. so i wanted to use it but i wanted it to be a `markdown-table` output which was not an option with that cloud hosted service. so i decided to create this as an action which can provide various outputs.

check out the [examples output](https://github.com/varunsridharan/action-repository-roster/tree/main/examples)

---

## 🚀  Usage
1. Update Your `README.md` with below code
2. Setup Action Workflow File

***Repository Stargazers***
```markdown
    ## ↳ Stargazers
    <!-- REPOSITORY_STARS:START --> <!-- REPOSITORY_STARS:END -->
```

***Repository Forks***
```markdown
    ## ↳ Forkers
    <!-- REPOSITORY_FORKS:START --><!-- REPOSITORY_FORKS:END -->
```
> :information_source:  Currently there are ways to auto trigger the workflow when a users **stars** / **forks** the repository.
>
> :information_source:  Using this action with the workflow trigger [fork](https://docs.github.com/en/free-pro-team@latest/actions/reference/events-that-trigger-workflows#fork) & [watch](https://docs.github.com/en/free-pro-team@latest/actions/reference/events-that-trigger-workflows#watch) is the best optmized way.
>
> if you want to remove users that have un-stared / deleted the fork then you might have to use [cron](https://docs.github.com/en/free-pro-team@latest/actions/reference/events-that-trigger-workflows#schedule) to handle it

## Example Workflowfile

```yml
name: "🙏 Repository Roster"

on:
  workflow_dispatch:
  watch:
    types:
      - started
  fork:

jobs:
  update_latest_roster:
    name: "🐔  Update Latest Roster"
    runs-on: ubuntu-latest
    steps:
      - name: "📥  Fetching Repository Contents"
        uses: actions/checkout@main

      - name: "🐔  Markdown - Repository Roster"
        uses: "varunsridharan/action-repository-roster@main"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

```

For Details information about the available config options. please check our github repository 

{% github varunsridharan/action-repository-roster %}
Когда использовать double, а не instance_double?
Tags: ruby, rspec, testing
Published: 2021-01-19 11:08:12

---
title: Когда использовать double, а не instance_double?
published: true
date: 2020-11-03 00:00:00 UTC
tags: ruby, rspec, testing
canonical_url: https://vasily.polovnyov.ru/posts/to-double-or-not-to-double.html
---

Напомню разницу: `instance_double` может уронить тест, если застабленные методы отсутствуют в указанном классе, `double` на все пофиг.

По моему опыту `double` нужен в двух случаях:  
1. Вместо объекта, который пока не существует в системе. Нет класса, значит, `instance_double` не на что опереться.

2. Вместо чего-то незначительного со стабильным АПИ. Например, для писем:

```ruby
allow(DeadlineMailer)
  .to receive(:last_deadline_warning)
  .and_return(double(:email, deliver_later: true))
```
How to search for a string inside a string in JavaScript?
Tags: javascript
Published: 2020-11-03 00:00:00

---
  title: How to search for a string inside a string in JavaScript?
  published: true
  tags: JavaScript
  date: Tue Nov 03 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/search-for-string-inside-string-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-7ef78ac17d50a193e587c7f177cad07d.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/search-for-string-inside-string-javascript)
  
To search for a string inside another string, you can use the `includes()` method on the string in JavaScript.

Let's say you have a string called `Hello 😃, How are you?`

```js
// a string
const str = "Hello 😃, How are you?";
```

And now let's check whether the above string contains the word `How`. So let's use the `includes()` method on the `str` to check that.

```js
// a string
const str = "Hello 😃, How are you?";

// check if How is present in str
const isPresent = str.includes("How");

console.log(isPresent); // true
```

The `includes()` method accepts:

- a string to search for as the first argument
- an optional position of type `number` to start searching from that position
- the method returns boolean `true` is the string present and `false` if not.

See this example live in [JSBin](https://jsbin.com/vuruqobami/1/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Check whether object is empty in JavaScript
Tags: javascript, beginners, webdev, showdev
Published: 2020-11-13 07:38:39

---
title: Check whether object is empty in JavaScript
published: true
date: 2020-11-03 00:00:00 UTC
tags: javascript, beginners, webdev, showdev
canonical_url: https://jsmates.com/blog/check-whether-object-is-empty-using-object-keys
---


JS objects have a method to get all the keys in the object.

```js
const author = {
  firstName: 'Param',
  lastName: 'Harrison'
};

console.log(Object.keys(author)); // Output - ["firstName", "lastName"]
```

To check whether the object is empty or not, you can check the number of keys.

```js
if (Object.keys(author).length === 0) {
  console.log('Author object is empty');
} else {
  console.log('Author object is not empty');
}
```

Since we have the keys, it will show `Author object is not empty` in the console output.

Now, remove the keys in the object and check,

```js
const author = {};

console.log(Object.keys(author)); // Output - []
```

It will display `Author object is empty` in the console.

{% codesandbox object-keys-es6-dhwnk %}

> JS Mates launched our REST API Design using Node Js course for free, check it out [here](https://jsmates.com/courses/rest-api-design-using-javascript/setting-up-api). It is an interactive text course.
> Follow us for more free courses on JavaScript ecosystem on [Twitter](https://twitter.com/jsmates). Subscribe to our weekly newsletter for more goodies [here](https://jsmates.com/newsletter).
4/100 days of code
Tags: gatsby, api
Published: 2020-11-02 23:29:58

---
title: 4/100 days of code
published: true
description: hitting the dev.to API to get my articles
tags: Gatsby, api
cover_image: https://res.cloudinary.com/studiobanauso/image/upload/v1604441167/100daysofcode/100days_04.jpg
---
Today was a short one and I need to revise the rules. Was it that I need to spend an hour on the code for it to qualify for the challenge? Well, that might get rough. 

Here’s to a little rule breaking in advance, because after a work day, preparing dinner and spending time with my partner, it’s late and I might not have an hour. Anyhow, I’ll do my best. 

Today I managed to get the pics from my new (to me) digital Camera onto my computer to take a peek and see that yes, ¾ of them are as bad as I expected. But there are some pictures that will do just fine as article pics and such and of course I will keep doing more. 

One goal of mine is to use only my own pictures in this project. 

So after downloading darktable and realizing that editing the pictures will be a major time sink, I set up the pieces to make Gatsby fetch my articles from dev.to, which will function as my note pad for now.
I see so many ads about UX/UI masters and jobs that I don't know if the necessity is real anymore.
Published: 2020-11-02 23:29:50

Basically, since I am looking for a UX/UI course, more like a master, not just and online course. I can't stop seeing like "UX THE **FUTURE** JOB" etc. 

I just wanted to turn my developer career into design and be more like... a product designer/developer???? idk. I've started to get a strange feeling about everything in relation with this private schools'coursers and bootcamps, it is almost overwhelming and kind of 'fake'.

Have you ever had this feeling?
If so, how do you avoid to see that many information about an specific topic?

Thanks for reading!
VivumLab: deploy your server, then get back to life.
Tags: homelab, server, contributorswanted
Published: 2020-11-02 23:21:16

​Hello Dev.to,

we created a fork of https://www.reddit.com/r/HomelabOS, which is actively maintained by two prior HomelabOS collaborators, it's called Vivumlab .
Check us out, tell us what you think, what we can improve or change.
We are working on stabilising everything and then improving the base with your help.

Reddit: https://www.reddit.com/r/VivumLab/
GitHub: https://github.com/VivumLab/VivumLab
Zulip: https://vivumlab.zulipchat.com/
Docs: https://docs.vivumlab.com
Discover Governance Framework
Tags: kubernetes
Published: 2020-11-02 23:14:33

Background

The availability of elastic cloud computing, scalable cloud storage, and Infrastructure as a Service (IaaS) from a variety of cloud providers, present unique opportunities for many companies looking to be competitive in a new age where software is conquering the world. However, the 24/7 nature of modern software systems which are expected to be highly-available, responsive, and infinitely scalable, present unique challenges to traditional development and operations teams.
With regard to these opportunities and challenges, companies tend to operate in one of two modes: innovation mode or firefighting mode. Innovation mode is when the development and operations teams are focused on creating new solutions and moving fast from ideation, to production, and generating business value. Firefighting mode is when the development and operations teams are not in sync (occasionally even hostile toward each other), projects are delayed due to constant interruptions of engineering teams, and a continuous stream of production issues and instabilities resulting in unsatisfied customers.

What Is Governance?

Governance refers to the ability of the operations team to verify and enforce certain policies and standards across the entire organization or within specific clusters. By reducing variations in the infrastructure you reduce your maintenance cost and attack surface. Also, having standardization enables automation of common tasks and improves efficiency at an organizational level. The policies and standards you want to enforce come from your organization’s established guidelines or agreed-upon conventions, and best practices within the industry. It could also be derived from tribal knowledge that has accumulated over the years within your operations and development teams.
Why Is Governance Important?

As a business, you want to focus on innovation that differentiates your business and generates value for your customers, rather than churning time and resources on maintaining your infrastructure. Basically, you want to be in innovation mode rather than firefighting mode. In a cloud-native ecosystem, decisions are decentralized and are tackled at a rapid pace. Having a governance framework will allow your company to move fast but at the same time minimize risk, control costs, and drive efficiency, transparency, and accountability across the organization.
Governance Framework

There are three key dimensions that need to be defined in order to establish a governance framework for your organization:

Targets: the clusters, workloads, or entities where you want to apply governance

Policies: the rules or standards you want to validate against your specified targets

Triggers: the catalyst - when the policy should be checked (e.g., after git push, before Kubernetes deployment, every 24 hours, every time after an object spec changes in the cluster, etc.)

To read more: https://www.magalix.com/blog/kubernetes-governance-101?utm_campaign=Week%2045&utm_source=Forum&utm_medium=Dev.to&utm_term=Discover%20Governance%20Framework&utm_content=Day%202
Performant JSS
Tags: jss, css, frontend, react
Published: 2020-11-02 23:11:12

At work, I mainly use [Material-UI](https://material-ui.com/). It's a really useful library that offers great defaults, great theming, and a decent, though rather complicated, styling system.

I've come to see that the most performant way to style with JSS is to do it _less_. Huh?

## Selectors are your friend

I've realized I started to think in "components" whenever I use JSS. It's probably because it's really a react-only thing.

However, when I start to think in CSS, it suddenly makes JSS much simpler.

Intuitively we use JSS in a manner similar to this:

```tsx
const styles = createStyles({
  table: {
    padding: "1rem",
  },
  tableHead: {
    fontWeight: "bold",
  },
  tableHeadCell: {
    fontSize: "0.75rem",
  },
  tableRow: {
    padding: "0.5rem",
  },
  tableRowCell: {
    fontSize: "0.5rem",
  },
});

let useStyles = makeStyles(styles);

function TableComponent(props) {
  let { items, columns } = props;
  let classes = useStyles();
  return (
    <table className={classes.table}>
      <thead className={classes.tableHead}>
        {columns.map((column) => (
          <th className={classes.tableHeadCell}>{column}</th>
        ))}
      </thead>
      <tbody>
        {items.map((row) => (
          <tr className={classes.tableRow}>
            {row.map((cell) => (
              <td className={classes.tableRowCell}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}
```

> I'm using good ol' fashion JSS here, but you can imagine the same principle with styled-components/emotion

Seems familiar right? Each style is it's own "component".

However, you can make this more performant by applying the styling once rather than to every item within the table by using one simple trick - **selectors**:

```tsx
const styles = createStyles({
  table: {
    padding: "1rem",
    "& thead": {
      fontWeight: "bold",
      "& th": {
        fontSize: "0.75rem",
      },
    },
    "& tbody": {
      "& tr": {
        padding: "0.5rem",
        "& td": {
          fontSize: "0.5rem",
        },
      },
    },
  },
});

let useStyles = makeStyles(styles);

function TableComponent(props) {
  let { items, columns } = props;
  let classes = useStyles();
  return (
    <table className={classes.table}>
      <thead>
        {columns.map((column) => (
          <th>{column}</th>
        ))}
      </thead>
      <tbody>
        {items.map((row) => (
          <tr>
            {row.map((cell) => (
              <td>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}
```

Selectors are your friend.