teleren/devto huggingface dataset:
Advent of code - day 6
Tags: functional, typescript, adventofcode
Published: 2022-01-08 06:47:41

This challenge is to create a state machine and find the end state after n iterations.

This seems like a perfect opportunity to dig deeper with the State Monad which i have been struggling with for a while. First, the interface which is 
```
// newtype State s a = State { runState :: s -> (a, s) }
interface State<S, A> {
  (s: S): [A, S]
}
```
A more accurate name for this would be State processor. The type S represents the state whereas the A represents some sort of interesting output from the State processor.

First, I create my nextFishState function which has the signature:
`nextFishState :: number -> [number]`. Now in my nextState function which has the singature: `nextState: S.State<number[], number>`, I use chain to apply the nextFishState function to every element in my number[].

Finally, i replicate the nextState function 80 times so that i can pass it to `sequeunce` so that it'll fit the shape required by `S.execute`.
``` S.execute(initial)(A.sequence(S.Applicative)(A.replicate(80, nextState)))```

This was okay with the small dataset however I suspect due to the eager evaluation of JS and the nature of A.sequence, my browser tab crashed on the input dataset. So, instead I'm going to use reduce instead:
```
pipe(A.replicate(80, nextState), A.reduce(initial, (state, f) => S.execute(state)(f))
```

Edit: I don't think the problem was due to using sequence or changing it to reduce. It may be something to do with console logging an array several hundred thousand long as the answer shows up before the tab crashes. Changing it to only print out the length of the array seems to work okay

Part 2:
Now we are assessing the number of fish after 256 days instead of 80, so only a simple change from 80 -> 256.

Edit 2: So it appears its not that simple as the brute force method is too slow and memory intensive. Instead, I am going to remodel my state to be an array where the index is the number of days left and the value is the number of fish with that index. The beauty of using the State monad pattern is that even though i have changed the representation of the State as well as the nextState transformation, the passing of one state to the next remained the same.


https://codesandbox.io/s/laughing-smoke-zehut?file=/src/index.ts
Angular Newbies V
Tags: angular, javascript, beginners, webdev
Published: 2022-01-08 06:40:31

## Angular CLI 

**What is Angular CLI ?**

The Angular CLI is tool that angular developers use to make it easy to create an Angular application that works and follows best practices right out of the box.
 
don't worry i'll make a series about the angular CLI, 
angular CLI helps to create every piece of angular application with one line like component, services, pipes, and so on.
 
Today's post is all about Creating Angular Components using Angular CLI.
 
as i mentioned in the first post you have to install Angular CLI on your computer to use it , if you don't have Angular CLI you can install 



```
npm install -g @angular/cli
```


this line of command will install angular CLI globally on your machine.
 
now let's go and make a fun of Angular CLI 
To create a new component go the folder of your angular application and type this command 

```
ng generate component ComponentName
```

Walaaaah ! that is it you just generated new component 
so let's explain what that line of code did 
first of all it will generate 4 files 

1. the template (.html) file 
2. the style (.css) file 
3. the component (.ts) file 
4. the test file

Also did register our component in the angular Module so we can use it's selector across our  application
easy isn't it !

so there are some flags you can add when generating new component using angular CLI , we'll learn the for the up comming series 

so let's see these two flags 
1. --skip-tests
2. -dry-run 

these two commands tell angular CLI to do some thing extra 

```
ng generate component componentName --skip-tests
```

it will skip the test file on the new component as we saw above the 4 files angular generats one of the was test file it will not generate a test file each time you use this flag 


```
ng generate component componentName -dry-run
```

this flag it shows you what this command do in the disk it will not create anything on your folder it will just show you the before -dry-run command what that command will do,

it just reports you what will happen and it will not create a single file on your disk 

general use case of this command is when you are not sure what this command will do  just test it with -dry-run and it will report you what would happen if this command is executed
 
don't worry if you did not understand clearly will talk about this commands in a separate  topics
 
i hope you found some thing useful here thanks for you reading
Leetcode Solution - Github automation
Tags: github, java, programming, leetcode
Published: 2022-01-08 06:35:45

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qg3vtc8skxl9yrxbnnda.png)
 
Hello everyone, I have found a awesome tool which automatically sync your leetcode solution to your github which I am personally using from many months.

Cons - Only available for chromium based browser.

Extension link - https://chrome.google.com/webstore/detail/leethub/aciombdipochlnkbpcbgdpjffcfdbggi

My leetcode profile - https://leetcode.com/devn007

My github repo to leetcode solutions (java) -  https://github.com/devn913/leetcode

My github profile - https://github.com/devn913

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0sbn80fm3y5af3eseu4.png)
Closure in Javascript
Tags: beginners, javascript
Published: 2022-01-08 06:35:23


Closure gives you a access to an outer function scope from an inner function.

Here some simple example:

```js
  function init(){
    let firstName = 'John';
    let lastName = 'Snow';
    function greeting(){ // inner function a closure
      return `Hello ${firstName} ${lastName}`;
    }
    return greeting();
  }
  init();
```

Here another example:

```js
    function myName(){
        let name = 'Herro';
        function displayName(){
            return name;
        }
        return displayName;
    }
    let myFuncName = myName();
    myFuncName();
    // Herro
```

Let's see what going on. myName() function is run and place inside myFuncName variable and become reference to displayName() function, dispayName() isn't invoke yet.
since displayName() has reference to myName() within which variable name exists, then "Herro" is passed when myFuncName() are invoke.
Star Rating part 2
Tags: javascript, html, css
Published: 2022-01-08 05:31:04

---
series: Start Rating
---
I have added event listener for events when the stars are clicked. It will color the stars when they are clicked.

All the stars on the left of the clicked star will be colored.

{% codepen https://codepen.io/Mrlallu/pen/MWEBRNe %}

So what do you think about my approach ?

- Referece 1: https://developers.google.com/web/fundamentals/web-components/customelements
- References 2: https://developers.google.com/web/fundamentals/web-components/customelements#attrchanges
[MongoDB Submission Post Placeholder Title]
Tags: atlashackathon
Published: 2022-01-08 05:24:22

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)


### Submission Category: 

[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)


### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note:] # Screenshots/demo videos are encouraged!

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly.)

[Reminder]: # (Submissions are due on January 13th, 2022 @ 11:59 PM PT/2 AM ET on January 14th, 2022/6 AM UTC on January 14th, 2022).
Day 73 of 100 Days of Code & Scrum: Project Page for My Portfolio
Tags: 100daysofcode, beginners, javascript, productivity
Published: 2022-01-08 05:17:20

Greetings, everyone!

Today, I finished adding individual pages for my projects, such as my [chat application](https://www.rammina.com/portfolio/amussement) and [to-do-list](https://www.rammina.com/portfolio/daily-quest). While they look decent enough, they could still use some improvements. One feature I would like to implement at some point is an image carousel, as that would look much more professional than just lining up images vertically.

![Rammina Amussement Page](https://cdn.hashnode.com/res/hashnode/image/upload/v1641618887074/vGcJrW7qE.png)

![Rammina Daily Quest Page](https://cdn.hashnode.com/res/hashnode/image/upload/v1641618952827/ufLH2NYCF.png)

I also started working on individual services pages for Web Development, Digital Marketing, and Writing. Currently, I am not sure what content I will put inside these pages and how to lay everything out that would convert a visitor to a customer. It might take me some time to come up with a final design.

Anyway, let's move on to my daily report!

## Yesterday

- I finished the mobile and desktop designs for my specific portfolio project page component.
- I read an article about Scrum, specifically, an example of a great facilitator and coach.
- also watched a video from Ahrefs about Domain Authority.

## Today

### Company Website

- finished creating project detail pages for my chat application and to-do-list app.
- add boilerplate for individual services pages (WIP).

### Scrum

- read this Scrum article, [Typical Sprint: Play-by-play | Scrum.org](https://www.scrum.org/resources/blog/typical-sprint-play-play).
- it's not really anything groundbreaking, and the stuff I've read were already in the [2020 Scrum Guide](https://scrumguides.org/scrum-guide.html), but I appreciate the extra examples.

Thank you for reading! Have a good day!

![Rammina Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ayfxxxaz2g2hfcqbsk.png)

## Resources/Recommended Readings

- [Typical Sprint: Play-by-play | Scrum.org](https://www.scrum.org/resources/blog/typical-sprint-play-play)
- [2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)

## DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!
Laravel for dummies
Published: 2022-01-08 04:19:07

I've previously stated that I know nothing about coding or websites, but I adore both. PHP is a new language to me. I'm not a big fan of WordPress, and I made the mistake of letting PHP get to my head. Now I'm stuck in Laravel with a template I bought for a project that has been sitting on the domain, and I only have about a day before I go insane. It will not allow me to login or use the eatures I bought it for. I have ben scammed twice now and so 30 dollars turn into 200 and well it is because I did something that I have no idea what it is. I was left in the cold by the person that sold it to me they wont help unless i pay then 400 on top of it all. I have a admin panel that i cannot install and it is needed for the project. need help
React Responsive Webiste with Animations
Tags: html, css, javascript, react
Published: 2022-01-08 05:17:04

## You can get the template from the link proivided in the description of the video.

### Technologies Used :-
+ REACT
+ SASS
+ Styled Components

### Libraries and Assets Used :- 
+ Styled Components
+ React Icons
+ Google Fonts
+ ScrollReveal

## To learn how to create this template watch the complete video. You can get the template for free from the link provided in the description of the video.

{% youtube 6oa_La0vGzQ %}

## Please do like the video and subscribe to the channel. It helps and motivates me to create more content like this.
Dev Log[1] - Front End Parts Put Simply
Tags: javascript, webdev, career
Published: 2022-01-08 05:03:32

## About
Being a front-end developer can feel really complicated at times for a newbie. It mostly comes down to **_HTML_**, **_CSS_**, and **_JavaScript_**. All of these individual pieces are important to learn and it really just takes time to feel comfortable with each one. 

Individually they're all programming languages, and a good bit of learning an actual language is understanding that their structure comes from an opinionated individual / group. _A lot of things are a certain way just because they decided it would be that way_. Being a front-end developer really drills down to those three basic parts. There are other tools attached, but a developer spends most of their time dealing with these basics. 


---

## HTML

The **_elements_** of a web page - an element is really just a piece of the web page in this case. A web page is like the finished puzzle, and the html elements are the individual pieces that make it up. Every one of these elements serve a specific purpose on the website. Obvious ones are video, image (\<img\>), and button elements. Then the not-so-obvious examples that are popular could be \<div\>, \<a\>, and \<p\> tags. It's important to get comfortable with these pieces and it just takes time. 

A lot of them have their own special **_attributes_**, which makes them even more interesting. An attribute pretty much gives these elements even more unique features. Some of them might even be **_CSS_** (Explained latere) styles. A good list can be found here at [W3Schools](https://www.w3schools.com/tags/default.asp)


---

## CSS

The **_styles_** of a web page - every page has those HTML elements, but this is where the true distinction happens by adding colors, changing the font, etc. HTMl elements are super boring without these extra styles. 

CSS can be real simple at times, but also really complicated. Getting started with HTML / CSS is easy. But mastering the two definitely takes time and experience. There is a ton that can be done with CSS, such as creating simple styles, animations, page layouts, and adjusting for design between mobile devices / a typical desktop PC.

---

## JavaScript

The **_logic_** of a web page - the truest programming language out of the three and the most powerful one that provides the most dynamic feel to a page. A lot can be done with JavaScript and it's impossible to list it all, but it's key to understand that JavaScript can do everything that CSS and HTML can do, plus more. 

Imagine a button being pressed on a web page, what happens next? Typically it's up to the added  JavaScript to decide that. Examples are creating more HTML elements or changing CSS styles on the fly. Or even perhaps taking the web page viewer to another page following an animation. 

Possibilities are almost limitless once the language is understood. Because of the amount of possibilities, it's pretty much impossible to perfect the language (especially when things are constantly changing), but one can get familiar enough to use it in any context through critical thinking and research.
Project 96 - React Native Star Wars App
Tags: reactnative, react, javascript
Published: 2022-01-08 04:37:45

*Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to the repo: [github](https://github.com/jwhubert91/project96_reactNativeStarWarsApp)

These *are* the droids you're looking for 😤

Turns out you can use the ES6 Fetch API in React Native. Pretty dope. 

Here's a link to the API: [Link](https://swapi.dev/)

![My React Native Star Wars character app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pmvu1a5uwuvsre60atd.png)

**If you like projects like this and want to stay up to date with more, check out my Twitter [@jwhubert91](https://twitter.com/jwhubert91), I follow back! See you tomorrow for another project.**
NiceSetup
Published: 2022-01-08 04:03:31

I'll be honest: this is probably one of the first times I've read rules that made me feel good about being on a platform. Without the  concern that if I don't know as much as others, it won't matter. For the past two years, being near a development platform has usually resulted in an attack within 5 minutes. I've counted to ten. I'm feeling good. While I am not very good with codes, I am very good with numbers. That is why I need wise people to advise me on what I am about to do.
Use Regex to match multi Kafka topics Grafana Dashboard
Tags: grafana, regex, kafka, monitoring
Published: 2022-01-08 03:41:30

In Grafana Dashboard, when we need to create a new Dashboard to show how many messages has produced by Kafka topics (with Kafka exporter + Prometheus) in a period, we can specify every topic as single metric like this below image

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onv93gwdo4ybpjmkoy98.png)

It works fine for sure! But what if you have more than 2 topics and your topics actually have the same pattern which could be matching by regex. The next time, if any new topic gets created, the dashboard will automatically reflect and show on the Grafana dashboard, then you don't have to do it as the “old” way.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v73jfsasd5qol77zxfmh.png)

Here is the query from image above
```
sum(delta(kafka_topic_partition_current_offset{job="kubernetes-service-endpoints",kubernetes_name="prod-global-kafka-exporter", topic=~"{{regex1}}", topic!~"{{regex2}}"}[1m])) by (topic)
```

- `{{regex1}}`: Replace with a regular expression to match any topic we want to show. Example: `prod-myservice.*`

- `{{regex2}}`: Replace with a regular expression to match any topic we want to avoid showing. Example: `prod-myservice.+deprecated.*`

A useful web tool to check if the regex could work is https://regex101.com/.

# Referenced sources
- Grafana: https://grafana.com/
- Prometheus: https://prometheus.io/
- Kafka exporter for Prometheus: https://github.com/danielqsj/kafka_exporter

Happy monitoring!
How to Lotify?
Tags: frontend, ui, adobe
Published: 2022-01-08 03:30:39

**What is Lottie?**
A Lottie is a JSON-based animation file format that allows designers to distribute animations on any platform just like static assets. They are tiny files that can be scaled up or down without pixelation and operate on any device.

---
![Lottifiels.com - A sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9a91pu2m5jg3olzh5wz2.png)

You have a Lottie or dotLottie format file. Let's get started on incorporating it into your website. This method may be applied to any webpage, blog, or platform that allows you to modify HTML.


## Insert a script tag into the LottieFiles web player component:

LottieFiles maintains the lottie-player> web component, which allows you to simply put a Lottie player anywhere else on your webpage by utilising our unique web component. To include the web component, copy the script URL for the player and paste it into the head> section of your page HTML (or anywhere on the page).

![lottiefiles workspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ro6sm754bcqklp1fq8b3.png)
 
This is how your workspace of lottifiles looks :)

![lottifiles workspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwpo3g6whzwa7kl0xdmf.png)

By clicking,**<HTML>** you will get the above interface where you get the JavaScript code for the above animation made using **Adobe After Effects**.

>Sample :
```
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_kyu7xb1v.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>
```
 

## Editing your **HTML** file with the JavaScript block from the Lottiefiles :

Here below, I have added the Lottifiles script in the Line 64 & 65

![javascript code in line 64 &65](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fsl8a26n2j6odqdgtqe.png)
 

 So by this way, you can add **Adobe After Effects** animations to your Webpages :)
Building an Email List with Hashnode
Published: 2022-01-18 18:42:34

---
title: Building an Email List with Hashnode
published: true
date: 2022-01-08 02:35:50 UTC
tags: 
canonical_url: https://blog.seancoughlin.me/building-an-email-list-with-hashnode
---

### Email Lists are Valuable Branding and Marketing Tool

The hardest part of being a writer, filmmaker, freelancer, or any type of content creator is making your content known. The world is so busy that gems can go undiscovered in the noise. A crucial part of getting the word out on your content is maintaining an [email list](https://en.wikipedia.org/wiki/Electronic_mailing_list). Email lists can be used as marketing tools to notify users and make sure your great content gets discovered.

Hashnode has a fantastic email list feature built-in. It handles collecting emails, maintaining the list, and sending emails all with just one button click.

### Enabling Email Collection on Your Posts

1. Open your Hashnode blog dashboard and navigate to the newsletter section in the left sidebar. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641609299127/J_RhOFQy0.png)
2. Check the `Enable newsletter service for your blog toggle`.
3. Done! Hashnode handles all the details and makes the process easy!

### How Reader Experience Being Subscribed to Your Email List

After you have enabled email collection a form will appear on top of your posts. The form will prompt users to input their email if they want to be notified when you post.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641607376816/kAFW1PFsS.png)

Once a reader inputs their email they will receive a verification link in an email. All emails are sent to users from _hashnode-username@mail.hashnode.blog_.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641608849601/jFvfHiLTc.png)

Hashnode will track metrics and the history of your newsletter. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641608249943/Cmn1Ogv-D.png)

As well as giving you an interface to manage the newsletter. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641608897366/TyAuKQo4x.png)

### Conclusion

In just a few clicks you can help expand your online presence and build a great marketing tool for your future content.