teleren/devto huggingface dataset:
Don't name objects for what they are used for but for what they represent
Tags: cleancode, codequality
Published: 2020-12-14 08:30:28

---
title: Don't name objects for what they are used for but for what they represent
published: true
description: make sure to name things after what they are
tags: cleancode, codequality
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yddqir8bc2illq6esxgj.jpg
---

When reviewing, I often come across code with a, let's say 'dubious' naming. 

When looking at the places where this code is integrated in, it becomes clear that the programmer had a concrete necessity and created a tool for it.

Say, at one point we need to keep track how many foos the user entered for a given bar:
Well, I need to count the foos in a bar so I'll just create a `FooCounter`, it'll have an `addBars()` method and, of course, a `countFoos()` method.
Oh, and I only need to count foos of certain bars, so I'll need a `hasBarBlurb()` method to check if a certain bar is available.

Ready. It all works. Great job done.

Except, you really didn't create a `FooCounter`. It's more of a `BarCollection`, isn't it?

I specifically noticed it when I saw the `countCurrentFoo(): FooCounter` method. Why would a `count()` method return anything else than an `int`?

Just rename `FooCounter` to `BarCollection`. The methods now make more sense (`FooCounter::countFoos()`, a counter that counts? `BarCollection::countFoos()`, yeah, count things in a collection, I've seen that!)

###Naming is hard. 
It's totally fine starting to name things for what they are used for. Maybe you still have no clear idea where things are going with this new Object, so you gotta start somewhere.

But later on, you should make sure things sound semantically correct and start renaming objects and methods.
Be as close to spoken language as possible.
Creating responsive emails using MJML and AdonisJS
Tags: adonisjs, node
Published: 2020-12-14 08:27:48

I have been using [MJML](https://mjml.io/) for a while to design the email templates for my projects.

In the following video I share my process of using it along side [AdonisJS](https://preview.adonisjs.com).

{% youtube zehb-qUzRCM %}
React: you remove the PROPS!
Tags: react, store, javascript, pattern
Published: 2020-12-14 08:26:15

In my experience the big problem I had by switching to REACT
is that it does not propose a global pattern to manage the business logic.

I have reviewed code where data and callbacks
have passed to an infinite series of components.
Any modification was a pain, especially to move a component out of its hierarchy.

[REDUX](https://redux.js.org/) is very interesting but too verbose for my style.  
REACT provides "native" tools: 
[PROVIDER](https://it.reactjs.org/docs/context.htm) and [REDUCER](https://it.reactjs.org/docs/hooks-reference.html#usereducer)  
but, in my opinion, they are too basic to use them directly.

So I wrote a "utility" (NOT a "library") served in several projects
very very light.

[https://github.com/priolo/jon]

Basic example:

### Create STORE
`my_app/myStore.js`
```jsx
export default {
	state: {
		value: "init value",
	},
	getters: {
		getUppercase: (state) => state.value.toUpperCase(),
	},
	actions: {
		fetch: async (state, payload, store) => {
			//const {response} = await ajax.get(`my_server`)
			//store.setValue(response)
		}
	},
	mutators: {
		setValue: (state, value) => ({ value }),
	},
}
```

### Create PROVIDER
`my_app/index.js`
```js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { MultiStoreProvider } from '@priolo/iistore';
import myStore from "./myStore"


const rootElement = document.getElementById("root");
ReactDOM.render(
  <MultiStoreProvider setups={{ myStore }}>
    <App />
  </MultiStoreProvider>,
  rootElement
);
```

### Use STORE
`my_app/App.js`
```jsx
import { useStore } from "@priolo/iistore";
import React from "react";

export default function App() {

  const { state, setValue, getUppercase } = useStore("myStore")

  return (<div>
      <h1>{state.value}</h1><h2>{getUppercase()}</h2>
      <input onChange={(e)=>setValue(e.target.value)} />
  </div>);
}
```

[online](https://codesandbox.io/s/example-1-5d2tt)

Hope it's useful, I'm a huge fan of VUEX which I got my inspiration from
Bye!

---

**Pssss...**

However if (like me) you hate using too many external libraries
because you don't really know what they do
Check out this article:
[REACT and STORE with HOOKS]()
It is "almost" the same thing directly with "Providers" and "useReducer"
Developing for Developers – Path to Fame, Money, and Happiness
Tags: cloud
Published: 2020-12-14 08:15:34

I recently spoke at the DigitalOcean [deploy](https://www.digitalocean.com/community/tags/deploy-2020) conference on the topic of building developer focused businesses.

Here is a recording of the video:
{% youtube nDLp-KLCyNw %}

Here is the slide deck:
{% speakerdeck 9cab55f6db564ddba64e2b6e8d78354f %}

My main arguments were as follows:
* More people are learning development skills than ever before
* Multiple Developer platforms are enabling millions of apps every year. These apps need new services and capabilities.
* There is room to serve underserved audience and simplify targeted “tasks” for all these apps because big players are busy solving problems for enterprise IT.
* Developer focused businesses are finding a new wind
* As developers we solve developer problems on a daily basis. Every problem we face ourselves is likely being faced by hundreds of other developers.

Hopefully this inspires more people to build things that not only help other developers but help themselves start new businesses.
3 Important Factors To Simplify Your Content Marketing
Published: 2020-12-14 08:07:43

[Content Marketing](https://propelguru.com/content-marketing/) is one of the most important exercises. In fact you need to produce something that will generate traffic and conversion. Of course, you have to write about a topic that interests you. Otherwise, the lack of enthusiasm will come out loud and clear. However, you also need to make sure that the topic is relevant to your ideal audience.

**1.Buyer Person**

However, many questions about cookie cutter personality are boring and unhelpful. If you are not inspired by the regular models asking you to fill in age, race, income, and marital status, try this, tell a story about the character to describe your situation in relation to how your product or the service is relevant if you have different offers, tell a story for each one.

**2.Customer journey**

Your customers or clients will go through a "life cycle" with stages ranging from the first meeting with you to the decision to buy from you. Together, they form the customer journey. To make it more organic, look at it from a storytelling point of view - explore the journey of your ideal client's hero and how you can transform it every step of the way.

**3.Content mapping**

Once you've clarified your buyer persona and customer journey, you can create a grid and fill in the blanks. You map the different stages each person goes through and have the structure to generate content ideas that address a particular stage for a specific person.

It may take a bit of public research or a little digging into your existing data. Don't stop at perfection, you have to start somewhere and when you start implementing you can always come back to refine your strategy. The content delivery channel can, in turn, inform how it delivers the content.

Through this blog we have discussed 3 important factors to simplify your content marketing, for more information regarding Content Marketing and other Digital Marketing Services You can Visit Propel Guru a [Digital Marketing Company](https://www.propelguru.com/).
Micro Frontend Deep Dive – Top 10 Frameworks To Know About
Tags: microservices, microfrontend, architecture, softwaredevelopment
Published: 2020-12-14 07:52:09

Welcome to  the second part of our Micro Frontend article series.
In this article, we dive deeper into what you need in order to incorporate this technique into your software development environment. We also describe in detail  some of the most prominent Micro Frontend frameworks you can work with. 

Read full article: https://www.cuelogic.com/blog/micro-frontends-frameworks
Conditional Rendering
Tags: react, javascript
Published: 2020-12-14 07:37:13

Conditional rendering sebenarnya sama pada dengan coding pada umumnya menggunakan fungsi if tetapi yang berbeda adalah kita mengkondisikan pada bagian frontend.

``` javascript
function App() {
  const login = true
  return(
   <div>
    {
      login ? (<p>welcome to dashboard</p>) : (<p>please login</p>)
    }
   </div>
  )
}
```
How do I edit multiple text editor input value in a separate object in an array. 
Tags: react, typescript, javascript, graphql
Published: 2020-12-14 07:25:06

I am working on react js and typescript. I am developing an educational app in which admin can add single mcq question and group of mcq questions. I used ckeditor for writing mcq question. when I add mcq question its mutation works fine. but in group question, it is a not working. When I add group question, it is a combination of two mcq question. each mcq question object has its own key value pair. so in an array, there are multiple objects of the mcq question type. Now the problem is that when I write something in one object, its value is assigned in all other object key. suppose I am writing someting in question_text of object1, this value is also assigned in the question_text of object2, object3.... In other words, onchange function is applicable on every object within the array. I am not getting how can I fix it. Please help me out for this.
If any thing left, please let me know. Thank you
State
Tags: react, javascript
Published: 2020-12-14 07:23:17

State (useState)

State digunakan untuk data yang akan berubah secara dinamis

```javascript
import {useState} from "react"

export default function App(){
 const [count, setCount] = useState(0)
 const clickAction = () => {
  setCount(count + 1)
 } 
 return(
  <div>
   <p>clicked {count}</p>
   <button onClick={clickAction}>click me</button>
  </div>
 )
}
```
What can I use to compile C# (CSharp)?
Tags: help, csharp, beginners, watercooler
Published: 2020-12-14 07:23:14

I wanna get in to CSharp since I know it's a bytecode language, like Java, but is (from what I've seen) faster.
So, how would I go about compiling some CSharp (basically what I want is the C# equiv to `javac *.java; jar cfm *.class manifest.txt`)?

<center><div><center>
##<b><h1 color="white"><b>Thanks!<br/>Cheers!</b></h1></b>
</center></div></center>
The Front End: S2-E10 - Hassan El Mghari
Tags: podcast, frontend, career
Published: 2020-12-14 07:18:26

🚨 SEASON FINALÉ 🚨

For this final episode in the season [Hassan El Mghari](https://twitter.com/nutlope) joins us to share his incredible journey from high-school student running multiple gaming communities totalling almost a million users, founding a gaming marketing company, to pursuing a CS degree and learning full stack development. 

Listen to the brand new episode here:

- Apple Podcasts > https://podcasts.apple.com/gb/podcast/the-front-end/id1499349107
- Pocket casts > https://pca.st/osul2zsa
- Spotify > https://open.spotify.com/show/4GuAxptrtY8Es5iHwp09dT
- Anchor > https://anchor.fm/the-front-end

## In this episode

Hassan El Mghari is currently studying for a CS degree at Drexel. However, whilst in high-school he successfully started a games marketing business, UltraShock Gaming. 

Hassan talks lessons learned, how to learn in public and the power of long-game effort.

## Listening direct

Want to listen directly from here?

{% spotify spotify:episode:2X9JNLUlS2LI3LJZIAse9D %}

## Want to be a guest or sponsor the show?

We're always happy to take requests for guests to talk about a range of different development topics from careers to origin stories, learning and professional growth, frameworks and more.

Similarly, we're looking for sponsors to fill promotional slots within the show. 

You can find out more here:

- [Being a guest](https://thefrontendpodcast.site/guests)
- [Sponsorship information](https://thefrontendpodcast.site/sponsorship)

Thanks for listening!
Spark X, pls focus
Tags: socialmedia, coding, hacking, innovation
Published: 2020-12-14 07:14:18

Hello guys, PLEASE FOCUS HERE.
We are working on a project of social media platform that is going to be launched soon. Your contributions and suggestions will be appreciated. We have different ideas and you can give reviews on them.

Firstly,
We have thought of keeping the names of features different from already existing names. Give us attractive names for the following features or tell us if you think the already existing names should be kept.
A. post -
B. dm –
C. mention –
D. tag –
E. story –
F. comment –
G. like –

I will be sharing more ideas and would welcome your contributions, ideas, and suggestions on it and you will be getting credits for it.
If you also have something in your mind and want to bring it to live just comment it.
Will be waiting for you guys.
#socialmedia #socialmedia #marketing #like #comment #project #digitalmarketing #startup #entrepreneurship #entrepreneur #branding #coding #hacking #programming # #linkedin #smallbusiness #content #leadership #Idea #startups #innovation
Datacamp vs Codecademy Pro- Which One is Better in 2021?
Tags: datascience, machinelearning, programming
Published: 2020-12-14 07:07:07

**Datacamp vs Codecademy Pro Which One is Better…?**. Well, this comparison requires lots of aspects. That’s why I am gonna compare both platforms in every aspect. So, give your few minutes and decide which platform is better for you.

Without further ado, let’s get started-

Before moving to the characteristics of Datacamp and Codecademy, let’s have a look at the **key difference between Datacamp and Codecademy Pro.**
**[Click to continue reading...](https://www.mltut.com/datacamp-vs-codecademy-pro/)**
Implementation of Artificial Neural Network in Python- Step by Step Guide
Tags: machinelearning, deeplearning, datascience
Published: 2020-12-14 07:03:47

In this article, I am gonna share the **Implementation of Artificial Neural Network(ANN) in Python**. So give your few minutes and learn about Artificial neural networks and how to implement ANN in Python.

So, without further ado, let’s get started-

Before moving to the Implementation of Artificial Neural Network in Python, I would like to tell you about the **Artificial Neural Network and how it works.**

#**What is an Artificial Neural Network?**

An artificial Neural Network is much similar to the human brain.

The human Brain consist of neurons. These neurons are connected with each other. In the human brain, neuron looks something like this…

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

As you can see in this image, There are **Neuron, Dendrites, and axon.**

**What do you think?**

When you touch the hot surface, how you suddenly remove your hand?. This is the procedure that happens inside you.

When you touch some hot surface. Then automatically your skin sends a signal to the neuron. And then the neuron takes a decision, “Remove your hand”.

So that’s all about the Human Brain. In the same way, Artificial Neural Network works.

Artificial Neural Network has three layers-

1. Input Layer.
2. Hidden Layer.
3. Output Layer.

Let’s see in this image-

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

In this image, all the circles you are seeing are neurons. Artificial Neural Network is fully connected with these **neurons.**

**Data is passed to the input layer. And then the input layer passed this data to the next layer, which is a hidden layer. The hidden layer performs certain operations. And pass the result to the output layer.**

So, this is the basic rough working procedure of an Artificial Neural Network. In these three layers, various computations are performed.

Now Let’s understand each layer in detail.
**[Click to continue reading...](https://www.mltut.com/implementation-of-artificial-neural-network-in-python/#input-layer)**
facemask: A mini social media app for sharing Pandemic experiences 😷📱 1/n
Tags: dohackathon, laravel, vue, webdev
Published: 2020-12-14 06:58:42

---
series: facemask on DigitalOcean App Platform Hackathon
---

### What I'm building
I'll list all features on my last post. Basically, this is a mini socmed app just to share people's experiences during this pandemic. About their struggles to quarantine themselves, how we miss the old normal, and how we can all survive. 

### Category Submission:
**Program for the People** 🙌

#### Just about me
For this year, this is the third DigitalOcean sponsored hackathon that I joined. I hope I can finally pull this off. GLHF everyone!
Advent of code - Day 13
Tags: javascript, typescript, adventofcode
Published: 2020-12-14 06:02:16

Are you participating in the [Advent of code](http://adventofcode.com) this year?

If you don't know what the advent of code is, it's a website where you'll find a daily challenge (every day it gets harder). It's a really fun event, you should participate!

I try to solve the exercises using either JavaScript or TypeScript and will share my solutions daily (with one day delay so no one can cheat!). I only share the solution for the second part.

First tough challenge of the year in my opinion! I really needed to invest some time for the part 2, as the standard brute force was completely impossible. Still, my solution is far from perfect and can be improved. I generate the result in ~ 90 seconds, but it could be instantaneous with a bit more optimisation. But hey, If It Works It Works! 😉

Here is my solution for day #13:
```js
const buses = input
  .split(',')
  .map((x) => parseInt(x, 10))
  .map((x) => (isNaN(x) ? 1 : x))
  .map((busId, index) => {
    const minutes = busId
    return { busId, minutes, index }
  })
  .filter((bus) => bus.busId !== 1)
  .sort((a, b) => b.busId - a.busId)
  .map((bus, _index, array) => ({ ...bus, index: bus.index - array[0].index }))

function acceptableSchedule(buses) {
  const expected = buses[0].minutes
  return buses.every((bus) => {
    return (expected + bus.index) % bus.busId === 0
  })
}

// Find the distance between the two highest id buses
// To limit the number of possibilities you explore
// This could be used several time to go even faster
function findOffset(busA, busB) {
  const found = []
  while (found.length < 2) {
    busA.minutes += busA.busId
    if (acceptableSchedule([busA, busB])) {
      found.push(busA.minutes)
    }
  }
  return { startAt: busA.minutes, offset: found[1] - found[0] }
}

const { startAt, offset } = findOffset({ ...buses[0] }, { ...buses[1] })

buses[0].minutes = startAt

while (!acceptableSchedule(buses)) {
  buses[0].minutes += offset
  if (buses[0].minutes % (buses[0].busId * 10000000) === 0) console.log(buses[0].minutes)
}
console.log(buses)
```

Feel free to share your solution in the comments!

________________________

Photo by [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
Fundamentals Of Programming Quiz - Ultimate Practice Test (76% Discount)
Tags: udemy, fundamentals, programming, quiz
Published: 2020-12-14 06:01:26

Hey Guys, If any One who wanna brush up their basic knowledge of programming. Then this is a best course on udemy.
In this course there is total 240 questions that covers almost all topics from basic programming like ( oops concept, data, operators, functions, flow chart, sdlc, arrays, list, strings and many more).
This course will give confidence. It doesn't matter you are learning, experience.. It will help you in all ways.
Anyone preparing for job interview should definitely go through this.
Link : - https://www.udemy.com/course/programming-fundamentals-ultimate-quiz/?referralCode=C2C46AA371BC6FBC7DB9

Don't Miss the Opportunity
Creating a Stylus Library
Tags: css, node, javascript
Published: 2020-12-14 06:01:38

---
title: Creating a Stylus Library
published: true
date: 2020-12-14 05:59:18 UTC
tags: CSS,Nodejs,JavaScript
canonical_url: https://h.shadowtime2000.com/creating-a-stylus-library
cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Stylus-logo.svg/393px-Stylus-logo.svg.png
---

# Creating a Stylus Library

Hi, in this article I will be showing how to create a [Stylus](https://stylus-lang.com) library.

## Wait what is Stylus?

[Stylus](https://stylus-lang.com) is a CSS preprocessor which has features such as whitespace sensitivity but all that is optional. Kind of like a mixture of SASS and SCSS.

## So how will we do it?

Stylus has a [JavaScript API](https://stylus-lang.com/docs/js.html) which exposes a `.include` function. The `.include` function allows you to add another path which will be searched when importing.

## Let's Do It

We will be using the Plugin API of the JavaScript API so it can become a little more organized.

```js
const stylus = require("stylus");

const plugin = () => (style) => {
    style.include(__dirname)
}

stylus("@import 'my-lib/foo';")
    .use(plugin())
    .render((err, css) => {
        if (err) throw err;
        console.log(css)
    })
```

If you have a `my-lib` subfolder, it will use that and import `my-lib/foo.styl`.

## Getting an Import All Entry

But, what if a user wants to import everything? Like:

```css
@import "my-lib";
```

Then, we can create an `index.styl` within the `my-lib` subfolder, and change it to this:

```css
@import "foo";
```

So now, if you do this:

```css
@import "my-lib";
```

It will import everything from `my-lib/index.styl`, so make sure `index.styl` is importing every other file there is.

## Conclusion

So in this post I showed how to use the JavaScript API to create a Stylus library, allow submodules, and allow one main `index.styl` entry point.