teleren/devto huggingface dataset:
Do you know Isomorphic JavaScript?
Tags: javascript, isomorphic, developer
Published: 2021-08-12 14:21:56

In programming we tend to hear a lot of really strange words such as isomorphism, etc. 

## What is Isomorphic?

In general term **"iso"** means "same" and **"morphic"** means "form" ie same form that we are studied from our childhood.

In simplest terms isomorphic javaScript is the javaScript that can be run on both the server as well as on the client.

Let's discuss with examples below.

 ![IsoJs function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1l0dvr5p3ehnl6p2fzx.png)

This code snippet is isomorphic, the code will run in a
node.js environment and it will also run in the web browser.

![IsoJs Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmae9j3ygx24g3dpfojw.png)

This code doesn't uses any node-specific libraries or browse any web apis, it's just an arrow function in javaScript that will run in environment. 

Now let's have a look on another example which is not isomorphic.
We will be using fetch api to get some data from external api(NewsAPI).

![Fetch API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mibnxlgj0t2i6l80g83v.png)

This code is not isomorphic because the `fetch` function is provided by the web browser and results in ReferenceError.

If we want to run on both the client and the server we have to import a third-party library such as `axios`. The code something looks like this

![Axios](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbuminz464j9giy1h8h2.png)

This would be considered as isomorphic javaScript but it's important to note that we only need one successful path that will run on both the server and the client in order to be considered isomorphic. 

If we have a javaScript function that checks the environment to determine whether or not it's on the client or the server and then it has the path for both of those cases then that can be considered as isomorphic javaScript for example this

![Check Isomorphic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of1i20hddcpd2e344b2s.png)

This code checks for the window object and determines whether or not it is running on the client or the server and then logs the result.

![Check Iso Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa02mi83qdnh744kkuri.png)

This is isomorphic because it will run on both the server and the client so it's important to note here that isomorphic javaScript is the way that we write the code and
it's **"not a particular technology"** it's just sort of like a design pattern. Writing code in this way allows you to be able to do certain unique things such as server side rendering. 

Hope this information helps you to understand isomorphic javaScript.
Thanks for reading and happy coding!
Activating the native spell-checking on Vim
Tags: vim, programming, productivity
Published: 2021-08-12 14:16:56

Developers write not only code but documentation, bug reports, commit messages. As a non-native English speaker, I always find myself using [Hemingway App](https://hemingwayapp.com), [Grammarly](http://grammarly.com), and other similar tools. They help but it is quite annoying having to switch back and forth from my editor to these tools.

The good news is that Vim ships with a spell-checker. It can check for words that do not exist, wrong capitalization, and even words that were spelled wrong for the selected region.

To turn the spell-checking on, you can use this command:

```
:setlocal spell spelllang=en_us
```

You can also hook it to a specific file type, for example:

```
" this goes into your init.vim/.vimrc file
autocmd FileType gitcommit setlocal spell
```

Happy Vimming!
Passing data from parent to child components in Angular
Tags: angular, codenewbie
Published: 2021-08-12 14:12:23

While there are several ways to make properties available throughout your Angular app, I found this 3-step process pretty easy to follow and remember.

For the sake of simplicity, we call the parent component *Parent* and the child component *Child*. If you prefer a more practical approach, check out this [practical example](https://www.vitainbeta.org/2021/08/05/how-to-pass-property-to-child-components-in-angular/) to get a better understanding. 

Here are the three steps to pass a property to a child component:

## **1. Prepare Child.ts for external Input**

Prepare the child component class (Child.ts) to receive external inputs. 
* **External** refers to data that is not available inside the component itself (In this case, Child). 
* **Input** refers to the property that the parent component (Parent) passes to the child component.

```
// Child.ts

export class Child implements OnInit {
  @Input() expectedProp: { title: string };
  constructor() {}

  ngOnInit(): void {}
}

```
The `@Input()` decorator expects a property that we named *expectedProp*. You can name this property as you wish but remember to be consistent in the next steps.
This custom property is of type object with a key named *title* of type string.

## **2. Bind Property in Parent.html**

First of all, we have some data in our parent component class (Parent.ts)

```
// Parent.ts

export class AppComponent {
  
  book = { title: 'Principles' }

}
```
We want to pass *book* to Child.
To do so, we do two things in Parent.html:
1. We use the selector `<child></child>` to use the child component.
2. We need to bind the data coming from the parent component class (Parent.ts) to the custom property, expectedProp, that we declared in Child.ts. 

Quick recap:
* Data in Parent.ts: book
* Custom property in Child.ts: expectedProp
* Property binding syntax: [property]="data"

The binding happens in Parent.html which becomes the point of contact between Parent.ts and Child.ts
```
// Parent.html 

<ul>
  <child 
    [expectedProp] = "book"
    >
  </child>
</ul>

```

## **3. Use Property in Child.html**

The custom property is now available in Child and it can be used in Child.html. 
As a result, we can use interpolation binding syntax (double curly braces) to presents the component's property value inside the template.

```
// Child.html

<li>
  {{expectedProp.title}} 
</li>

```

## Conclusions

If this seems too abstract, check out this [practical example](https://www.vitainbeta.org/2021/08/05/how-to-pass-property-to-child-components-in-angular/).

Otherwise, remember the three steps:
1. Prepare Child.ts for external Input
2. Bind Property in Parent.html
3. Use Property in Child.html
My experience with LGMSoC'21..
Tags: opensource, computerscience
Published: 2021-08-12 14:09:49

My experience with Lets Grow More Summer of Code (Website: [LGMSOC](https://www.google.com/url?q=http://letsgrowmore.in&sa=D&source=editors&ust=1628779936819000&usg=AFQjCNHQjw1OXNn4FtmRvJzSnRZ_P1PHeA) ) was awesome. It helped me to enhance my skills in the domain of web development and also expanded my knowledge on using Git and GitHub. Its really a good kickstart for someone who's new to open-source and I'd definitely recommend getting started with this. The mentors were really supportive and constantly cleared all the doubts. Overall, it was a great learning experience and I'd like to thank the organizers for coming up with such an amazing summer of code.
Back to Basics: SOLID Principles (Dependency Inversion)
Tags: python, beginners
Published: 2021-08-12 14:07:51

In a software development lifecycle, the decision on how accessible and flexible an object is during this object's design phase will ensure its usability, simplicity, ease of implementation, and accessibility towards making reliable software.

In this post, we will try to understand the fifth SOLID principle and how it can help us write easily extendable software applications.

-----------------------------------------
## Dependency Inversion Principle:

This principle suggests:

- High-level modules should not depend on low-level modules. Both should depend on abstractions.
- Abstractions should not depend on details. Details should depend on abstractions.

By following this approach, it makes the interchanging of modules and classes or services simple.

Let's see how this works with an example:

```python

class MySQLDatabase():
	
    def insert(self, data):
		"""Logic to save the data in MySQL DB"""
		pass

	def delete(self, id):
		"""Logic to delete a row from the DB"""
		pass

class CarManufacturer():
	def __init__(self):
		self._db = MySQLDatabase()
	
	def create_car(self, data):
		self._db.insert(data)

	def delete_car(self, car_id):
		self._db.delete()

```

In the above example, CarManufacturer class is dependent on MySQLDatabase class. In the future, if we want to change our database from MySQL to suppose Postgres we will have to go to all the classes that are using the MySQLDatabase class and update the code to use the new Postgres implementation.

This violates the Open-Closed Principle.

**Solution?**

We will use the Dependency Inversion Principle to make our low-level class i.e. MySQLDatabase to extend an abstraction and our high-level class i.e. CarManufacturer will depend on that abstraction to implement the database functions.


```python

class Database:

	def insert(self, data):
		pass

	def delete(self, id):
		pass

class MySQLDatabase(Database):
	
    def insert(self, data):
		"""Logic to save the data in MySQL DB"""
		pass

	def delete(self, id):
		"""Logic to delete a row from the MySQL DB"""
		pass


class CarManufacturer():
	def __init__(self, DB: Database):
		self._db = DB
	
	def create_car(self, data):
		self._db.insert(data)

	def delete_car(self, car_id):
		self._db.delete(car_id)


```

Now no matter which type of database is used in the application, the CarManufacturer class can connect to the database without any problems or code changes, and the Open-Closed Principle is not violated.

By following the dependency inversion principle, we do not have to change our code, that helps with code readability and extensiveness.

This marks the end of the series, Back to Basics, each covering one SOLID principle.
My first project in programming
Tags: programming, firstpost, firstproject, tictactoe
Published: 2021-08-12 13:45:00

Hello, my name is Marco, i'm from Venezuela and this is my first project in programming. I chose the tic tac toe game for beggining my project and i used python for developed it. I did both version of this project one in english, and another in spanish(my native language). The game is a terminal-game, consist in a user input-ouput(two player only), where the user introduces with wich figure want to play, afterward the user type two numbers that correspond to a column and row of a board. And like the clasic tic tac toe game, you will win only if fill three spaces consecutive by way vertical, horizontal and diagonal.

in this link is the source code of the project:
https://github.com/marcoantoniouseche/TicTacToeProject
Understand Your Users: Contextual Inquiry
Tags: design, product, interview
Published: 2021-08-13 10:32:05

---
title: Understand Your Users: Contextual Inquiry
published: true
date: 2021-08-12 13:39:02 UTC
tags: design,product,interview
canonical_url: https://www.kennethlarsen.org/understand-your-users-contextual-inquiry/
---

 ![Understand Your Users: Contextual Inquiry](https://images.unsplash.com/photo-1616587894998-eb4d3007bbb9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDQwfHxpbnRlcnZpZXd8ZW58MHx8fHwxNjI4Nzc1NDE1&ixlib=rb-1.2.1&q=80&w=2000)

Understanding and interviewing your users is a crucial part of delivering the right things. While there are many ways of doing this, there's a particular theory that I was encouraged to follow by my design professor that is still stuck with me: _Contextual inquiry._

The contextual inquiry is not just about interviewing your users. It is built on the idea that systems design should be grounded in future users' work and aim to enrich the work through the new possibilities offered by information technology.  
It is user interviews combined with observations. The goal is to construct a rich picture of the actual work situation: roles, responsibilities, problems with the work and existing tools, etc.

A few principles guide it:

1. _Context_: Start with the actual work, not with what people say they do

2. _Partnership_: Future users are experts in their work and should be jointly responsible for the inquiry.

3. _Focus_: Everybody focuses on something different in the same situation. Therefore it is essential to be aware of this fact and actively try to extend the total focus of the inquiry.

The interview is then best performed when the user is working on their daily tasks, and the interviewer is sitting next to them while they discuss what is happening and what that means. The interviewer should note what the user is saying and _what they are actively doing_. Especially if any issues arise with the tools and to what extend the tools are supporting the work.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 17
Tags: php, javascript, webdev, tutorial
Published: 2021-08-12 13:25:47

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will validate firstName

{% youtube AB7zTzNpfFQ %}

In this video,we will validate lastName

{% youtube B6GZS_XCqIU %}

If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
what is Data Analyst Job Description
Tags: dataanalyst
Published: 2021-08-12 13:25:31

I’m a fresher and would like to know about Data Analyst Job Description. During the research, I found <a href="https://www.simplilearn.com/data-analyst-job-description-article">data analyst job description</a> article which says programming languages like SQL, Oracle, R, MATLAB, and Python are necessary. I want to confirm if these are the only requirement or do I need to learn more? Can someone please help me?
New Book: CI/CD for Monorepos
Tags: books, monorepo, beginners, opensource
Published: 2021-08-12 13:16:21

**We have a gift for you**: a free, 50-page ebook on effective CI/CD for monorepos. The book is open source, and you [download it today!](https://semaphoreci.com/resources/monorepo-cicd)

## Why we wrote this book?

[Monorepo](https://semaphoreci.com/blog/what-is-monorepo) is a new name for an old idea — place many software projects in the same code repository. Organizations that overcome technical challenges in adopting **CI/CD for monorepos** enjoy many benefits:

- **Cultural**: increased bandwidth of knowledge transfer and a higher level of collaboration among teams.
- **Technical**: firmly established coding standards, simplified dependency management, and configuration reuse.

Big companies like Google, Facebook, Twitter, and Airbnb have been utilizing monorepos for years. Today, we see a growing number of smaller teams adopting monorepos as their way of coding. The jury is still out, but the tide seems to be turning.

<a href="https://semaphoreci.com/resources/monorepo-cicd">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh8bp8o64bgngbg7q7qm.png"/>
</a>

## Why the change now?

On the **frontend side**, the proliferation of JavaScript-based tools has peaked, so it is possible to develop very complex applications in a single programming language. Architects of frontend projects now face the problems of separating concerns and avoiding code duplication — and have a good set of tools to solve them by working in a monorepo.

On the **backend side**, developers of serverless and microservices-based architectures logically isolate their code into small units. Most of these services are written with the same set of tools and coding standards. Also, they are built, configured, and deployed in the same way. Placing them in a monorepo is an efficient way of avoiding duplicate configurations and processes.

At Semaphore, we have heard about this trend from a growing number of teams and have solved the technical challenge of [running effective CI/CD pipelines](https://semaphoreci.com/blog/monorepo-support-available) for monorepos.

Using traditional **CI/CD tools** in the monorepo context, developers essentially need to build, test, and deploy all services all the time. Using Semaphore, developers run [dynamic CI/CD workflows](https://docs.semaphoreci.com/essentials/modeling-complex-workflows/) that run the right pipelines at the right time. As a result, product teams have more time to focus on building the next great feature.

## Who is it for?

This book is intended for software engineers who are either exploring the monorepo way of software development or looking to optimize the CI/CD process for their monorepo.

By showing what it takes to build a monorepo-first CI/CD pipeline that saves time and speeds up software development cycles, we hope that CTOs and other engineering leaders will gain insight into deciding if monorepos are the way forward for their companies and teams.

[Download it today!](https://semaphoreci.com/resources/monorepo-cicd)
20 crazy ways to get Infinity in javascript
Tags: javascript
Published: 2021-08-12 13:07:42

I have 0 ideas why you need this in real codding life, but who knows what will be if some crazy guy will ask you  in your next interview). For sure thats not all ways, but that's more than normally people know (at least). 

`Infinity === 1.8e+308` one of the easiest way, but it's about unexpected ways, I guess)

```js 
2 ** (1025 ^ true)
Date.now() ** (96 >>> '0')
Array(4).fill(10).reduce((acc,number)=>acc ** number)
Array.from({length:2},(__,idx)=> Math.PI ** 8).map((el,idx,arr)=> arr[idx - 1] ** el)[1]
Number.MAX_VALUE ** (true + 0.08)

+'Infinity'
-'-Infinity'
Number.POSITIVE_INFINITY
-`${Number.NEGATIVE_INFINITY}`
+`${Array.from({length:0xFF},(__,idx)=> idx).join('')}` 

-Math.log(0)
Math.atanh(1)
Math.min(...[])
-Math.max(...[])

true / false
!'' / !!''
((!~~Infinity) + !1)  / ~~Infinity
Math.cosh(0) / !(!!-Math.cosh(0))
!!Array.from({length:1}) / Array.from({length:0})
 ```

If you  think up a better-unexpected example, just tell in comments, I guess that's will be funny,
Thanks for reading, I so appreciate this ♥.
Sidekiq's sidekiq_retries_exhausted hook
Tags: ruby, rails, sidekiq
Published: 2021-08-12 13:07:41

`sidekiq_retries_exhausted` is a Sidekiq hook that you can use to do something after Sidekiq has used up all of its retries but the job still failed. It's a good way to make sure you send a failure notification or log an error that might be causing the job to fail instead of it just failing silently.

In the worker, you can set a specific number of retries if you want with `sidekiq_options retry: <some_number>`. The default is 25 times.

Here are a couple of examples but there are ton of ways to configure this which can be found in the documentation.

```ruby
# Retry 3 times before giving up
sidekiq_options retry: 3
# Don't retry at all
sidekiq_options retry: false
```

If the job has used up (exhausted) all of its retries, Sidekiq moves it to the "Dead set" and it will eventually get discarded.

Sidekiq will call the `sidekiq_retries_exhausted` hook right before moving the job to the dead set if you define it in the worker. `sidekiq_retries_exhausted` takes a block and receives the queued message as an argument so you can use it to compose a log message. See below for an example:

```ruby
class MyWorker
  include Sidekiq::Worker
  sidekiq_options retry: 3

  sidekiq_retries_exhausted do |msg, exception|
    # example with using Rails' logger
    Rails.logger.warn("Failed #{msg['class']} with #{msg['args']}: #{msg['error_message']}", error: exception)
  end

  def perform(my_arguments)
    # do some work
  end
end
```

This hook is worker specific, so you would define `sidekiq_retries_exhausted` for each worker you need. There is also a way to send a job "death" notice for all workers globally by adding some configuration in the initializer (in Rails that would be the `config/initializers/sidekiq.rb` file).

```ruby
Sidekiq.configure_server do |config|
  # other config stuff...

  config.death_handlers << ->(job, ex) do
    Rails.logger.error "Uh oh, #{job['class']} #{job["jid"]} just died with error #{ex.message}."
  end
end
```

## References

- [Sidekiq error handling documentation](https://github.com/mperham/sidekiq/wiki/Error-Handling)
- [Source code for sidekiq_retries_exhausted](https://github.com/mperham/sidekiq/blob/3575ccb44c688dd08bfbfd937696260b12c622fb/lib/sidekiq/worker.rb#L59-L61)
- [Sidekiq job retries documentation](https://www.rubydoc.info/gems/sidekiq/Sidekiq/JobRetry)
Add live video conferencing to your app in hours, not months
Tags: reactnative, webrtc, javascript, webdev
Published: 2021-08-12 12:55:32

Hi everyone,

I’d love to share what we are building past few months with you. 

We launched 100ms today on the ProductHunt 🚀  -> https://www.producthunt.com/

We enable developers to add live audio-video capabilities to their apps. 

Previously, our team built live video infrastructure at Facebook and Disney+Hotstar. 

Our SDK is different and efficient from existing video APIs.
Would love to hear your thoughts about the product, support us in launch if you liked it.

So, If you like our vision and what we're building, we'd grin from ear to ear if I could count on your support. 😻
A bot to periodically get updates of Hetzner Cloud machines.
Tags: cloud, discord, javascript, web
Published: 2021-08-12 12:49:53

You ever wanted to get periodically updates of your hetzner cloud machines to your personal discord server via the hetzner api? No? Really?
Ok anyways here you have excactly that.

Sometimes it is really hard to easily **monitor your cloud machines** with **small money**. There are apps out there like [UptimeRobot](https://uptimerobot.com) (which btw is really nice to work with) but if you want to get metrics, fast status updates to react instantly on the error or personalization you have to pay or build something yourself.
This is were the healthznerbot is coming in handy. It is **set up fast** and **customizable**. It even has a custom meme-mode for a little fun everytime the status update is a success.


If you just want to get fast metrics of the servers you have at the hetzner cloud just type in **!servers** in on a from you selected discord channel.

![68747470733a2f2f6173736574732e7261706861656c6265726e686172742e61742f696d616765732f6865616c74687a6e6572626f742f6865616c74687a6e6572626f742d75692e706e67](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgtycpjefkxour90w6cd.png)



## Installation
1. Copy the project to your local machine `git clone https://github.com/raphaelbernhart/healthznerbot.git`
2. Change directory to Healthznerbot `cd healthznerbot`
3. Rename the `.env.example` to `.env` and configure it with your credentials and wishes
4. Run the command `npm i` to install the dependencies
5. Run `npm run build` to build the bot
6. Change directory to dist `cd ./dist`
7. And finally run `npm run start` to run the bot

[Github](https://github.com/raphaelbernhart/healthznerbot)