teleren/devto huggingface dataset:
How to Grow as a Developer?
Tags: javascript, webdev, programming, productivity
Published: 2022-02-15 21:23:04

## Growth
When you have been a developer / programmer / software engineer for several years it can feel like you have a great grasp of your tools and languages. You only realize what you don't know when you change tools, try a new library, or change languages.  

The same can be said for almost every career and profession in the world. You could be a mechanic that works on cars every day for 30 years and then a new 2022 vehicle comes out with a feature you've never seen before, time to learn 1% more!

There is always room to learn more in your existing tools, libraries, frameworks, and languages. There is where the 1% rule comes into place.

### The 1% Rule
The 1% rule challenges you to take something that you already know, and learn 1% more about it. 

![The one percent was all I needed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32k0byuztfsb4qn3d93f.png)
 
### Resources?
The resource itself doesn't matter. You can use books, social media, blog posts such as this one, MDN, YouTube, a colleague, a professor, literally anything! The only requirement is that you learn something that you did not know before!

### How do you quantify 1%?
![Infinite going up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n2bss5uvdsqiso3ijm2.png)
 
 
 
I quantify the 1% as knowing something more this week than I knew the previous week. For example, with JavaScript you can make an object immutable using [Freeze](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze). If you didn't know this before you read this post then you are already 1% better than you were last week. It's a gradual gain of knowledge or skills 

### Example using CSS
Let's say you feel confident in your CSS skills and use CSS every day in your front end dev role. Pick an area of CSS you don't use often and learn about it, well enough that you could tell a colleague or coworker about it and they would understand it as well. 

### Example using JavaScript
You have been a JavaScript developer for years, you have been using it in some form or another every day. There have been many changes and developments in JavaScript since you first learned about it, for example String.matchAll() is a recent addition to the language that wasn't possible until just a couple years ago. Pick one topic or area of interest and learn about it. Then share that knowledge with colleagues, friends, or your social media audience! 

### Share what you learn 
When you share new things you learn, you are literally teaching other people! There are millions of people on Twitter, several of them are just getting started on their journey. Whether you are 1 step, 1,000 steps, or 1,000,000 steps into your coding journey, you can still learn 1% more! 

## Challenge
Spend time every single week educating yourself or improving by 1% in areas of your life that you care about. It's as easy as reading an article, a blog post, watching a YouTube video, or talking to a friend.
What is Context API? React context API: How it works? Context API will replace redux?
Published: 2022-02-15 21:17:12

**What is Context API?**
The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.
Context API is a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease.
**
React context API: How it works?**
React.createContext() is all you need. It returns a consumer and a provider. Provider is a component that as it's names suggests provides the state to its children. It will hold the "store" and be the parent of all the components that might need that store. Consumer as it so happens is a component that consumes and uses the state. More information can be found on React's documentation page

**Context API will replace redux?**
No. Well, not entirely.
Redux is great and came perfectly to answer the need for state management. Actually, it answered this need so well that it came to be known that you can't be a "true" React developer if you don't know your way around Redux. However, Redux has its disadvantages, and that's why it's important to know what Context API gives us that Redux doesn't:
Simplicity - When using redux people tend to manage almost all of their state in redux and it causes 2 problems:


Overhead - Why should I create/update 3 files just to add one tiny feature?
One of the significant advantages of React's one-way data binding is that it's easy to understand - A component passes state to its children. Using Redux takes it away from us.
Using Context API we can define several unrelated contexts (stores) and use each in its proper place in the app.
Introduction to JavaScript Strings
Tags: javascript, beginners, webdev, tutorial
Published: 2022-02-15 21:00:53


## Introduction

JavaScript Strings provide a way of representing and handling characters. 

## JavaScript Strings

A JavaScript string is a set of character(s) written inside quotes.

```typescript
// with single quote
let emptyString = '' // an empty string
let name = 'Elon Musk'

// with double quotes
let project = "SpaceX"
```

Declaring a String in JavaScript does not restrict usage of single `''` and double quotes `""` 

## Acess character
String objects provide a useful method for accessing a character in a string

```typescript
let catName = 'Anita'
console.log(catName.charAt(0)) // prints 'A', character at a position 0
```
Strings behave like Array-like objects, so above can be:
```typescript
let catName = 'Anita'
console.log(catName[0])// prints 'A'
// looping throug each character
for (let i = 0; i < catName.length; i ++) {
  console.log(catName[i]) // A, n, i, t, a
}
```

### Get length of  a JavaScript String
```typescript
const THREAD_NAME = 'Moonspiracy'
console.log(THREAD_NAME.length) // prints number of characters// 11
```

## Summary
JavaScript Strings provide a way of presenting strings using double or single quotes. Both syntaxes are valid and usage is based on project style guide and preferences.
No-Code Machine Learning for IoT
Tags: machinelearning, datascience, ai, iot
Published: 2022-02-15 20:59:27

![www.elipsa.ai](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tq56tp5rumx7jco74317.png)

Hi Everyone, we recently released the Community Edition of our Elipsa AI Platform.  Through our APIs we offer a template based approach to Outlier Detection primarily for monitoring industrial equipment with IoT data but it can be utilized for various use cases.

[Elipsa AI Templates Explained](https://medium.com/elipsa/elipsa-ai-templates-explained-5210b018fa5a)

The Community Edition is free to use and gives you a limited number of free models to build and test.  Feel free to take a look:

[Elipsa](https://www.elipsa.ai/api)
Tuesday’s Tip – Using Challenges to Build Habits
Tags: challenges, codechain, dailyhabits, kickstart
Published: 2023-05-16 23:06:32

---
title: Tuesday’s Tip – Using Challenges to Build Habits
published: true
date: 2022-02-15 20:58:45 UTC
tags: challenges,codechain,dailyhabits,kickstart
canonical_url: https://www.30minuteproject.com/2022/02/15/tuesdays-tip-using-challenges-to-build-habits/?utm_source=rss&utm_medium=rss&utm_campaign=tuesdays-tip-using-challenges-to-build-habits
---

## Using Challenges to Kickstart Learning Habits

If you’re struggling to figure out the best way up your skills as a developer, you already know that learning a new language or adopting a side project can help expand your skill set. But sometimes it’s hard to know where to start. Challenges are a great way to kickstart your way into making learning a new habit. 

Whether you call it a daily challenge, a streak, or a code chain, the idea behind these challenges is to let you bounce around and try a few things. The two typical challenge lengths you’ll see are 30 days and 100 days, and that’s for specific reasons. With 30 days, the duration is handily a month long, so it has a nice feel to start at the beginning of the month and finish at or near the end. Furthermore, it’s often said that it takes 30 days to establish a new habit. As for the 100-day challenges? Those are a longer commitment that can be a good litmus test for whether or not you’re finding something interesting and engaging enough for you to stick with longer term. The quarterly length also allows for a good look back your progress and accomplishments. 

## Recommended 30-day and 100-day challenges

Below are some challenges that might help you get going on something:

- [100 Days of Code](https://www.100daysofcode.com/)
- [100 Days 100 Projects](https://www.florin-pop.com/blog/2019/09/100-days-100-projects/)
- [30 Day Vanilla JS Coding Challenge](https://javascript30.com/)
- [30 Days 30 Projects](https://dev.to/joanne/the-start-of-30-projects-in-30-days-3jke)
- [30 Days of coding](https://www.30dayscoding.com/)
- [30 Days of code](https://www.hackerrank.com/domains/tutorials/30-days-of-code)
- [30 Days to form a new habit](https://www.geeksforgeeks.org/30-days-to-form-a-new-habit-of-coding-are-you-in/)  

My advice? If you’re looking to get your feet wet and try something new, a 30-day challenge is ideal for fast, light, exploratory projects. If you’ve found something really interesting and want to dive deeper, give yourself a 100-day challenge and see where it gets you. Happy coding!
Share The Gems You Love With RailsGems
Tags: ruby, rails, hotwire
Published: 2022-02-15 20:54:59

Have you ever wondered what gems other developers like to use? What about your favorite Rails developers, what gems do they like? _I sure have!_

That's why I built [railsgems.com](https://railsgems.com), an easy way to discover new gems, and share the gems you love.

You can [browse gems](https://railsgems.com/gems) sorted by the most liked. Or you can [browse devs](https://railsgems.com/devs) seeing the number of mutual gems you both like. 

Getting started is easy, you can sign in via GitHub, or can create an account by email. Afterwards, just click the like button to start building a list of your favorite gems.

---

There are other sites out there like [bestgems.org](https://bestgems.org) and [ruby-toolbox.com](https://www.ruby-toolbox.com), which are great for seeing statistics about gems like number of downloads, number of stars, etc. 

However what makes [railsgems.com](https://railsgems.com) different, is the ability to like gems and see related gems between you and other developers. Maybe you both like [devise](https://www.railsgems.com/gems/devise) for [authentication](https://www.railsgems.com/tags/authentication), but they prefer [pundit](https://www.railsgems.com/gems/pundit) where as you like [cancancan](https://www.railsgems.com/gems/cancancan) for [authorization](https://www.railsgems.com/tags/authorization).

I think you can gain some interesting insights here, and perhaps seeing these similar vs different gems might make you consider other options on your next project.

---

The project is [open source](https://github.com/dalezak/rails-gems), was scaffolded using [Rails Blueprint](https://dev.to/dalezak/a-starter-blueprint-to-help-fast-track-a-new-rails-applications-4671), and build using [Hotwire](https://hotwired.dev). If you have any feedback or suggestions, I'd [love to hear from you](https://twitter.com/dalezak)!
styled-components keyframes animations - a very short guide
Tags: styledcomponents, react, animations
Published: 2022-02-15 20:50:33

To create a [@keyframes animation](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) and use it with styled-components the first thing you need to do is to import the `keyframes` helper.

```JSX
import styled, { keyframes } from 'styled-components';
```

Just as the `div`, or any other “element” property that exists on the `styled` object imported from `styled-components`, `keyframes` is a [function that you use as a tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#:~:text=call%20a%20function%20(-,the%20tag%20function,-)%20with%20an%20array) for your template literal style declarations. 

And just as with the `div`s and the `button`s the result from the tag function is assigned to a variable. This variable is then used to reference the animation in your `styled` components (and since your keyframes animation is not a React component the variable should be named in camelCase and not PascalCase).

```JSX
const rotate = keyframes`
  to {
    transform: rotate(360deg);
  }
`

const InfiniteRotate = styled.div`
  animation: ${rotate} 4s linear infinite;
`

function Spinner() {
  return <InfiniteRotate>🥴</InfiniteRotate>
}
```

It’s not really more complicated than that! And this syntax allows you to export the animation and use it in several places in your app with different durations, iteration counts etc.

<hr />

P.S. Might be worth noting that keyframes can NOT be used with react-native, but there is a library for that called [Animated](https://reactnative.dev/docs/animated).
Azure Pipelines Question 
Tags: devops, azure
Published: 2022-02-15 20:45:30

Hi,
Azure devops pipeline question

I want to consume artifacts of one pipeline from another pipeline.
Ex: Pipeline A should consume artifacts of Pipeline B
Also Pipeline B should trigger when there is Pull request / change in Pipeline A, so that its latest will be consumed. 
FYI: All the piplines are present in same project
Quick Design Tips Part 1 - Grouping Your Interests
Tags: design, ux, ui, beginners
Published: 2022-02-15 20:42:07

**Hi!** In this series, I'm going to run through quick design tips that can help improve your designs!

Though this series is specifically geared toward front-end web designers, these tips translate to other platforms (such as desktop & mobile) as well.

---

### Disclaimer:

_The tips I'm sharing here are based on observation and experience, and this post is ***not*** meant to provide "expert" (ie: 'research'-based) opinion. I will, however, try to explain the "why" behind each point, rather than just giving a dry, empty "Do this; don't do that" perspective._

*Now, without any further pre-ramble, let's jump in!*

---

## Visually group common interests
This can be done in a number of ways - even if you choose to think outside the box, a "box" should still exist, somewhere.

### When grouping buttons - round the outliers

![A cheatsheet for grouped buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpd705ye04vtuemcka6l.png)

If you're not aiming for a UI with sharp edges everywhere (which *can* be cool, too!), it's really nice if you use selective rounding to indicate connectedness.

#### For example, let's say you have a group of related buttons:

![3 buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dodxkwyxhyqogfpkktz.png)

There are multiple ways you could style them, depending on the overall style of your site. However, if you're looking to establish a style that both stands out, and has a hidden benefit of making your related content "feel" more "connected", here's a simple tip:

### Round the corners of the first and last elements in the row

![Three buttons, the two most extreme buttons with rounded corners](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwpr7xgcnx7e2z7300gu.png)

You can visually indicate that these separate buttons are still grouped as one by rounding the corners of the first and last buttons in the row. Doing so provides a visual indicator that these elements are not only grouped for convenience, but **context.**

Of course, it goes without saying that there will always be exceptions to the "rule". For instance, you may be working with an interface where everything uses sharp lines as a "signature" of that design. However, where applicable, this simple design tip can give your designs a subtle, but effective edge.

---

Whelp! That's all for now! I hope you found this quick design tip to be useful! If you did, feel free to give this article a like/bookmark or share! I also love to hear your feedback, so don't be afraid to respond in the comments.
Demo : Twitter streaming and sentiment analysis using Kafka, OCS, MongoDB & OpenShift (Kubernetes)
Tags: twitter
Published: 2022-02-15 20:25:09

You know tech tools are cool, but unless you have a defined use case it's hard to put things into perspective and understand how different tools can interact with each other, help solve a problem or explore new use cases.

So to educate and motivate our technical buyers, sellers and customers, I created a fancy use case of ingesting live Twitter tweets and applying sentiment analysis to it. For this demo, i used the following tools

* **Twitter API** : Realtime streaming data source

* **Red Hat AMQ Streams** : Apache Kafka cluster to store real-time streaming data coming into the system

* **MongoDB** : Storing tweets for long term persistence from Kafka into a schema-less NoSQL database

* **Red Hat OpenShift Container Storage** : Used for providing RWO (in this project), RWX, Object Storage persistence storage for Kafka and MongoDB apps running on OpenShift

* **Red Hat OpenShift Container Platform **: Enterprise grade k8s distribution for container apps

* **Aylien : **Sentiment analysis solution backend

* **Python** : Backend API app to trigger data sourcing from twitter, move data from Kafka to MongoDB, server data to frontend app

* **Frontend** : basic HTLM, CSS, Javascript-based frontend to plot some graphs

This slide deck should give you a glimpse of how the demo would look like (demo youtube/github link below)

[Slide Deck](https://www.slideshare.net/alohamora/demo-twitter-sentiment-analysis-on-kubernetes-using-kafka-mongodb-with-openshift-container-storage)

And here is the actual demo recording that you can go through, where i have explained how these components work together and make this a viable solution if you have a real-world use case along the same lines

[YouTube Video Link](https://youtu.be/ngolragtNto)]

If you are interested in running this demo by yourself, you can find the code in my repo, Github project link : [https://github.com/ksingh7/twitter_streaming_app_on_openshift_OCS](https://github.com/ksingh7/twitter_streaming_app_on_openshift_OCS)
> Happy Analysing Live Tweets
Ruby Sets
Tags: ruby, rails, sets, rubysets
Published: 2022-02-15 20:06:25

## What is a Ruby Set
Ruby Set is a class implementing the mathematical concept of [Set](https://en.wikipedia.org/wiki/Set_(mathematics)).
Meaning it stores items like an array without duplicate items  so all the items in a set are guaranteed to be unique and it is a lot more faster and has some special capabilities.

Before getting into how to use set class let's first determine when do we use it.

### When to use sets
Here are the few cases where sets work better:-
1- Elements order does not matter.
2- No duplicate values allowed.
3- The sequences needs to be compared for equality regardless of the order.

### How to use sets
```
>> require 'set'
>> fruits = Set.new
>> fruits << "Apple"
>> fruits.add("Orange")
>> fruits
=> #<Set: {"Apple", "Orange"}>
```
We can also do this
```
>> numbers = Set[1, 2, 3, 4]
=> #<Set: {1, 2, 3, 4}>
Notice no duplicates allowed:
>> numbers << 3
=> #<Set: {1, 2, 3, 4}>
```
#### Here are some useful methods to use with sets
```
#include?
>> numbers.include?(4)
=> true

#delete
>> numbers.delete(2)
=> #<Set: {1, 3, 4}>

#disjoint?
>> numbers
=> #<Set: {1, 3, 4}>
>> numbers.disjoint? Set[5, 6]
=> true      #No elements in common the opposite is intersect?

#union or |
>> numbers
=> #<Set: {1, 3, 4}>
>> numbers.union Set[2, 4, 5] 
=> #<Set: {1, 3, 4, 2, 5}>
>> numbers | Set[2, 4, 5] 
=> #<Set: {1, 3, 4, 2, 5}>

#delete_if & It's opposite keep_if
>> fruits
=> #<Set: {"Apple", "Orange", "melon"}>
>> fruits.delete_if { |f| f == "melon"}
=> #<Set: {"Apple", "Orange"}>

#clear
>> numbers.clear
=> #<Set: {}>
```
As well as the method above Set is easy to use with Enumerable objects.

For more details please check out [ruby-doc](https://ruby-doc.org/stdlib-2.7.1/libdoc/set/rdoc/Set.html)

Now we know how to use ruby sets for better performance and easier coding.
So if you are using Ruby in your current project and you think that any of the cases above apply to you, you should consider using ruby sets.

I hope you enjoyed reading the article as i enjoyed writing it if so Please share it so more people can find it 🙂
⚙️ ❮ Zsh Unique ID ❯
Tags: zsh, tooling, productivity, shell
Published: 2022-02-15 20:03:25


![❮ ZI ❯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4j7yw2itgeth8bumv8c.png)

<div align="center">

[https://z.digitalclouds.dev](https://z.digitalclouds.dev) | [GitHub](https://github.com/z-shell) | [Twitter](https://twitter.com/zshell_zi) | [Join the team](https://github.com/z-shell/community/issues/new?assignees=&labels=%F0%9F%91%A5+member&template=membership.yml&title=team%3A+)

</div>

---

This plugin provides a **unique number** that identifies a **running** Zshell session, in its shell variable `$ZUID_ID`.

Besides this unique number, also a unique _codename_ is provided, in shell variable `$ZUID_CODENAME`.

Once you load this plugin, the two parameters will be set, and their values will not be available to other Zshell sessions (being thus _unique_).

`$ZUID_ID` is a progressing number starting from `1`.

`$ZUID_CODENAME` is chosen from a list of predefined codenames, see the default list below.

An example use case is to hold logs in files `.../mylog-${ZUID_CODENAME}.log`,

 so that two different Zshells will not write to the same file at the same time.

---

Default codenames are:

- atlantis (for `ZUID_ID` == `1`)
- echelon (for `ZUID_ID` == `2`)
- quantum (etc.)
- ion
- proxima
- polaris
- solar
- momentum
- hyper
- gloom
- velocity
- future
- enigma
- andromeda
- saturn
- jupiter
- aslan
- commodore
- falcon
- persepolis
- dharma
- samsara
- prodigy
- ethereal
- epiphany
- aurora
- oblivion


Zstyle configuration allows to customize the codenames:



```shell
zstyle :plugin:zuid codenames paper metal wood plastic # first 4 shells will have those codenames
```


## Install Zsh Unique ID

**The plugin is "standalone"**, which means that only sourcing it is needed (without using a plugin manager).


 So to install, unpack `zsh-unique-id` somewhere and add:


```shell
source {where-zsh-unique-id-is}/zsh-unique-id.plugin.zsh
```


to `zshrc`.


Sourcing is recommended, because it can be done early,
 at top of zshrc, without a plugin manager – to acquire the unique identification as early as possible.


### With [ZI](https://github.com/z-shell/zi)


Add `zi load z-shell/zsh-unique-id` to your `.zshrc` file. ZI will clone the plugin the next time you start zsh.

 To update issue `zi update z-shell/zsh-unique-id`.


### With Antigen


Add `antigen bundle z-shell/zsh-unique-id` to your `.zshrc` file.

 Antigen will handle cloning the plugin for you automatically the next time you start zsh.


### With Oh-My-Zsh


1. `cd ~/.oh-my-zsh/custom/plugins`
2. `git clone git@github.com:z-shell/zsh-unique-id.git`
3. Add `zsh-unique-id` to your plugin list.


### With Zgen


Add `zgen load z-shell/zsh-unique-id` to your .zshrc file in the same place you're doing your other `zgen load` calls in.