teleren/devto huggingface dataset:
GraphQL Editor is on ProductHunt and I need your help...
Tags: showdev, graphql, webdev, meta
Published: 2019-12-11 14:50:31

---
title: GraphQL Editor is on ProductHunt and I need your help...
published: true
description: I would like to ask you to share your thoughts about it & would appreciate any form of your support.
tags: showdev,graphql,webdev,meta
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dr3asloaaik44opy1s31.png
---

Hello, fellow Devs!

We have just launched the [GraphQL Editor on Product Hunt](https://www.producthunt.com/posts/graphql-editor)! 🚀

Since it's our first launch on ProductHunt ever it's really unknown territory for us 😱 😱 😱  I would like to ask you to share your thoughts about it & would appreciate any form of support - up-votes, reviews, comments.

{% twitter 1204762227166846976 %}

We are thankful for any constructive criticism as we know that there is still a lot of space for the improvements. You can read more details about GraphQL Editor on [ProductHunt Page](https://www.producthunt.com/posts/graphql-editor).

[![GraphQL Editor - online IDE](https://thepracticaldev.s3.amazonaws.com/i/wl1kciwq5ku9fab3vowv.gif)](https://www.producthunt.com/posts/graphql-editor)



![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dwvm6j33gul8lpnhcysv.gif)
First post. 
Tags: codenewbie, beginners
Published: 2019-10-10 09:30:21

Thought I'd use this space to start keeping track of things I've learned and how I've learned them. 

I've had many fits and starts trying to learn enough web development. 
It took me a few years of looking for shortcuts before I actually decided to spend time to actually commit and learn one thing at a time. 

Early on, I was bouncing around between languages and frameworks. I heard Python was easy to learn, so I'd try a bit of that. Then I heard about Angular and tried that. Figured I could learn Javascript in the process. It was a struggle and I made little progress, especially since I was searching for free tutorials and they were all a bit piecemeal. I thought I was learning, but when I tried, couldn't actually make something from start to finish. 

I needed to find a linear path to learn. 

I decided to commit a few months and bought a course on Udemy. 
It was the [Web Developer Bootcamp](https://www.udemy.com/course/the-web-developer-bootcamp/) taught by Colt Steele. It gave a good overview of everything. There was some front-end stuff and backend stuff using Node.js, but I still lacked confidence and understanding.

Ok. At least I knew I was going to focus on Javascript at that point.

Then I found [Practical Javascript](https://watchandcode.com/p/practical-javascript) which was free, and ended up paying for the premium [Watch and Code](https://watchandcode.com/p/premium) membership. That was a game changer. I felt like I was actually understanding stuff thanks to the instructor Gordon Zhu. 

I built a site and deployed it on Heroku. It wasn't pretty, but I made something.

I saw that Colt had just recently made a [React Course](https://www.udemy.com/course/modern-react-bootcamp/), so I bought it and got through about 40% of the course before I decided to use what I was learning to update my previous site to use React and Next.js.

Finally got done with it and it mostly works most of the time. The site lets you [calculate UPS rates next to USPS and FedEx ones](https://onlineshippingcalculator.com/).

There is still a bunch of form validation stuff I can add, and perhaps improve usability, but it so far works for my needs and frankly feels good to have something deployed.

As a side note. If anyone one finds that their Next.js app works in development mode, but once they build it and deploy it, they run into 404 errors, try changing the filenames in the pages into lower case. Took me forever to find this Stackoverflow solution on how to fix [Next.js 404 errors in production](https://stackoverflow.com/questions/58039214/next-js-pages-end-in-404-on-production-build).
Giving Thanks for Diversity in Tech: Arely Miramontes Rodriguez
Published: 2020-01-07 00:30:51

---
title: Giving Thanks for Diversity in Tech: Arely Miramontes Rodriguez
published: true
date: 2019-12-11 14:31:26 UTC
tags: 
canonical_url: https://www.thisdot.co/giving-thanks-for-diversity-in-tech-arely-miramontes-rodriguez
---

![4KT9MeCd](//images.ctfassets.net/zojzzdop0fzx/2TpHsdyJy7D5E3FlMbPOJQ/db5776b14c34ca5e998919a5d18fecc3/4KT9MeCd.jpg_medium)

Arely Miramontes Rodriguez is a New York City based Frontend Software Development Engineer at Amazon Web Services.  A passionate Javascript developer, she primarily works with React, Redux, and TypeScript, but also has certifications in Python, C++, as well as Data Structures and Algorithms. 

Arley prides herself in her regular work with New Mexico’s M.E.S.A. Club.  This organization is home to a pre-college program that helps prepare middle and high school students for careers in Mathematics, Engineering, and Science.  As a mentor and judge, she helps support M.E.S.A. sponsored statewide science fairs, empowering students to explore STEM disciplines through fun and friendly competition.

Arely is passionate about diversity, and supports inclusive initiatives such as the Latino Youth Summit, which provides an avenue for Latino students to explore a variety of collegiate disciplines, where she introduces participants to Computer Science. She is also very involved with Pixel Picnic, which is a local group based in Madison, Wisconsin that organizes meetings, socials, and video game jams for folks with a focus on diversity for all who are interested in the areas of Game Development.

In fact, Arley is not just interested in Game Development, but is also an avid player, saying, “When I'm gaming, I love connecting with my friends and being able to play with each other regardless of where we live. My favorite time of day is after dinner, logging on my Xbox, and joining my friends for a few games - laughing and talking about our days. It's such a beautiful thing that video games can bring us together.”

Arely hopes to begin speaking on the conference circuit in 2020, but already had a big 2019, having both taken home two Addy Awards, and moving to New York City!

If you would like to keep up with Arely in the coming year, you can follow her on Twitter, [@ArelySkywalker](https://twitter.com/ArelySkywalker).
Where do I start with writing a web page nowadays?
Tags: help, webdev, javascript
Published: 2019-12-11 14:30:25

[I _used_ to write websites as a hobby, back in the days of HTML and ASPX](https://web.archive.org/web/20080516080532/http://hornplayer.net/). Back then CSS was this fancy new thing and Javascript everyone assumed was something to do with Java. 

Nowadays I build data pipelines and stuff like that with {% tag kafka %} etc, and the closest I get to HTML is a pseudo `</rant>` tag in Slack. 

Now I have a demo that I want to build that needs to include a web page. The web page is to display some data that it'll get from submitting a call to a REST API based on user input. It needs to be simple but ideally have the scope to not look entirely butt-ugly. 

**Where should I start as a simple place to build such a thing**? 

Do I just learn some vanilla Javascript and take it from there? Is there a useful framework that will make my life easier? 

I'm struggling with Google because there's a bunch of "tutorials" that are just skinned promos for company's own products, or it's stuff that's from a few years back. And maybe that's fine, but I want to at least understand what the _current_ state of technology is in this space. 

So, hit me with your best suggestions :) I'm looking for 

* Stack recommendations that are easy to access and I don't have to sink a lot of time into understanding. `Accessibility > perfection`.
* Tutorial recommendations that start from zero knowledge.
* Development environment - is `vi` all you need? 
* Something that can run entirely locally and from Docker
สรุปบทความ Can somebody volunteer to take notes?
Tags: notetaking, productivity
Published: 2019-12-11 14:19:45

---
title: สรุปบทความ Can somebody volunteer to take notes?
published: true
description: สรุปบทความ Can somebody volunteer to take notes?
tags: notetaking, productivity
---

ได้ไปเจอและบทความ [Can somebody volunteer to take notes?](https://noidea.dog/blog/can-somebody-take-notes) ของ [Tanya Reilly](https://twitter.com/whereistanya) มา น่าจะเป็นปัญหาของหลายๆ คนเจอ ที่ว่าไม่ค่อยอยากจะเป็นคนจดโน้ตในที่ประชุมสักเท่าไหร่ ผมก็เช่นกันนะ ยอมรับว่าส่วนใหญ่มักจะให้น้องๆ เป็นคนจดแทน เนื้อหาน่าสนใจทำให้ตาสว่างได้ 💡 ขอมาเขียนสรุปย้ำเตือนความเข้าใจของตัวเองสักหน่อย

#### ข้อดีของการจดโน้ต 👍
1. ช่วยให้เราจำได้ว่าคุยอะไร หรือตัดสินใจอะไรบ้างในที่ประชุม
1. ช่วยให้เราสามารถตรวจสอบการตัดสินใจในที่ประชุมย้อนหลังได้
1. ช่วยให้เราฝึกการเรียบเรียงความคิด และการสื่อสารไปในตัว
1. คนที่จดโน้ตก็จะจำรายละเอียดในที่ประชุมได้ดีกว่าคนอื่น
1. คนที่จดโน้ตจะเสมือนมีพลังอำนาจในการไฮไลท์ว่าอะไรในที่ประชุมสำคัญที่สุดอีกด้วย

#### ทำไมคนส่วนใหญ่ถึงไม่ชอบเป็นคนจดโน้ตในที่ประชุม? 🧐
- มีความลำบากในการจดโน้ตไปด้วย แล้วก็เข้าร่วมพูดคุยถกเถียงไปด้วย
- จดไม่ค่อยทัน หลุด context ที่คุยกัน
- ไม่เข้าใจประเด็นต่างๆ ที่พูดในที่ประชุม
- กลัวจดผิด
- มีปัญหาทางด้านสุขภาพ

Tanya คนที่เขียนบทความนี้เค้าบอกว่า ถ้าคนที่จดโน้ตเป็น moderator ซะเองเลย จะทำให้การจดโน้ตง่ายขึ้น เพราะสามารถควบคุมการประชุม และสามารถถามเพื่อให้เข้าใจประเด็นมากขึ้นได้ 😯 คือมันเป็นเรื่องที่ simple แต่นึกไม่ถึงเอง

นอกจากที่คนจดโน้ตควรจะเป็น moderator ไปด้วยแล้วเนี่ย เค้ายังบอกอีกว่าคนที่ทำหน้าที่ตรงนี้ได้ดีที่สุดก็คือคนที่อยู่ในระดับ senior! ไม่ใช่ระดับ junior เพราะว่าน่าจะเป็นคนที่กล้าที่จะถามให้คนอื่นพูดซ้ำ ไม่ค่อยกลัวว่าจะทำอะไรผิด แล้วก็มีความกล้าในเขียน การใช้คำ เรื่องที่เกี่ยวกับการตัดสินใจ 🙌

พออ่านบทความนี้จบ มันทำให้ผมได้ย้อนกลับมาคิดว่าหน้าที่การจดโน้ตในที่ประชุมนั้นสำคัญขนาดไหน ต่อไปนี้คงจะอาสารับทำหน้าที่นี้เองบ่อยขึ้นแน่นอน 😂
Effective requirements gathering process - avoid 5 major traps
Published: 2019-12-11 14:16:46

---
title: Effective requirements gathering process - avoid 5 major traps
published: true
description: Top 3 reasons why systems fail to meet cost and schedules are related to requirements gathering mistakes. Here is how to avoid them. 
tags: 
cover_image: https://www.mindk.com/blog/wp-content/uploads/2019/12/212.jpg
canonical_url: https://www.mindk.com/blog/requirements-gathering-process/
---
Nearly 39% of projects fail because of the faulty requirements gathering process. It’s almost impossible to create a product that works as defined, meets its goals and satisfies the stakeholders when you don’t have strong requirements to move forward from.

“If you don’t know where you are going, any road will get you there” – this quote by Lewis Carrol has survived decades because it remains apt and surprisingly conveys the value of requirements gathering for software development pretty well. In other words, you should understand what you want to get in the end and why you actually need it.

In nearly every case, spending time for collecting requirements helps you receive a far superior product with less sticking points and frustration.

[Continue reading...](https://www.mindk.com/blog/requirements-gathering-process/)
C/C++ 메모리 구조
Tags: c, cpp, memory, structure
Published: 2019-12-11 13:47:51

## 메모리 영역 설명
메모리 영역은 그림으로 나타내면 아래와 같다.

![memory-structure.png](http://raw.githubusercontent.com/wes5510/posts/master/src/c-cpp-memory-structure/imgs/memory-structure.png)

### Code 영역
- 실행 코드, 전역상수, static 전역상수 부분
- 이 영역의 정보는 read only로서 절대 변경되지 않아야 한다.
- 컴파일할 때, 크기가 정해진다.

### Data & Bss 영역
- Data 영역은 초기화된 static, 초기화된 전역변수 부분
- Bss 영역은 초기화되지 않은 전역변수, 0으로 초기화된 전역변수, 초기화되지 않은 static 변수, 0으로 초기화된 static 변수가 올라오는 부분
- Bss 영역에 올라오는 모든 변수는 0으로 초기화된다.
- 컴파일할 때, 크기가 정해진다.

### Heap 영역
- 동적으로 할당해준 변수(malloc, new)가 올라오는 부분
- 먼저 들어간 데이터가 가장 먼저 나온다.(FIFO)
- 실행할 때, 크기가 정해진다.

### Stack 영역
- 임시적으로 생성해준 변수(지역 변수)가 올라오는 부분
- 먼저 들어간 데이터가 가장 나중에 나온다.(FILO)
- 실행할 때, 크기가 정해진다.

## 변수 및 함수의 종류에 따른 메모리 주소 출력 예제
각 변수 및 함수의 주소를 출력하여 비교
- 실행
  ```
  $ ./a.out
  -------------------------------- code --------------------------------------
  printf                            addr  : 0x4005b8
  Init	  global  const	        int addr  : 0x400c10
  Init	  main	  const	static	int addr  : 0x400c18
  Init	  global	const	static	int addr  : 0x400c14
  -------------------------------- data --------------------------------------
  Init  	global		            int addr  : 0x600fcc
  Init  	global        static	int addr  : 0x600fd0
  Init  	main		      static	int addr  : 0x600fd4
  -------------------------------- bss ---------------------------------------
  Zero	  global			          int addr	: 0x600fe8
  Uninit	global			          int addr  : 0x600fec
  Uninit	global		   static  	int addr  : 0x600ff4
  Uninit	main		     static 	int addr  : 0x600ff8
  -------------------------------- stack -------------------------------------
  Init	  main			            int addr  : 0x7fff3605609c
  Init	  main	const	      	  int addr  : 0x7fff36056098
  Uninit	main			            int addr  : 0x7fff36056094
  --------------------------------- heap -------------------------------------
  New	main                      int addr1 : 0x7fff36056088
  New	main			                int addr2 : 0x7fff36056080
  ```

## 함수에서의 메모리 할당 예제
  ```
  void fct1(int c) {
      int d = 30;
      /* fct1 함수의 지역변수 d, 매개변수 c  출력*/
      printf("d addr : %p, c addr : %p\n", &d, &c);
  }
  
  void fct2(int e) {
      int f = 40;
      /* fct2 함수의 지역변수 f, 매개변수 e  출력 */
      printf("f addr : %p, e addr : %p\n", &f, &e);
  }
  
  int main()
  {
      int i = 100;
      fct1(i);
      fct2(i);
      return 0;
  }
  ```
위의 코드를 출력하면 아래와 같은 결과 가 나온다.
살펴보면 `fct1`의 매개변수, 지역변수가 해제된 후 `fct2`의 매개변수, 지역변수가 같은 주소로 메모리가 할당된다.
  ```
  $ ./a.out
  d addr : 0x7ffe966004ac, c addr : 0x7ffe9660049c
  f addr : 0x7ffe966004ac, e addr : 0x7ffe9660049c
  ```
What eslint config do you use with react
Tags: discuss, react
Published: 2019-12-11 14:11:41

I used to use eslint-plugin-react but found more and more nonsense rules in there like https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md. I only want to see an error when there's an actual bug or bad practice (like unused variables, same variable name in upper scope, forgot to close a bracket etc). No styling stuff (I have prettier for that)
Hash passwords by default in Laravel
Tags: laravel
Published: 2019-12-11 14:11:33

---
title: Hash passwords by default in Laravel 
published: true
description: 
tags: laravel
---
Update your user model

```
// App\Models\User

use Illuminate\Support\Facades\Hash;

...

/**
* Hash the password by default.
*/
public function setPasswordAttribute($password)
{
    $this->attributes['password'] = Hash::make($password);
}
```
PrimeVue is finally out of beta! RC1 brings 9 new menu components
Tags: component, ui, vue
Published: 2019-12-11 14:06:05


[PrimeVue](https://www.primefaces.org/primevue)  is out of beta!  [PrimeTek](http://www.primetek.com.tr/)  is excited to announce the first release candidate PrimeVue 1.0.0 that brings  **9 new menu components**  and quality improvements.
[
![](https://i0.wp.com/www.primefaces.org/wp-content/uploads/2019/12/primevue-release-100rc1.jpg?zoom=2&resize=847%2C564&ssl=1)](https://www.primefaces.org/primevue)

**Project Website**

Visit  [PrimeVue Website](https://www.primefaces.org/primevue)  for live demos and documentation.

**Menu Components**

RC1 introduces the following new menu components;

-   [Menu](https://www.primefaces.org/primevue/#/menu)
-   [Menubar](https://www.primefaces.org/primevue/#/menubar)
-   [TieredMenu](https://www.primefaces.org/primevue/#/tieredmenu)
-   [TabMenu](https://www.primefaces.org/primevue/#/tabmenu)
-   [ContextMenu](https://www.primefaces.org/primevue/#/contextmenu)
-   [Steps](https://www.primefaces.org/primevue/#/steps)
-   [Breadcrumb](https://www.primefaces.org/primevue/#/breadcrumb)
-   [MegaMenu](https://www.primefaces.org/primevue/#/megamenu)
-   [PanelMenu](https://www.primefaces.org/primevue/#/panelmenu)

**Full Changelog**

View the  [changelog](https://github.com/primefaces/primevue/milestone/12?closed=1)  at Github for more details about 1.0.0-rc.1.

**Download**

PrimeVue is free library to use under MIT License and available at [NPM](https://www.npmjs.com/package/primevue).

**Roadmap**

We’ll now wait for community feedback and release 1.0.0-Final in early january 2020. More premium templates such as Serenity, Ultima and Apollo are also on their way to join  [Sapphire](http://www.primefaces.org/layouts/sapphire-vue),  [Avalon](http://www.primefaces.org/layouts/avalon-vue)  and  [Babylon](http://www.primefaces.org/layouts/babylon-vue).
Easy and comfortable free organizer
Tags: productivity, recommendation, motivation, discuss
Published: 2019-12-11 13:40:58

I have been using [iSmartLife](https://ismart.life?ref=dev) application and I have gathered the information about what I have been doing, when, how, with whom. It’s a very simple application, you can make notes, set goals, initiate projects and tasks in it, etc.

Demo: https://ismart.life/home/demo

Info: https://ismart.life/articles/ismartlife_info

Here are some articles that I wrote during use:

[Efficient work. In search of the ideal process.](https://ismart.life/articles/efficient_work?ref=dev)

[Step by step I follow my goal. Planning of personal goals, projects, tasks.](https://ismart.life/articles/planning_goal_project_task?ref=dev)

[Dream, plan, act.](https://ismart.life/articles/dream_plan_act?ref=dev)

Yes, the app is completely free and in the demo, you can see all the functionality and understand whether it suits or not...

Hope this will be helpful...
Meteor Roadmap Announcement
Tags: meteor, node
Published: 2019-12-11 13:35:18

A new [roadmap](https://github.com/meteor/meteor/blob/devel/Roadmap.md) has been released detailing the next steps for Meteor, catering to many of the community requests and most importantly encouraging everyone to participate.

The most notable features of this roadmap are:

- Update to Node.js 12

- Ultra-thin Meteor (Mongo-less Meteor)

- Hot Module Replacement

- Update Cordova to 9

- Documentation updates

This announcement sets out a clear example on how the new Meteor management intends to correct past mistakes, mainly, the lack of communication. 

Again, if you've a couple of minutes to spare, please take a look at the new [roadmap](https://github.com/meteor/meteor/blob/devel/Roadmap.md).
Why Mocha is our ‘5-star’ Javascript testing framework
Tags: testingtools, mocha
Published: 2019-12-11 13:21:14

---
title: Why Mocha is our ‘5-star’ Javascript testing framework
published: true
description: Choosing a suitable Javascript testing framework is not an easy task. We have got through it and are ready to share our choice. Read on.
tags: testing tools, mocha
cover_image: https://www.mindk.com/blog/wp-content/uploads/2019/12/mocha-1.jpg
canonical_url: https://www.mindk.com/blog/javascript-testing-framework/
---
Building a predictable and error-free software is something each developer should strive for. Using automated testing allows you to sleep soundly at night as you know for sure your code works properly. A good Javascript testing framework may become your sleeping pill.

Theoretically, it is possible to test an app without using automated testing tools, but in reality, it involves additional stresses like writing helper functions, command-line utilities, feeling anxious about how to run asynchronous tests and so on. Eventually, you will end up building your own custom test automation framework. No need to reinvent the wheel.

JavaScript, like any other programming language, has a number of tools that allow test-driven development, like Jest, Jasmine, Mocha, QUnit, Karma, Cypress, and others. But choosing among testing frameworks turned out not to be an easy task. So, this article will be useful for those who face the same situation and are looking for a suitable testing tool to use.

[Continue reading...](https://www.mindk.com/blog/javascript-testing-framework/)
Turn on runtime compilation for modified views in ASP.NET Core
Tags: aspnetcore, csharp
Published: 2019-12-11 13:05:03

As a seasoned ASP.NET developer I used to modify the views when I working on CSS/HTML, hit F5 and see what is changed on the UI.
With ASP.NET Core it's not possible by default because the views are compiled by default and they are included in the bin folder with the others dll files.
The most important advantage of this new behavior is one of the ASP.NET Core feature: performance.
In the other hand you can create, for instance, a lot of default views, put them into a class library and reuse that views in many projects.

But it's still possible to compile views when the files are changed.

## Turn on runtime compilation

There are few steps to make it happens.

- Find and install the NuGet package called **Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation**
- In the ConfigureService method, replace the content with this line:
 
```csharp
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews()
                .AddRazorRuntimeCompilation();
        }
```

Now you can press F5, change something in the views and dotnet recompile them at runtime.
But if you don't want the services in the production environment, you can use the conditional compile options.
Let's see how.

## Compile the views only for Debug

To achieve this goal, we can use an out-of-the-box feature offered by Visual Studio and .NET.
Just add "#if (DEBUG)" in the code and add the runtime compilation only if you on debug.
In this cause you have performance in the production environment because you don't use this service but more productivity when you are on debug.

```csharp
        public void ConfigureServices(IServiceCollection services)
        {
            var mvcviews = services.AddControllersWithViews();

            #if (DEBUG)
            mvcviews.AddRazorRuntimeCompilation();
            #endif
        }
```

Enjoy your compiled views!!!

![](https://media3.giphy.com/media/dWCNjE4AjkDyo/giphy.gif?cid=790b7611299971daf18519d026437a8454135fecda3e088a&rid=giphy.gif)
How do you CR?
Tags: programming, engineering, codereview, improvement
Published: 2019-12-11 13:00:56

---
title: How do you CR?
published: true
description: What is your method of code review-ing 
tags: programming, engineering, code-review, improvement
---

1. What is your method for Code-Reviewing and how that helps you to be better?

2. Can I use your method? 


If 2=yes then; 3. What should I keep in mind if I want to use your method?

Bonus question: Do you code review your Code before sending it to others?