teleren/devto huggingface dataset:
Compare design to web
Tags: html, css, design, react
Published: 2021-01-18 19:26:21

Wanted a way to compare design mockups to frontend prototypes. We created a simple way to upload and overlay the design on top of the live website. Hope this is useful for all the frontend engs out there!

https://usepastel.com/compare-pixels

What other tools do you use for design QA??
I Gathered 700+ Development Resources In One Place
Tags: webdev, programming, productivity, showdev
Published: 2021-01-18 19:13:52

Over the last years I've collected and bookmarked countless resources that were useful in my journey as a developer.

It not only became hard to keep it organised, but I also felt it could be useful for many other devs that, just like me, love finding out new projects, experimenting new tools and improving their workflows.

Introducing [Dev Resources](https://devresourc.es), a hand-picked list of resources for developers, presented in curated lists.

You'll find:

🧩 assets
🛠 tools
🧪 learning
📜 documentation
💰 offers
🔥 and a lot more

And there'll be more coming soon:

⬆️ upvoting
🏷 bookmarking
🗣 comments
💪 and whatever else you guys would find useful

Because [Dev Resources](https://devresourc.es) is made for all devs out there, you can submit your own favourites, in case they're not there yet, and send me your feedback, so we can make it even better together.

I'd love to hear what you think of it. 🙏

Enjoy it and happy coding!
I re-built the Instagram profile detail Compositional Layout and Diffable to help folks learn
Tags: showdev, ios, swift
Published: 2021-01-18 19:02:58

As an iOS developer I am very excited about relatively new technologies **Compositional Layout** and **Diffable Data Sources**. Thanks to these building UI similar to App Store or Netflix became way easier and less error prone.

I have previously written about these technologies in more an abstract way, focusing on the principles and how to use them. 

Now I decided to try something very different and "re-built" the Instagram profile page.

My goal is to show newcomers to iOS development how to approach such task and how to step-by-step build the entire UI.

Here is the result side-by-side 😄

![Instantgram comparisson](https://nemecek.be/media/images/instantgramComparisson.png)

I have written [detailed post](https://nemecek.be/blog/72/building-instagram-profile-screen-with-compositional-layout) and the entire code is available on [GitHub](https://github.com/nemecek-filip/CompositionalDiffablePlayground.ios). Check it out!

Feel free to ask me any questions 🙂
Preparing for AWS Certification Exams - some tips and tricks
Tags: aws, certification
Published: 2021-01-18 18:42:58

During the first lockdown in 2020, I managed to pass [3 AWS Certification Exams](https://www.youracclaim.com/users/ganesh-swaminathan.a81d0508/badges) (AWS Certified Cloud Practitioner, AWS Certified Solutions Architect Associate and Professional).  

The main idea for me wasn't the actual paper certificate at the end, but the journey of learning as I went through services I don't normally use day to day.  I learnt a TON and it also prepared me to coach others through their own AWS journey.

There are literally thousands of articles online on how to prepare for these exams and even more on "how do I get started" or "which resources you would use". So I am going to start a small series covering my own experience and linking to some of the best articles I have bookmarked on these topics. 

I plan to cover tips on selecting the right exam (based on your personal profile and goals), coming up with a training plan, getting exam ready and then actually passing the exam. 


The first post in this series is live!

{% link /aws-builders/aws-certified-cloud-practitioner-resources-guide-2c9d %}


I would appreciate any constructive feedback or retweets! 

{% twitter 1351241531299164163 %}
Meu primeiro freela e o caminho até ele!
Tags: react, javascript, css
Published: 2021-01-18 18:41:36

<p>
Hoje venho compartilhar com vocês como consegui meu primeiro freela.
</p>
<p>
Isso mesmo, minha primeira oportunidade de trabalhar com desenvolvimento chegou. E os dois principais fatores que mais me deixaram feliz foi que chegou por reconhecimento e para trabalhar com o que eu realmente gosto no desenvolvimento, o Front-end.
</p>
<h2>
A abordagem:
</h2>
<p>
Em uma das minhas pausas de estudos, fui fazer o que qualquer dev em busca de uma oportunidade faz: conferir o Linkedin. Lá me deparei com uma mensagem perguntando se eu tinha disponibilidade para um freela.
</p>
<p>
Na hora a alegria já era absurda, mas como tenho meus compromissos e meus objetivos, precisava saber qual era o foco do freela. Para minha total alegria, era montar telas em React com styled-components e uma lib UI que o outro Dev havia já construindo com os components que deveriam ser importados para a construção das telas.
</p>
<h2>
Porque falo sobre reconhecimento:
</h2>
<p>
Um dos motivos pelo qual a pessoa optou por me abordar foi por me acompanhar no Linkedin, ver minhas publicações, minha evolução, meu esforço, meu empenho em ajudar a comunidade.
</p>
<p>
Foi extremamente gratificante ouvir isso. Pois consolida que cada vez mais o caminho que estou trilhando é o certo. Aumentando minha sede por conhecimento, engajamento e construção de valor para a comunidade.
</p>
<h2>
Os aprendizados:
</h2>
<p>
Listar todos aprendizados que esse projeto já vem me proporcionando e irá proporcionar seria impossível, não tem como mensurar tudo que esse trabalho irá agregar.
</p>
<p>
Mas consigo já pontuar alguns ensinamentos que ele me trouxe de grande relevância para etapas futuras, como: React com TypeScript, Styled-components, aprofundar os conhecimentos em CSS, gitflow, conventional commits, resolução de conflitos entre branchs, comunicação e colaboração.
</p>
<p>
Tudo isso e são poucos dias de projeto recém. Tenho certeza que esse trabalho ainda irá me agregar muito conhecimento que terei a maior honra em compartilhar com a comunidade para que, assim como eu, várias pessoas possam ter essas oportunidades na vida.
</p>

<h2>
O que tirar desse pequeno relato?
</h2>
<p>
Mostre-se, documente seu aprendizado e compartilhe com a comunidade. Gere valor para sua imagem, garanta que está sendo visto, participe das comunidades, esteja envolvido na evolução daqueles ao seu redor. Colabore da forma que for possível com o processo de aprendizado de alguém.
</p>
<p>
Não se prenda porque alguém já escreveu sobre aquele conceito, procure sua forma autêntica de ser, assim você irá perceber que um conceito pode ser explicado de diversas formas e talvez a sua forma de explicar é a que vai fazer aquele conceito ter sentido para alguém que antes não compreendia.
</p>
<p>
É o clássico caso do "Se der medo, vai com medo", mas não deixe de ir, somente assim você vai expandir sua zona de conforto, fazendo com que situações que te deixavam desconfortável não deixem mais.
</p>
Node.js Heap Dumps in 2021
Tags: node, javascript, debugging, memoryleaks
Published: 2021-01-18 18:37:03

---
title: Node.js Heap Dumps in 2021
published: true
description: Use the new v8.getHeapSnapshot() to get your heap dumps.
tags: node, javascript, debugging, memoryleaks
cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Snow_Scene_at_Shipka_Pass_1.JPG/1024px-Snow_Scene_at_Shipka_Pass_1.JPG
---

In [diagnosing memory leaks](https://dev.to/arbazsiddiqui/a-practical-guide-to-memory-leaks-in-node-js-2hbo), one of the most useful tools in a developer's aresenal is the heap dump, or heap snapshot, which gives us insight into what objects are allocated on the JavaScript, and how many of them. 

## The Old Way

Traditionally, in Node.js, we've had two options for creating heap dumps.

1. Using the [`heapdump`](https://npm.im/heapdump) module.
2. Attaching a Chrome DevTools instance and using the Memory tab to create a heap snapshot.

In cases where it's feasible and simple, the second option is usually best, since it requires no additional software, and has a simple point-and-click interface to get the job done.

In production environments, it's often not an option, so users are left using the `heapdump` module. While this generally works without issue, there is an additional compilation step and a module to install in order to get this done. These are obivously not insurmountable hurdles, but they can get in the way of solving a problem quickly.

# The New Way

The good news is that in newer versions of Node.js, you don't need the external module, since heap dump functionality is now part of the core API, as of Node.js v12.

To create a heap snapshot, you can just use [`v8.getHeapSnapshot()`](https://nodejs.org/dist/latest-v15.x/docs/api/v8.html#v8_v8_getheapsnapshot). This returns a readable stream, which you can then pipe to a file, which you can then use in Chrome DevTools.

For example, you can make a function like this that you can call whenever you want to create a heap dump file.

```js
const fs = require('fs');
const v8 = require('v8');

function createHeapSnapshot() {
  const snapshotStream = v8.getHeapSnapshot();
  // It's important that the filename end with `.heapsnapshot`,
  // otherwise Chrome DevTools won't open it.
  const fileName = `${Date.now()}.heapsnapshot`;
  const fileStream = fs.createWriteStream(fileName);
  snapshotStream.pipe(fileStream);
}
```

You can call this function on a regular basis using `setInterval`, or you can set a signal handler or some other mechanism to trigger the heap dumps manually.

This new API function is available in all currently supported release lines of Node.js _except_ for v10, where you'll still need the `heapdump` module for similar functionality.

Feel free to use the snippet above in your own applications whenever trying to diagnose memory leaks in the future. Happy debugging!
Day16:100DaysOfCode
Tags: 100daysofcode, productivity, java, programming
Published: 2021-01-18 18:31:07

ok...so,
strted day by learning some iterative nd sequential structure in shell scripting..
then few leetcode ques

followed by my classes :(

then continued with some easy level string ques on leetcode
continued with spring boot(learnt how to create post api to add a user along with some other stuffs...)
you can look upon it here ->
https://github.com/singhtaran1005/SpringUser


would be ending my day by reading some articles on what are cookies nd headers.


You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Start an npm project
Tags: npm, node
Published: 2021-01-18 18:21:44

To start an npm project, you have just to run `npm init` and npm will start asking you a lot of questions about how to call the project, who's the author and so on. If you are like me and have complete trust on your tools and its choices, just add `-y` at the end. It stands for _yes_ and npm will complete the boring burocrazy for you. 😏

```shell
npm init -y
```
Trading Bitcoin successfully!
Tags: trading, investingandtrading, technicalanalysis, bitcoin
Published: 2021-01-19 08:34:03

---
title: Trading Bitcoin successfully!
published: true
date: 2021-01-18 18:16:42 UTC
tags: trading,investingandtrading,technicalanalysis,bitcoin
canonical_url: https://medium.com/coinmonks/trading-bitcoin-successfully-8197577473ac
---

[![](https://cdn-images-1.medium.com/max/1920/1*VFBGXhmvOwixdsB2NVHPxw.jpeg)](https://medium.com/coinmonks/trading-bitcoin-successfully-8197577473ac?source=rss----721b17443fd5---4)

Let’s start with a basic introduction to trading…

[Continue reading on Coinmonks »](https://medium.com/coinmonks/trading-bitcoin-successfully-8197577473ac?source=rss----721b17443fd5---4)
I made a tool which analyses your Github star history
Tags: github, react
Published: 2021-01-18 18:15:49

Hi everyone!

I always wondered what my github star history could tell about me. So decided to analyze star history by month. 

---

In Github, you can assign topic to repository.

For example, [material-ui](https://github.com/mui-org/material-ui) has following topics:

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

By using Github API, I fetched all my star history and grouped by month.

And here is the result:

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

---

You can also view your own top topics from the following link:

https://top-topics-by-github-stars.netlify.app/

Here is the source code: https://github.com/nurgasemetey/top-topics-by-github-stars/
Agile capacity Planning
Tags: capacityplanning, projectmanagement, agile, management
Published: 2021-01-18 18:15:26

**The Concept**
Capacity planning in bare minimum, is the process of resources being available for the project/product to complete a task. 

*In Agile*, 
___**The capacity planning allows us to determine how many productive hours are available for the upcoming sprint so that team can commit to developing a defined set of work within the sprint**___

**Importance**
The capacity planning involved three steps: *The amount of work to be completed*, *current capacity*, and *planning for the future*. 
When we bring together Capacity planning and Velocity or work completed in the last sprint, they serve as a powerful project management metric to understand:
Predict when specific product features can be delivered
At what stage in the project, resources with the right skillset can be onboarded and released 
Inter and inter-departmental dependencies and risks can be fixed.


**How do we use it ?**
I use a spreadsheet with the below values to calculate the capacity of a sprint. 


| Column | Comments | 
| ------------- |:-------------:| 
| Resource Name    | Name |
| Total Available Days   | Total Days in the sprint | 
| Holidays 	 |   National and regional specific holiday for the resource   | 
|Planned leave|Planned leave/s by a resource|
|Total working days|Calculated value ; P = Total Available days – Holidays – Planned Leave|
|Total Work hours | 	P * 8 (8 working hours) |
|% Project Allocation |	1 = Full Allocation, 0.5 = 50 % allocation|
| Meeting / Training	|Time spent in the meeting or training; I usually take  20% |

Link to download [sample spreadsheet](https://github.com/swapanroy/PythonAlgorithms/blob/main/Capacity%20planning%20.xlsx)


![Capacity Planning Screen Print](https://dev-to-uploads.s3.amazonaws.com/i/vb5toude3e19a3hrj0qe.GIF)

Note: I usually have sprint velocity or last sprint completion value added to get some meaningful information that can be used. 

**Final thoughts:**
Capacity planning is the key to get the plan for future sprints and needs to be used with other agile metrics like velocity to plan for future sprints.

*What process do you follow ?*
How to reduce initial project setup time in react native? ⇒ Meet enoch
Tags: reactnative, react, javascript
Published: 2021-01-18 18:04:37

Let's say you are starting and new react native project. The very first step you will do is create a new project using this command

    npx react-native init your-awesome-project-name

and it will create a basic react-native project with a default template.

After this, you will start installing basic libraries such as react-navigation, react-native vector-icons, etc. Some libraries even require manual installation (Need some changes to be done in ios/android folders).

So basically, to start a new project you will have to do the same steps, again and again, you will simply waste 30 min to 45 min setting up the initial project just to start with actual screen designing or writing actual business logic.

What if there is a way to save this time?

What if during creating your project you can get all your favorite library and component stack preconfigured and ready to go?

Here comes enoch to rescue.

## What is enoch ?

enoch is a custom template for react-native. Whenever you create a react-native project with a default command it copies the default react-native template.

But when you create a project with enoch it will download the custom template that will have some basic library preinstalled and some basic components.

To create a project with enoch use the below command

    npx react-native init your-project-name --template <https://github.com/rishikeshgaikar/enoch>
For more info on the library, component, folder structure visit [enoch](https://github.com/rishikeshgaikar/enoch) repo.

## How to create your own version of enoch?

Simply fork [enoch] (https://github.com/rishikeshgaikar/enoch) repo and go to the template folder. This folder is basically a simple react-native project which will be used as a template while creating your project. Since this is basically a react native project you can add or remove any library, component, or file.
2 Tips to Clean Ugly if Statements
Tags: javascript, node, programming, webdev
Published: 2021-01-18 18:03:50

Conditional statements are the backbone of programming but lot of times business requirements can lead to create long nested and ugly if statements.
This post demonstrates some tips to clean those ugly situations.
# #1 Complex condition expressions
Long and complex condition expressions are obvious an ugly situation 
```js
// weird 😣😣
if((temp === 0) || (temp > 0 && temp < 5 && gusts > 10) || (snowing)){
//code block
}
```
Solution create a separate function to return a boolean that represents the long condition
```js
// better 😁😁
if(isColdOutside(temp, windGusts, snowing)){
//code block
}

function isColdOutside(temp, windGusts, snowing){
  if(temp === 0){
   return true
  }
  if(snowing){
   return true
  }
  if(temp > 0 && temp < 5 && windGusts > 10){
   return true
  }
  return false
}
```

# #2 Ternary into ternary
This is another situation that is ugly and the human brain struggle to parse
```js
// weird 😣😣
let temp = 6
let windGusts = 20
let isFreezingOutside = temp < 5 ? (windGusts > 15 ? true : false) : (snowing ? true : false)
```
Solution again here we can create smaller functions to make it cleaner
```js
// better 😁😁
let temp = 6
let windGusts = 20

let isFreezingOutside = temp < 1 ? isSnowing(snowing) : isWindStrong(windGusts)

function isWindStrong(windGusts){
  if(windGusts > 15){
   return true
  }
return false
}

function isSnowing(snowing){
  if(snowing){
   return true
  }
return false
}
```

This was two quick tips to clean ugly if statements.

> Thanks for reading 😎😎😎

> twitter [@petroskoulianos](https://twitter.com/PetrosKoulianos)
I Need Your Critique to Become a Better Developer!
Tags: mentalhealth, discuss, feedback, webdev
Published: 2021-01-18 18:01:20

## Calling all web dev professionals and aficionados, I need your help!

As anyone in the tech space who has gone the self-taught route can tell you, there are several times when you hit a mental brick wall on your journey. I have once again unfortunately found myself slamming face-first into this proverbial mental blockade, but this time I'm trying a different approach to getting over it.

![bang head gif](https://gifimage.net/wp-content/uploads/2017/09/banging-head-on-keyboard-gif-10.gif)

Being the only tech-minded one among my family and friends, I spend much of my time learning and processing things on my own. While as an introvert this seclusion can be nice, I've come to realize that it has severely crippled my opportunity to advance to the next stage in my quest for knowledge. For the past few years, I have very much had only myself <small>(with the exception of one semester with a very poor community college professor)</small> to provide any sort of feedback on the work I have done up to this point.

## My Ask

What I need from the wonderful ***DEV*** community is some constructive, creative criticism and critique of what I have done thus far. Without any outside review, I'm afraid I have no idea where my time is best spent improving. 

If you can spare a few moments, I would greatly appreciate anyone who is willing to take a look at my work from both an overall conceptual design standpoint, as well as a more technical "behind the scenes" perspective focusing on things like performance and code cleanliness. Am I doing something consistently right? Wrong? Absolutely unheard of?

You can view the _major_ projects I've done / am currently working on at **[my website](https://jpuls.dev)**, as well as everything on **[my GitHub](https://github.com/J-Puls)**. <small>(Try to keep chronology in mind, as these things span back to the beginning of my journey.)</small>

Please leave any feedback you have <small>(positive or negative, I'm not looking for only sugarcoated praise, although that's always appreciated 😉)</small> in the comments here, at the email listed on my GitHub, or through the contact form on my website.

![pretty please gif](https://www.tinypulse.com/hs-fs/hubfs/giphy%20(36).gif?t=1483196485084&width=400&name=giphy%20(36).gif)

#### _Help me DEV.to, you're my only hope!_
Get to know what's going on in any GitHub repository!
Tags: javascript, react, showdev, webdev
Published: 2021-01-18 18:01:18

Ever since I started using GitHub, I felt like its repositories could use a "What's going on" section, so checking what a huge project is up to is easier. So, I just built that!

Today I present [What's Going On](https://whats-going-on.netlify.app/)

What the website does now is not even near to what it could end up doing, but I thought it was better to put a hopefully useful preliminary version out in the open as soon as possible than to keep procrastinating on building anything at all. By the way, I seized the opportunity to try out [GitHub's Primer Style](https://primer.style/), which is quite nice to work with!

The source code is can be found at

{% github AlbertoPdRF/whats-going-on %}

although the repository is not quite ready for visits 😜

Let me know what you think of the website in the comments section!

And thanks for dropping by 😊
#Day 33 & 34: 100 days of code
Tags: 100daysofcode
Published: 2021-01-18 17:57:28


I took a break from DSA for these two days and was studying about JS. I have started making a photography portfolio website for my friend. He has really got some awesome photography skills. I will attach the progress here as I make it.
Also, as GSSOC is approaching, I am planning to take part in it this summer. I wanted to do some intership this summer break but to be honest I am still unable to solve the questions of DSA well. So I think this open source event will be of some help to me. i am really looking forward to it.
What productivity tools are you using?
Tags: discuss, programming, productivity, devtools
Published: 2021-01-18 17:55:44

Hey folks! 

I think most of the developers like to explore different tooling to make them more productive. Tools like Vim or Emacs seems like proof of this (not commenting on their learning curve though).

One of the things developers spend most of their is search. We read different studies concluding that devs spend about 15% of their time just typing queries into Google. My co-founder and I care about developers' productivity a lot and we think there should be a better solution.
We started building [Devbook](https://usedevbook.com). Devbook is a search engine for developers. We are starting with a crude initial version that allows you to search in docs, Stack Overflow, and public GitHub code using a single input (more resources coming soon!). It's a desktop app that works similar to spotlight we the focus on being able to control using just a keyboard and not getting in your way.
We have all kinds of developers using Devbook. There beginners, students, or skilled senior devs from companies like Amazon. 

You can download Devbook [here](https://usedevbook.com). For now, it's completely free.

Would love to know what do you think about Devbook!

Also, I'd be interested to know what tools and services are you using to make you more productive? Share your stack!
How to find marketers to work with you on a profit sharing basis?
Tags: saas
Published: 2021-01-18 17:41:00

Hi community,
I'm an indie maker and I love to create products for the people out there. 

But whenever I try to do sales and marketing, I start lacking. I want to ask the PH community that how they contact a marketer which can work on it also as an indie project and make money with profit sharing or equity model.
Also, is there any platform where makers can connect with sales peeps and marketers?