teleren/devto huggingface dataset:
Use what you know
Tags: career, startup, productivity
Published: 2019-10-26 15:34:00

---
title: Use what you know
published: true
description: Use the technology you know, don't get distracted.
tags: career, startup, techtalks, productivity
cover_image: https://images.pexels.com/photos/339379/pexels-photo-339379.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260
---

Use what you know.

Yes, that sounds boring - but it doesn't matter. It's good advice.

If you haven't checked out [Yevgeniy Brikman](https://www.ybrikman.com/?ref=hello-startup-about-author)'s book ["hello, startup"](https://www.hello-startup.net/) - you're missing out. One of the best pieces of advice he gives us is that when we are picking a tech stack - we should use what we know.

> how do you choose the initial tech stack for a startup? [...] go with what you know.
> 
> -- <cite>Yevgeniy Brikman, "hello, startup"</cite>

He then goes on to list several examples of successful startups that did just that:

- LinkedIn (Java)
- Github (Ruby)
- Twitter (Rails)
- Foursquare (PHP)
- Pinterest (Python)

Why did they do that? Well, because that's what their founding teams knew.

I write this because it's very easy for us to get trapped by the latest shiny thing. We have GraphQL, Apollo, AWS AppSync, Svelte, Tailwind CSS and so many more. This is all good, each technology is solving real-world problems. But, are they your problems? Do you really need to learn all these new technologies?

The truth is ... no.

Should you be familiar with them? Absolutely.

> It can be fun to learn a new technology that promises all sorts of theoretical benefits, but your goal in the early days of a startup is to learn what your users want, and anything that takes time away from that is a waste.
>
> -- <cite>Yevgeniy Brikman, "hello, startup"</cite>

:point_up: is how I live my life as an engineer these days. I use technology as a way to solve the user's problems. 

So, when should you consider new tech?

> The trick is not the initial choice of technology. The initial decision is guaran-fucking-teed to be wrong... eventually. The only question is how long it's going to take to be wrong. The trick is recognizing when you hit that inflection point where you need to have the courage to just kill the thing rather than apply Band-Aid after Band-Aid after Band-Aid to it to keep it alive.
>
> <cite>[Scott 2014]Kein Scott, SVP at LinkedIn, VP at AdMob, Director at Google, "hello, startup" 2015</cite>

It all starts with an understanding that what you're currently building will not meet the needs later down the line. Either it'll crash and burn at scale (Twitter/Rails) or the needs on your project will change as the company pivots.

Over the course of my 10+ year career, I can say I've never built a system that has stayed the same for more than 3 months. There are many reasons for that, but one thing is certain - software evolves over time.

Thanks to Yevgeniy Brikman for sharing his experience in such a way that has helped bring calmness to the way I build software today.
Web Design Advice Please - Showcase Theme
Tags: webdesign, showdev, design
Published: 2019-10-26 14:14:00

---
title: Web Design Advice Please - Showcase Theme
published: true
description: Please can anyone help with some web design advice for a theme I was working on
tags: webdesign,help,showdev,design
---

I'm after some advice on web design. I know this community is full of great developers and was wondering if there are any designers out there that would be able to provide some of their experience and guidance. 

I was also wondering if there is another site that you can use to get feedback on designs, or if there was a way we could make a new tag or use an existing tag on Dev.to to promote others looking for design advice?

## Showcase theme

I have been working on and off with a new theme that can be used to showcase your work. I'm pretty happy with the homepage and the blog pages, but I'm struggling with the actual showcase page and how to lay it out. 

I've made it so the items can have a background image, but it looks a bit too busy to me, but then its a bit plain without an image (see top item on showcase page). I was thinking about simplifying the page by making a single large image and having the text below but I quite liked the side by side effect. I wanted something a bit different, but still neat and tidy. 

Any advice appreciated!

## Homepage

![Homepage](https://thepracticaldev.s3.amazonaws.com/i/1ixiz37lbsiotioptnfu.jpg)

## Showcase page

![Showcase page layout](https://thepracticaldev.s3.amazonaws.com/i/vmkcyujqn8qz3h09urof.jpg)

## Blog Page

![Blog Page](https://thepracticaldev.s3.amazonaws.com/i/g3yy1gwtg3rtjlcnw28x.jpg)

## Post Page

![Post Page](https://thepracticaldev.s3.amazonaws.com/i/cuuu2ariisbxwifqtsak.jpg)
JavaScript: I have a problem to set the conditions of the beginnings of the loops.
Tags: javascript, html, loop, help
Published: 2019-10-26 14:10:17

Hi guys! I have a problem with JavaScript.
HTML: https://pastebin.com/B9NvPcdq
JavaScript: https://pastebin.com/jTXCBFRZ
In this code when I click the button of the HTML page, if "Number" element (a paragraph in the HTML page) has 0 in the content of the text, the first array of images will start, and the
content of "Number" element will be changed to 1.
And so far it works.
But I want that when I click for the second time the button, if the content of the text of "Number" element is 1, the second array of images will start, but it doesn't work. Can you tell me why?
The CSS Specification
Tags: beginners, css
Published: 2019-10-26 14:00:48

---
title: The CSS Specification
published: true
description: An introduction to the CSS Specification
tags: beginner, css
series: FrontEnd Development Zero to Hero
---

If you've followed this series from the beginning , we discussed about the [HTML Specification](https://dev.to/ziizium/the-html-specification-4epa) which is sort of  a rule book that tells browser vendors how to implement HTML Elements and Tags. The CSS Specification is no different but with a different approach with the advent of CSS3.

The Specification defines how CSS properties should be implemented by browser vendors along with  detailed algorithms, code samples and tabular information.

The Specification also include:

* The syntax and data types of the language
* Detailed explanation on CSS Selectors
* How you can assign values to properties
* The Cascade (the "C" in CSS)
* How inheritance works
* The Box Model e.t.c

Explanation on some of these topic are short and easy to understand while others are explained in great detail.

The Specification also specify how stylesheets can be included in your web document and how to target specific media  e.g print or screen.

The CSS Specification __prior to CSS3 was  a single Specification__, CSS3 on the other hand __is divided into Modules__ which are __Independent Specifications__ that can be worked on by different author(s) at different paces, that's why we have Selector Level 3 Specification, CSS Color 4, CSS Backgrounds and so on. Some of these modules are revisions of CSS2.1, and some are newly created, but all fall under the banner of CSS3.

The Specification should be your guide if you need to understand how a specific property or feature works behind the scene  and how it works with other CSS properties.  And if you are comfortable reading algorithms you won't get bored reading the CSS Specification.

[The Specifications can be accessed online](https://drafts.csswg.org) along with the author(s) name and when its was last updated.

Take your time and familiarize yourself with the Specification because we will be making heavy use of it in the topic: CSS Selectors.

Next, CSS Properties.
Iterating through components
Tags: reactjsjavascript
Published: 2019-10-26 13:28:55

---
title: Iterating through components
published: true
description: How to use map() to create React components through iteration.
tags: reactjs javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/iterating-components.jpeg
---

## How to use map() to create React components through iteration.

In the previous article we saw how we can render a React component inside a parent component, passing some data (also called *state*) to an object called `props` that is passed down to the child component from the parent component.What we did was render each child component one by one, like this:

```
<Student student={students[0]} />
<Student student={students[1]} />
<Student student={students[2]} />
```

This works but with a long list of objects to iterate over it quickly becomes unwieldy.

A better way to display this data is to use one of the iterator methods offered by Javascript arrays.The method we are going to use is `map()`, that is available on any array.

`map()` takes a function as an argument and each element of the array is passed to this  function one by one.The function takes the array element, does something with it, and then places the result in a new array.

At the end of the iteration, the original array is left untouched, and the method gives us a new array that has the same number of elements as the original array, but each element is modified by the function applied to them.

What does the argument function do with the elements?  
It's up to us to decide what the function does.In our case, we want the function to return a Student component and we want to pass the student object from the array to the new Student component created.

Here's how we do it on one line of code:

```
{ students.map(student => <Student student={student} />) }
```

- We take the students array and call `map()` on it. 
- `map()` takes an arrow function as an argument.
- The arrow function takes as an argument each object in the students array in turn.
- In the body of the arrow function we create a new `Student` component, and we pass the student object to the student property so it can be displayed in the `Student` component itself.

Note that inside the `Student` component JSX syntax we must enclose the `student` variable inside curly braces, because it's Javascript inside JSX.

This iteration will create a number of `Student` components equal to the number of `student` objects in the `students` array.

We can use a slightly different syntax to achieve the same result in a way that may be more clear.

Look at this code:

```
{ students.map(student => (                            
  <Student student={student} />    
)) }   
```

In this code example we put the component on its own line, for more clarity.
In order to do this we need to enclose the component into parenthesis. These parenthesis mean that this is an implicit return. If we left the parenthesis out we would get an error from the Javascript compiler.

Tomorrow we'll take a look at `Class` components, another way to build components in React.
DARPA is Working on an Anonymous Mobile Communication System
Tags: security, javascript
Published: 2019-10-26 13:21:47

The DARPA (Advanced Defense Research Projects Agency) is at the origin of many innovative and useful technologies such as Unix, GPS, Tor, etc. The agency generally uses the technologies required by the US military or can help it. But sometimes, DARPA also makes some innovative technologies available to citizens.

DARPA is Making an Anonymous Mobile Communication System:
According to an information document on Dr. Joshua Baron’s supporters’ day, DARPA is working on an anonymous, end-to-end, hacker-proof mobile communication system. This system, called RACE, can reside completely in a congested network environment.Read More
https://projectwithcode.com/darpa-mobile-communication-system/
Fine tune permissions with other developers
Tags: php, productivity, laravel, inspector
Published: 2019-10-26 13:11:46

Hi, I’m Valerio, head of engineering of Inspector platform.

Since the beginning of my career, nearly a decade ago, I always worked as part of a team. Software development is collaborative by nature. If you’re working for a company, regardless of size, you’re obviously working with others.

But each team has its own rules. All developers inside a group don’t follow all the current tasks, but they are often assigned to specific projects to stay focused.

That’s why we decided to put some improvements on our authorization system giving you the ability to assign each organization member to specific projects.

Here is a short video about new *"per project"* authorization options: https://www.youtube.com/watch?time_continue=1&v=ZOn8SD3pWzw

If your team is growing or your company manage multiple projects yet, you can now better tune developers to the projects for which they are responsible.

Sharing real time information about the status of your business critical application can help your team to improve productivity and to respond quickly to any unexpected event.

Thank you so much for reading it. To make Inspector more sophisticated and mature, it will not be possible to accomplish without your help. Don’t hesitate to share your thoughts on the comment below or drop in live chat on our website! Let’s make it together.

### Thank you for all your support!

- Homepage: [https://www.inspector.dev](https://www.inspector.dev)
- Facebook: [https://www.facebook.com/laravelispector/](https://www.facebook.com/laravelispector/)
- Twitter: [@inspector_rt](https://twitter.com/inspector_rt)
- Contact me: [valerio@inspector.dev](https://www.inspector.dev)
How do you handle distraction?
Tags: watercooler, discuss
Published: 2019-10-26 13:00:12

How do you handle distraction, both personally and corporately?

At the corporate level, I've heard of companies that try to channel distraction creatively, allowing workers to allocate a slice of time each week to other pursuits. I expect there are rules regarding what's an appropriate "other pursuit" in the those situations.

At my office my manager gets quite concerned when he thinks I'm, as he calls it, "spinning my wheels." Granted, if I'm on Facebook, reading [Order of the Stick](http://www.giantitp.com/comics/oots.html) or reading [Girl Genius](http://www.girlgeniusonline.com/index.php) then that's easily identifiable as inappropriate-for-workplace activity. But is Exercism? (I learned how to do Linq through Exercism's C# track and it's been really useful.) Or researching for [HOPL](https://www.facebook.com/HistoryOfProgrammingLanguages)? Or completing [RosettaCode](http://rosettacode.org/wiki/Rosetta_Code) challenges?

Maybe I'm just looking for justifications for corporate misbehaviour, but how to do you keep yourself on target? Okay, I can get really intense sometimes and lose touch with the outside world. And sometimes I wish I could reach into my head and flick the intensity switch on because I'm just not excited at all about the task at hand and would rather be elsewhere.
ETR tests
Published: 2019-10-26 12:09:04

    import random
    
    perfecttiming = []
    totalrty = 0
    for luckynumber in range(0,1000000):
        nonce = random.randint(10000000, 10000000000)  # 10 milyon ile 10 milyar arasında rastgele sayı üretir.
        y = nonce % 5760
        if y == 0:
            perfecttiming.append(totalrty)
            totalrty = 0
            continue
        else:
            totalrty = totalrty + 1
            continue
    
    print("perfecttiming: ", perfecttiming)
    print("perfecttiming len: ",len(perfecttiming))
    a = 0
    for i in perfecttiming:
        a = a + i
    
    print(a/len(perfecttiming))
ES6 Promise | Promise.all | Promise.race | Promise.allSettled
Tags: javascript, node, beginners, webdev
Published: 2019-10-26 11:36:52


# Promise State Definitions

| State       | Definition |
| :-          | :--------- |
|**Fulfilled**| When a promise is resolved successfully |
|**Rejected** | When a promise failed.|
|**Pending**  | When a promise is “neither fulfilled nor rejected“. |
|**Settled**  | Not really a state but an umbrella term to describe that a promise is either fulfilled or rejected. |

Hey guys ! Once again I'm back with an indepth video were we discuss ES6 Promises. I know that async/await is the new way people prefer to deal with async code but I think it's always good to know about  callback functions, promises, and promise methods. 

Also In this video we take a look at Promise.allSettled( ) method which is part of ECMAScript 2020 and can be used in the latest release of Node.js.

In this video we'll have a look at how to convert a request which uses callback functions to request that returns a promise. We'll have a look at how to avoid **callback hell** by **promise chaining**. 
We'll then have a look at promise methods like: **Promise.al()**,**Promise.race()**,**Promise.any()**,**Promise.allSettled()**,

<hr>

> For those of you who don't use node.js this is a basic template to follow along. 
Code Pen : https://codepen.io/midasxiv/pen/RwwoxvX
Make sure you view the 'console' somewhere in the bottom left.



## Video Index:
* `01:44 - Request Package. ( node.js )`
* `03:30 - Request Callback function.`
* `06:10 - Promise Constructor / Convert callback to promise. (pure JavaScript )`
* `11:20 - Promise Chaining & Promise.then()`
* `12:43 - Promise.catch() & Promise.reject()`
* `14:23 - Promise.all()`
* `17:30 - Promise.race()`
* `19:30 - Promise.any()`
* `19:30 - Promise.allSettled()`
* `22:00 - Outro`


If you liked the content checkout my [youtube channel](https://bit.ly/2lNO1u0).
YouTube video : {% youtube G7n8R3JODLs %}


<hr>
![image](https://user-images.githubusercontent.com/24829816/67618904-45707180-f806-11e9-9231-236725898483.png)

<hr>
Avoid notches in your PWA with just CSS
Tags: css, html, webdev
Published: 2019-10-26 11:16:50

At work, I'm usually creating native mobile apps, both in Swift and React Native. But for a new project, we decided it was better to implement a _progressive web app_. I have experience in HTML, CSS & JavaScript, so I thought there won't be any problems.

All was going according to plan until we met a new enemy: The iPhone X.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/885ajcm31qugh0h8ro3n.png)
<figcaption>Excuse me, I'd like to TAP those buttons!</figcaption>

## Native background

In the native world, we have something called _safe area_, a "box" where we can put things inside and be sure they'll be outside of the notch and bottom areas.

This way it's easy to tell the app to place some component at the top of the screen, but move it a little to the bottom if there's a notch in the way.

For the PWA, the easiest way to avoid that stupid bottom bar is by adding some `padding-bottom`, but that would break all other devices. I thought to add a CSS class conditionally with JavaScript, but that seemed like a hack.

## CSS Environment Variables

As you may know, we can now define and use custom CSS variables with `var(--padding-bottom)`. The same way, browsers can also define their own. They're in the process of standardization, but Apple has created some of their own.

```css
.navbar {
    padding-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
```

We define the bottom padding for browsers that don't yet support environment variables. If we were to omit the first rule, the second one is broken and nothing applies.

For browsers that do support them, we want the bottom padding to be equal to `safe-area-inset-bottom`, and fall back to `0` if the variable isn't set.

Similarly, there are also variables for the [top, left and right screen edges][1].

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ve1eiilchvrbtmjrwuxr.png)
<figcaption>Success!</figcaption>

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/env#Values
📚 Awesome links from dev.to and around the web #3
Tags: css, ux, javascript, podcast
Published: 2019-10-26 10:40:30

Hey fellow developers and designers 👋🏽

Thank you all for showing interest in this series and it's a huge motivation for me to keep sharing awesome links I stumble upon on the internet. If you also find cool stuff on the internet you could [send them to me](https://dev.to/connect/@kudapara).

## ✍🏽 Links you might find interesting
⭐ [Why you should learn Javascript principles first (Not the hottest framework)](https://dev.to/blarzhernandez/why-you-should-learn-javascript-principles-first-not-the-hottest-frameworks-kb9) // @blarzhernandez
⭐ [101 Tips for being a great programmer human](https://dev.to/emmawedekind/101-tips-for-being-a-great-programmer-human-36nl) // @emmawedekind
⭐ [25 Days of CSS animations - Teaching myself CSS through motion design](https://dev.to/acupoftee/25-days-of-css-animations-teaching-myself-css-through-motion-design-4l10) // @acupoftee
⭐ [The obvious UI is often the best UI](https://medium.com/google-design/the-obvious-ui-is-often-the-best-ui-7a25597d79fd) // [medium.com/google-design](https://medium.com/google-design)
⭐ [CSS Utility Classes and "Separation of Concerns"](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) // [adamwathan.me](https://adamwathan.me)

---
## ✨ Random delights from around the world

⭐ [amiareal.dev](https://amiareal.dev) - If you ever struggled with impostor syndrome and you constantly ask yourself **Am I a real Dev?** click that link to find out.
⭐ [fullstackradio.com](https://fullstackradio.com) - A podcast for developers interested in building great software products. Every episode, [Adam Watham](https://twitter.com/adamwathan) is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.
⭐ [Github Student Pack](https://education.github.com/pack) - If you are a student and you would like to access services like [Heroku](https://heroku.com), [Amazon Web Services](https://aws.amazon.com), [Sendgrid](https://sendgrid.com), [Github Pro](https://github.com/pricing), [Go Rails Tutorials](https://gorails.com), **and more**, check this out. I have personally benefited from the student pack and I ❤️ it.

---
## 🙈 Shameless Plugs

Let us connect on instagram. My handle is [@kudpara](https://instagram.com/kudapara). Follow me and I will gladly follow you back 🤞🏽

---

> "Like all forms of design, visual design is about problem solving, not about personal preference or unsupported opinion." — Bob Baxley, 2003

---

Cheers 🥂
[@kudapara](https://twitter.com/kudapara)
React: Neatly hide conditional DOM elements 👀
Tags: react, conditional, block, javascript
Published: 2019-10-26 10:38:01

If you are anything like me you always cringe a little bit when you come across something like this in a React project 😬

![Without react conditional block](https://github.com/mshirlaw/react-conditional-block/blob/master/img/old.png?raw=true)

The more conditionals that you have, the worse it gets and the as people add more and more code over time it just gets worse and worse. 

To solve this I always end up building a tiny wrapper component to hide this logic away. I'm sure other people do this sort of thing as well so I built a little `npm` package which will let you do this 

![With react conditional block](https://github.com/mshirlaw/react-conditional-block/blob/master/img/new.png?raw=true)

If you are interested you can [get it on NPM](https://www.npmjs.com/package/react-conditional-block). It certainly won't save you a heap of time but hey, a minute saved is a minute saved right 😜