teleren/devto huggingface dataset:
A function’s intent should be revealed by its name
Tags: cleancode, naming
Published: 2019-10-21 18:43:40

---
title: A function’s intent should be revealed by its name
published: true
description: 
tags: clean code, naming
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ugr9imecmutzq4d8ngkq.jpg
---

And a good way to know if it doesn’t is to read it where it gets used. If, after reading it, you have questions then something is wrong with the name.

A good example is this code that I run into:

```java
if (handleClickItem(customer)) {
    return;
}
```

When I read this piece of code the very first thing that popped into my head was

> How does the click gets handled?! 

To figure that out I had to step into the function’s body and start reading it in order to understand what it does and when. It broke my flow and made me change context.

Turned out that this particular function, depending on the customer’s type, opens the contact’s screen and returns true or simply returns false. Having read something like:

```java
if (openContactsScreenWhenCustomerIsCompany(customer)) {
    return;
}
```

would have been enough for me to simply keep reading and never look back.

*(cross post from: [le0nidas.gr](https://le0nidas.gr/2019/10/20/a-functions-intent-should-be-revealed-by-its-name/))*
*(image from: [Patrick Perkins @ unsplash](https://unsplash.com/photos/ETRPjvb0KM0))*
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2019-10-21 18:20:20

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. Meta-list

Andrew went through 36 sources and compiled a list of the books recommended most often in lists of recommended books. 

{% link https://dev.to/awwsmm/20-most-recommended-books-for-software-developers-5578 %}

#2. What is your password?

Nathilia walks us through hashing algorithms and reasonable password policies. 

{% link https://dev.to/nathilia_pierce/how-to-process-passwords-as-a-software-developer-3dkh %}


#3. A Visually Appealing Journey

Tee challenged themselves to level up their CSS skills by coding animations for 25 days in a row. This is an inspiring post with lots of cool animations and suggestions for anyone looking to take on a similar challenge!

{% link https://dev.to/acupoftee/25-days-of-css-animations-teaching-myself-css-through-motion-design-4l10 %}

#4. The "Next Big Thing"

Xiaoru shares ten fundamental concepts of Svelte -- everything you need to get started.

{% link https://dev.to/hexrcs/svelte-crash-course-with-pics-27cc %}

#5. A Practical Approach

Andrea teaches us the core concepts of functional programming and how we can use them to our advantage. 

{% link https://dev.to/mr_b/an-adequate-introduction-to-functional-programming-1gcl %}

#6. What Happened?

Jason (and the community) reflects on how their relationship with Stack Overflow has changed over the years. 

{% link https://dev.to/codemouse92/has-stackoverflow-become-an-antipattern-3icb %}

#7. "Edutainment"

bun.py, aka a notoriously nerdy space cowgirl, shares five extremely useful extensions for live coding. 

{% link https://dev.to/ninjabunny9000/5-useful-vscode-extensions-for-live-coding-239b %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
CQRS - là gì
Tags: cqrs, querymodel, commandmodel, eventsourcing
Published: 2019-10-21 18:08:24

Con người bắt đầu lưu trữ dữ liệu từ xưa bằng viết lên giấy đóng lại thành sách, sách có thể được viết lại cập nhật thêm và truyền từ đời này sang đời khác cho con cháu. Cùng với sự phát triển của công nghệ về sau thì dữ liệu được lưu trữ thành tệp, rồi bằng cơ sở dữ liệu bằng các hệ quản lý cơ sở dữ liệu như MySql, SqlServer, PostgreSQL, MongoDB, ...

Bốn chức năng cơ bản mà một hệ quản trị cơ sở dữ liệu cần phải đảm đảo là C(Create : tạo mới) - R(Retrieve : đọc) - U(Update : cập nhật) - D(Delete : xoá). Có thể nhóm 4 chức năng cơ bản này lại thành 2 nhóm chức năng chính :

* Query Model - Nhóm chỉ thao tác đọc dữ liệu, cần có kết quả trả về.
* Command Model - Nhóm chỉ thao tác làm thay đổi dữ liệu, không cần trả về kết quả.

Đối với các ứng dụng quản lý truyền thống thì 2 nhóm này thuộc cùng một tập hợp các model để thao tác đọc và làm thay đổi dữ liệu.

Ứng dụng quản lý sơ khai ban đầu do có ít người dùng nên dữ liệu lưu và truy cập rất ít nên hệ thống hoạt động không gặp vấn đề gì.
Qua một thời gian sản phẩm được công chúng biết đến, công ty quyết định đưa đưa ứng dụng này ra thế giới khiến lượng truy cập tăng lên đột biến server phải chịu tải cả triệu request đồng đời, cùng với khối lượng dữ liệu người dùng tăng lên chóng mặt cả vài trăm Terabyte data mỗi ngày khiến cho hệ thống hiện tại trở nên quá chậm chạp và không đáp ứng được lượng yêu cầu truy cập.

CQRS là viết tắt của Command Query Responsibility Segregation. Tách biệt hẳn 2 nhóm Query và Command Model về mặt vật lý. 
1. Command 
 * Tối ưu hoá cho thao tác thay đổi dữ liệu.
 * Chỉ xài các truy vấn đơn giản.  
 * Command model vẫn lưu trong DBMS cùng các khoá quan hệ giữa các bảng.
 * Tính Consistency trong ACID (Atomicity, Consistency, Isolation, Durability) phải được hạ thấp và đánh đổi. 
 * Tập trung xử lý business logic trong Bounded Context.

2. Query 
 * Tối ưu hoá cho thao tác đọc dữ liệu.
 * Xài cho các truy vấn cực kỳ phức tạp.
 * Query model có thể lưu trong GraphQL, Cached (Redis), Materialized View (Oracle, PostgreSQL, SQL Server), MongoDB, Elastic, ... hỗ trợ query nhanh, tăng tốc độ đọc nhanh đến chóng mặt.
 * Đồng bộ data cho Query Model sẽ có độ trễ hơn so với Command Model data (Eventual Consistency) thông qua message queue.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/46tvw927ysd2ru43zkxm.png)
React.js Life Cycle Inshort And Todays Story About My Journey.
Tags: webdev, react, javascript, python
Published: 2019-10-21 18:00:26

Today was a <strong>Great Day</strong> .
Today I covered class component and Life Cycle.

Great start to become a MERN Stack. 


From yesterday I started a challenge of <i>30 days</i> I which am going to cover
REACT.JS, EXPRESS.JS, MONGODB, NODE.JS

What you think is it possible. Let me know what you think about 
this challenge OR if you have any plane how to manage it let me know.


<h1>IN SHORT WHAT IS LIFE CYCLE IN REACT.JS</h1>

<ul>Mounting Phase Methods (Arranged in proper way)
<br>

<li>constructor(props) - called when the component is first initialized. This method is only called once</li>

<li>componentWillMount() - called when a component is about to mount.</li>

<li>render() - called when a component is rendered.</li>

<li>componentDidMount() - called when a component has finished mounting. This is where network requests are usually made.</li>
</ul>

<ul>Updating Phase Methods (Arranged in proper way)
<br>

<li>componentWillReceiveProps(nextProps) - called when a component has updated and is receiving new props.</li>

<li>shouldComponentUpdate(nextProps, nextState) - called after receiving props and is about to update. If this method returns false, componentWillUpdate(), render(), and componentDidUpdate() will not execute.</li>

<li>componentWillUpdate(nextProps, nextState) - called when a component is about to be updated.</li>

<li>render() - called when a component is rerendered.</li>

<li>componentDidUpdate(prevProps, prevState) - called when a component has finished updating.</li>

</ul>
Electron Tutorial: Building Modern Desktop Apps with Vue.js
Tags: vue, electron, javascript, coding
Published: 2019-10-21 17:50:30

---
title: Electron Tutorial: Building Modern Desktop Apps with Vue.js
published: true
description: Learn how to leverage Vue.js and Electron to build and secure modern desktop applications.
tags: #vuejs #electron #javascript #coding
canonical_url: https://auth0.com/blog/electron-tutorial-building-modern-desktop-apps-with-vue-js/
---
In the emerging world of "all things JavaScript", it is no longer a mind-blowing fact that developers can now write desktop applications with JavaScript. Since the initial release of Electron about 5 years ago, web developers have been empowered to use web technologies to develop applications that run as native desktop apps. One of the many beautiful things about Electron is that you can use any JavaScript framework you prefer to build the interface of your desktop application. In this article, you will learn how easy it is to use Vue.js to build interfaces for Electron apps.

[Read on 💎](https://auth0.com/blog/electron-tutorial-building-modern-desktop-apps-with-vue-js/?utm_source=dev&utm_medium=sc&utm_campaign=electronjs_vuejs)

![Electron Tutorial: Building Modern Desktop Apps with Vue.js](https://thepracticaldev.s3.amazonaws.com/i/s5mte3d1kguclbludkxs.png)
What's the craziest code you ever read?
Tags: discuss
Published: 2019-10-21 17:39:57

A while back, I saw some JavaScript where every var and function in the file was named after a type of fruit.
It look something like:

```javascript
grapes.forEach(function(grape) {
  if(grape < 10)
      apple += orange;
});
```

We decided to name the unknown coder *Fruitcake*, although the code was running as expected.
The crazy part was having to read it all to see how it actually worked in order to just add a single new feature.

Has anyone else come across something like this?
The Basics  – Using React (Hooks) with D3
Tags: react, dthree, beginners, svg
Published: 2019-10-21 17:31:18

{% youtube 9uEmNgHzPhQ %}
This is a video tutorial on how to use React (Hooks) in combination with [D3 (Data-Driven Documents)](https://d3js.org/), which is a library to work with data and create complex charts. Both D3 and React have changed over the last year, and now is the perfect time to combine them!

If you have worked with React before, and wanna know how to start with D3, this is for you.

This video is about the basics of using D3 in React. This will be a series, so more advanced topics we will covered in upcoming videos.
CSS Challenges Results #2 | Tooltips
Tags: css, ui, easy, challengeresults
Published: 2019-10-21 17:28:41

Another week has passed, here's the challenge post:

{% link https://dev.to/mikister2012/css-challenges-2-tooltips-3f5d %}


## The HTML

You could structure the HTML in two ways:

### Add the tooltip as a pseudo element

```html
<div class="tooltip" data-tooltip="Tooltip text here">Content</div>
```

### Tooltip as a separate element

```html
<div class="wrapper">
  <!-- content here -->
  <div class="tooltip">Tooltip text here</div>
</div>
```


## Submissions

### Tooltips on text

[Rose](https://dev.to/rose), me, and [Edmund Teo Chang Hao](https://dev.to/tartufu) all used `attr()` to add text to tooltips. Rose added the `href` attribute and I added the `data-tooltip` attribute to tooltips.

{% codepen https://codepen.io/roseyrobertson/pen/JjjGwwY default-tab=result %}


{% codepen https://codepen.io/mikister/pen/bGGEoWZ default-tab=result %}


{% codepen https://codepen.io/teo-chang-hao/pen/QWWNoVE default-tab=result %}




### Tooltip on icon

[Jacob Quirke](https://dev.to/webdevquirke) and [SK](https://dev.to/sansk) both went with icons. SK also added a cool little animation with pulsing circles and a floating pin.

{% codepen https://codepen.io/jacobquirke/pen/jOOWXyz default-tab=result %}


{% codepen https://codepen.io/skay/pen/eYYdOjq default-tab=result %}



## Next challenge

{% link https://dev.to/mikister2012/css-challenges-3-calendar-f1h %}

----

That's it for last week. Have fun with this week's challenge.
How to also update the package.json version when using yarn update
Tags: yarn, javascript
Published: 2019-10-21 17:34:26

---
title: How to also update the package.json version when using yarn update
published: true
date: 2019-10-21 17:12:33 UTC
tags: #yarn #javascript
canonical_url: https://darraghoriordan.com/2019/10/21/update-package-json-version-yarn-upgrade/
---

If you run `yarn update` on a package, yarn will update the package and your yarn.lock file. This is totally fine. 

As long as you check in your lock file, your developers and team will all have the correct versions of libraries when they run yarn install.

However it will not update the package.json with the new semver for the package. 

I kind of found this annoying. If only for aesthetic reasons I wanted to quickly see which minimum versions of packages I was using in my package.json.

To have yarn also update the package.json semver there are a couple of options. Essentially you need to add —latest

## Using —latest

If you have pass yarn the `--latest` flag it will update the package.json.

NOTE: this will not respect semver and will update to the latest version. Whatever that might be.

```
yarn upgrade @graphql-codegen/cli --latest
```

## Using interactive upgrade —latest

If you use the interactive upgrade it will also upgrade the package.json for you

```
yarn upgrade-interactive --latest
```
Writing a Typing game using JavaScript (melonJS)
Tags: gamedev, tutorial, javascript
Published: 2019-10-21 17:10:46

---
title: Writing a Typing game using JavaScript (melonJS)
published: true
description: First of many articles covering the concepts I learned during my hacktoberfest challenge.
tags: gamedev, tutorial, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rf6zqx3r70sxo6xmg26m.png
---

I spent a whole week working on my personal hacktoberfest challenge, where [I built a typing platformer game using MelonJS](https://dev.to/deleteman123/my-hacktoberfest-personal-challenge-i-m-writing-a-game-in-7-days-post-mortem-p48) (JavaScript).

This is the first of a series of articles I'm writing about gamedev using MelonJS: 

## Building a Typing Game with MelonJS

[Link here](https://blog.bitsrc.io/writing-a-typing-game-with-melonjs-ef0dd42f37bf) 

In this article I cover all the basics about melonJS and how I implemented some of the mechanics of my own game. If you're not interested in creating a typing game but want to learn how melonJS works, check it out, it's a very interesting library and super easy to pick-up.

I'll be creating more tutorials in the coming weeks, so stay-tuned!
You are a software engineer
Tags: career, encouragement, motivation, engineer
Published: 2019-10-21 17:03:23

A friend of mine is currently on the job hunt. He was sharing with me how hard it's been. I've been on the job hunt before as a software engineer and know how hard it could be. It is scary, can be demoralizing and imposter syndrome feels like it is at its peak.

As a way to encourage him, I've been thinking about truths that I feel could be said to him to help uplift him. The truths about him as a software engineer.

I wanted to share these truths here for him, for those who might also be in the job hunt and also for me, to serve as encouragement for someone who often battles with imposter syndrome.

> You are extremely smart.
> 
> You create enormous value.
> 
> You can solve hard problems.
> 
> You understand complex things.
> 
> You are patient.
> 
> You deserve what you're being compensated and more. 
> 
> You are not a coding monkey.
> 
> You make good contributions to your team.
> 
> You ask great questions.
> 
> You have the ability to do so much good.
> 
> You are creative.
> 
> You are resourceful.
> 
> You know enough.
> 
> You aren't defined by an interview.
> 
> You don't need to understand everything.
> 
> Your skills are highly desired.
> 
> You're doing a great job.
> 
> You are not an imposter.
> 
> You are a software engineer.

After I was done writing this list of truths, it reminded me of the [Holstee manifesto](https://www.holstee.com/pages/manifesto). So I fired up Figma and also put together a poster-like version as well.

![You are a software engineer poster](https://thepracticaldev.s3.amazonaws.com/i/mcejlo4ziwtyj9hj62ym.jpeg)
Announcing TinaCMS
Published: 2019-10-21 17:01:51



We’re excited to announce [TinaCMS](https://github.com/tinacms/tinacms): an open-source site editing toolkit for React-based sites, especially [Next.js](https://nextjs.org)).  See the [announcement video](https://www.youtube.com/watch?v=iPDCmbaEF0Y) at Jamstack Conf SF (the demo starts at 3:45).

Tina is not a CMS, in the traditional sense. As in, it’s not a _separate_ system for managing content. Instead, Tina adds editing functionality to your site when running in dev mode locally, or when using [TinaCloud](http://tina.io/cloud)...
In fact, I'm writing this post with Tina right now:

![tina-announcement-gif](https://res.cloudinary.com/forestry-demo/image/upload/v1571244588/tina-cms-announcement-post.gif)

When you install Tina, your site gets a floating _edit_ icon in the corner that toggles an editing pane to expose the CMS fields. This gives your content editors a contextual editing experience that’s super intuitive. When you click "Save" Tina writes your content to external data sources, such as Markdown or JSON files.

### Where does Tina store my content?

Currently, Tina writes to Markdown and data files and commits to Git but it can be extended to write to other data sources (another headless CMS like Strapi or Contentful, or any API-based service like Google Sheets or Airtable). When running locally, Tina writes to the file system and if you're using [Tina Cloud](http://tina.io/cloud), it commits to your GitHub repository.

### Why Tina?

I’ve been setting up content management systems for people since the early 2000’s. In the beginning, CMSs like WordPress and Drupal gave our non-developer colleagues website editing powers. But we’ve seen very little innovation on the editing experience in the past 10+ years. Meanwhile, the editing experience of site builders like Squarespace, Wix and Webflow have become very sophisticated.

When I watch people use a traditional CMS, I often see them struggle because the input (the CMS) lacks the context of the output (their site) and using a CMS feels more like filing your taxes than editing a website. Now that we’ve moved to headless CMSs and the Jamstack, editors often lose the ability to preview, leaving them in the dark as they create content.

We developers have hot-reloading, and Tina is hot-reloading for content editors.

### Get Started

We're coming out of a monolithic CMS era and we believe next-gen sites need a next-gen CMS. Checkout Tina and let us know what you think!

- [TinaCMS Docs](https://tinacms.org/docs/getting-started/introduction)
- [TinaCMS GitHub repo](https://github.com/tinacms/tinacms)
- [Tina Community](https://tinacms.org/community)
Storybook with Typescript and NextJS
Tags: react, hacktoberfest, javascript, typescript
Published: 2019-10-21 16:43:14

Hi everyone,

I was looking for a solution to display my React Components, and I had found **Storybook**. 
I started looking for a solution to makes it work with my **NextJS Typescript project**, but I haven't found a way to do it...

Can someone help me or just give me some advice?

I've posted an issue here: [https://github.com/hugos29dev/the-Project-Alpha/issues/11](https://github.com/hugos29dev/the-Project-Alpha/issues/11)

{% github https://github.com/hugos29dev/the-Project-Alpha/issues/11 %}

Hugo
My new home office setup
Tags: productivity, remote, workstations
Published: 2019-10-21 16:37:15

I just moved to a new home, and I am setting up my new home office. We are just renting, so I'm not looking to do any major renovations, but in terms of things I can do to make an ideal home office setup, I really want to do things right.

As we wrote about recently, our team is 100% distributed. Everyone works from a home office or a co-working space.

{% link https://dev.to/devteam/the-dev-team-is-now-100-distributed-1g2e %}

I have written in the past that what I am looking for in a home setup is primarily routine and consistency. When I have this I am happy and productive.

{% link https://dev.to/ben/the-best-remote-work-is-delightfully-unglamorous-4h5f %}

I also want it to be an enjoyable environment where I can pleasantly spend long hours and keep clean and tidy without too much ongoing work.

I work with one big 43" 4k monitor. Here is a review of the monitor I use...

{% youtube HgAqHHNQAtk %}

My computer is a MacBook Pro with a broken screen. I converted it to desktop use rather than fixing it. I have an old MacBook Air which I use when I'm on the go. My next machine will be a dedicated desktop machine with plenty of RAM and CPU.

I'm just getting started with my setup, but I am happy for now. Since my large monitor needs to be further from me than a smaller one, I needed more room than was available on my desk, so I converted a dresser into a monitor platform of sorts and am using the top drawer as storage of machines and wires. The other drawers will be used for additional office storage and play things I want near me during the work day (namely LEGO).

The MacBook is fairly good on heating, but if I run into problems I'll need to add a fan or other cooling situation. If anyone has any ideas about this, please leave a comment. If I move to another type of desktop machine, I'll definitely need some info and I'm not very experienced in this domain. Any kind of quiet coolant would be awesome.

I shaved the corner out of the drawer front so I can run one cable into the dresser without having to leave it open and I drilled a hole in the top to run wires. I'm very happy with the overall cable management situation I have going here.

Without further ado, here are some pics...

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b9spn84oc61701bsncm4.jpeg)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eadr2svh29w2h99wcg0i.jpeg)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lzylwcuzizvo1ooqt2z5.jpeg)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bjvtthz9ks56fee7y7h3.jpeg)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0aopbxc6el9iw28couwm.jpeg)

I'll post more in the future when I make improvements.

I also founded a new tag specifically for workstation show and tell, pics required. If you like content like this, follow the tag.

{% tag workstations %}

Let me know if anyone would like to co-moderate it with me.

Happy coding! ❤️