teleren/devto huggingface dataset:
Creating a Scrolling Animation for Apple AirPods
Tags: ux, uxdesign, javascript, webdev
Published: 2023-04-27 18:31:01

Hey coders!
This is a good one for those who have started their UI/UX design journey with HTML, CSS and JS.

So let me walk you through the process of creating a beautiful scrolling animation for Apple AirPods using HTML, CSS, and JavaScript [video below btw :))].
This animation is a fun and engaging way to showcase Apple's iconic earbuds, and it's sure to impress your audience. Let's dive in!

Here's the video, if you want to check it:
{%youtube BY7GayueTk0%}

HTML
First, let's start with the HTML code. We have a basic HTML5 document structure with a title tag and two links to our CSS and JavaScript files. In the body, we have a canvas element with a class of "airpod-scrolling". This canvas element will be used to display our animation.

CSS
Next, we need to style our HTML elements with CSS. We set the height of the HTML and body elements to 100vh and 400vh, respectively, to give us enough space to scroll. We set the background color of the body to black to create a sleek look. Finally, we position our canvas element in the center of the screen using absolute positioning and transform.

JavaScript
Now, we come to the most exciting part of this project, the JavaScript code. First, we declare some variables, including the HTML element, the canvas element, and the context object of the canvas. We also declare the current frame function, which takes an index as an argument and returns the URL of the corresponding frame image.

Next, we declare the frame count variable, which is the total number of frames in our animation. We set the height and width of the canvas element to match the size of our frames. We create a new image object and set its source to the first frame in our animation. We then draw this image on the canvas.

The updateImage function updates the image on the canvas based on the current frame index. We calculate the frame index based on the user's scroll position and request an animation frame to update the canvas.

Finally, we declare the preloadImages function, which loads all the frames of our animation into the browser's cache. This function is called when the page loads to ensure smooth performance during the animation.
Coding is Fun, so keep coding, keep learning and I will see you next time :)
Gamification content ideas for programmers?
Tags: webdev, javascript, programming, devops
Published: 2023-04-27 18:28:03

I need to develop an editorial gamification content strategy addressed to programmers. 

The platform I’m working on doesn’t allow for anything other than HTML, so playing with stuff like flip cards or other animations is not doable. 

It needs to be strictly editorial and common themes will be microservices, js libraries, coding, infrastructure etc., basically anything hot in the IT world. I’m open to ideas.

As programmers, what would you like to take part into?

Thanks in advance!
LookUp Table Pattern Javascript
Tags: javascript, designpatterns, webdev
Published: 2023-04-27 18:24:57

The LookUp Table Pattern is a design pattern that can be used to map keys to corresponding values. This is particularly useful when we have a large number of keys and want to quickly retrieve the corresponding value.

In the context of JavaScript, a LookUp table can be implemented using an object literal, where the keys represent the keys of the table and the corresponding values represent the values. This way, we can quickly retrieve the corresponding value for a given key.

For example, imagine we have a list of fruits and need to categorize them as sweet or citrus. We can create a LookUp table that maps the fruits to their respective categories. This allows us to quickly categorize a fruit, instead of writing a large number of if/else or switch/case statements.

Moreover, using a LookUp table makes our code more readable and easier to maintain. We can easily add new keys and values to the table without having to modify the function logic.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyqjuq2iko6a6qlf199b.png)
Javascript Indexing Pattern
Tags: javascript, designpatterns, performance
Published: 2023-04-27 18:13:52

I'm going to start a series of posts about Javascript with some Patterns to share knowledge.

Here's the first Pattern.

The Indexing Pattern is a design pattern that allows easy access to elements in a data collection using a numeric index. In JavaScript, arrays are one of the most common data structures that use the indexing pattern, but we can also use literals, Maps, Sets, Classes with Static Attributes, etc.

It's common that when comparing arrays, we often increase the spatial complexity of the code...

The ideal way to handle this is to use this Pattern. Viable options are Literals, Maps or Classes with Static Attributes.

With this, we can reduce spatial complexity, which can scale exponentially when we chain for loops. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vn3fzmrdzf4cu795315.png)
Elixir: The Study map
Tags: programming, elixir, beginners
Published: 2023-04-27 18:10:37

Since September 2022, I've been studying and practicing the Elixir programming language. In this post, I will share my approach to learning this new language.

## This is the way

Learning a new language is a subjective and personal experience, and I will share my approach so that you can have a baseline or even compare it with your own. There is no "right way" to do it.

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

1. Create a map: In this step, I conducted online research to find references that I could use to learn Elixir. I categorized these references according to their depth and level of difficulty using numbers (1 for basic/beginner and 2 for something specific/intermediate).
2. Use one reference at a time: For example, I began reading "Learn Functional Programming with Elixir" by Ulisses Almeida and avoided reading other books until I finished it.
3. Practice, practice: Nowadays, this step is easy because we have amazing content, and most of it is free. However, the difficult part is to stay focused.

## The challenges

I faced several challenges during my journey to learn Elixir:

* Focus: Learning a new language is like building a house. Focus on the language's foundation because a good foundation helps you learn more advanced topics naturally.
* Balancing theory and practice: It is easy to get lost in theory without applying what you have learned to practice. Conversely, it is also easy to jump straight into building projects without fully understanding the underlying theory. Finding a balance between the two is key to mastering a new language.
* Overcoming frustration: Learning a new language can be frustrating, especially when faced with errors and bugs that you do not know how to fix. Remember that this is a normal part of the learning process and keep pushing forward.

Here is the Notion page with the study map: [Elixir Study Map](https://www.notion.so/fabricioffc/Study-Map-8b500c18d8d64107974cf2de595515ff?pvs=4)
Mi experiencia aprendiendo a programar desde cero
Tags: webdev, programming, principiante, learning
Published: 2023-04-27 18:06:38

Cuando decidí aprender a programar, no tenía idea de por dónde empezar. Como **ingeniera en alimentos**, estaba acostumbrada a trabajar con fórmulas y estructuras moleculares, pero nunca había escrito una sola **línea de código** en mi vida. Sin embargo, sabía que quería aprender y estaba dispuesta a hacer todo lo posible para lograrlo.

## ¿Cómo empezar?
Lo primero que hice fue buscar recursos en línea. Encontré muchos tutoriales y cursos gratuitos, y comencé a leer y ver videos para entender los **conceptos básicos de la programación**. Aprendí sobre variables, bucles, condicionales, funciones y mucho más. Al principio, todo parecía abrumador, pero poco a poco fui comprendiendo cómo se conectaban las diferentes partes de un programa.

Después de varios días de aprendizaje autodidacta, me di cuenta de que necesitaba más estructura en mi proceso de aprendizaje. Así que me matriculé en un curso en línea sobre programación web y comencé a seguirlo paso a paso. El curso me ayudó a entender mejor cómo se aplicaban los conceptos de programación a la construcción de **sitios web**.

## A lo largo del tiempo
Con el tiempo, comencé a construir pequeños proyectos por mi cuenta. Empecé con proyectos simples, como una lista de compras o una calculadora básica. Pero a medida que mi confianza crecía, empecé a trabajar en proyectos más complicados. Un proyecto que me resultó especialmente gratificante fue la creación de una aplicación web para la detección de rostros en imágenes pues use herramientas como REACT que me permitían crear aplicaciones web con mayor facilidad.

En resumen, aprender a programar ha sido un viaje emocionante y desafiante para mí. Al principio, parecía un camino difícil de recorrer, pero poco a poco fui comprendiendo los conceptos y aplicando lo que aprendía. A medida que ganaba experiencia, me sentía más segura y capaz de construir cosas nuevas. Si tú también estás empezando en el mundo de la programación, **mi consejo es que te tomes tu tiempo para comprender los conceptos básicos, busques una estructura de aprendizaje que se adapte a tu estilo y que practiques tanto como puedas**.

**¡Verás que, con esfuerzo y dedicación, puedes llegar muy lejos!**
🚀 Kotlin: Why It Should Be Your First Language and the Key to Unlocking Higher Earnings 💰
Tags: beginners, kotlin, programming, career
Published: 2023-04-27 17:56:11

Embarking on a programming journey can be both thrilling and daunting. Choosing the right language is crucial for your success and happiness. Today, we'll explore why Kotlin should be your first language, and how it can lead to higher earnings compared to JavaScript developers. 🌟

## 🥇 Kotlin: A Language to Fall in Love With ❤️

Kotlin's expressive and concise syntax makes it an ideal first language for beginners. It has a gentle learning curve, allowing you to focus on understanding programming concepts without getting lost in the complexities of the language. As an added bonus, Kotlin is fully compatible with Java, which means you can easily dive into the world of Android app development!

## 🌟 Kotlin vs. JavaScript: Higher Earnings and Job Opportunities 💸

On average, Kotlin developers earn more than their JavaScript counterparts. According to recent surveys, Kotlin developers' median salary surpasses that of JavaScript developers. This is due to Kotlin's increasing demand in the mobile app development market, as more and more companies adopt it for their Android projects.

## 🔥 Kotlin's Features: The Best of Both Worlds

Kotlin combines the best features of both object-oriented and functional programming paradigms. It has robust support for:

- Null safety - Say goodbye to those dreaded NullPointerExceptions! 🚫
- Extension functions - Easily extend existing classes without modifying their source code 🔧
- Smart casts - Kotlin's type inference system simplifies your code and reduces verbosity 🧠
- Data classes - Generate boilerplate code for your classes with just a single line ✨

## 🌐 Kotlin Multiplatform: One Language to Rule Them All

Kotlin Multiplatform allows you to write shared code for different platforms, including Android, iOS, Web, and more. By learning Kotlin, you'll be equipped to build cross-platform applications, making you an invaluable asset to any development team.

## 📚 Kotlin: Backed by a Strong Community and Resources

Kotlin is supported by an active and growing community, ensuring you'll find a wealth of tutorials, resources, and libraries at your fingertips. Google has also officially endorsed Kotlin as the preferred language for Android app development, guaranteeing its continued growth and relevance in the tech world.

## 🎉 Conclusion: Kotlin, Your Gateway to Success!

It's time to embrace Kotlin as your first language and unlock the doors to higher earnings, better job opportunities, and a more enjoyable coding experience. With its expressive syntax, robust features, and multiplatform capabilities, Kotlin has everything you need to launch your programming journey with confidence. So, what are you waiting for? Dive into the world of Kotlin and start building your dream projects today! 🚀

If you enjoyed this blog post, don't forget to follow me for more engaging and insightful content! 😃👍
Building a High-Performing MLOps Team from Scratch - Lessons Learned and Best Practices 🔧🚀
Tags: discuss, career, learning
Published: 2023-04-27 17:45:09

In the ever-evolving world of machine learning (ML), having a robust MLOps team is crucial for implementing ML solutions. This post will share how I built an MLOps team from the ground up, without HR support and with just one operations manager's assistance. In only eight months, we grew the team to eight members!

## The Journey

When I was promoted to a director role, I had to start recruiting after two months in my new position. My goal was to hire people from Africa, as they best understand the context in the countries we work in. Twitter was my main platform for reaching potential candidates, and I tagged all influencers and groups from the continent. The response was overwhelming, with 80 applications received within the first three days.

## The Talent Hunt

While I wanted data engineers, budget constraints led me to seek data analysts with a passion for data and a growth mindset. This mindset indicated their potential to develop the required skills over time. Though candidates might not possess all the necessary skills immediately, their strong desire to grow in that direction was enough for me.

## The Screening Process

Screening all candidates was a monumental challenge. I conducted several rounds of evaluations, and during the second round, I identified applicants who would become longstanding members of my team. My interview process began with initiating conversations with promising candidates before presenting them with a technical and theoretical assignment.

The theoretical part involved brainstorming methods for matching two disparate datasets, providing insight into their problem-solving abilities and creativity. The technical assignment was intentionally kept simple, allowing candidates to showcase their expertise in various areas such as analytics, programming, system design, and more.

## Lessons Learned

One significant lesson I learned is the importance of communication and treating all applicants with consideration. I regret not having enough time to update all the candidates on their status, and this still haunts me in Glassdoor reviews. 

## Conclusion

Building an MLOps team from scratch can be a challenging endeavor, but with determination, well-thought-out strategies, and an emphasis on a growth mindset, it is possible to develop a high-performing team. 

If you have faced similar challenges while building an MLOps or data team, or if you have used specific strategies and best practices, please share your thoughts in the comments below.
Day 1
Tags: python, list, regex, 100daysofcode
Published: 2023-04-27 17:30:31

Sooo, today was the first day of my coding challenge. I just complete solving 5 verryyyy basic questions as I'm sooo out of practice. 

I solved leetcode regex questions and questions or list, dictionary from hackerank so I can't post my code. Solving them took quite a while. 

But in the end I passed today. Let's see how tomorrow goes. 

#GoodNight
UPD! react-native-device-country package
Tags: reactnative, mobile, opensource
Published: 2023-04-27 17:22:47

:zap:Hey guys! There's been a recent update to iOs. And we had to!! 

We used to use the [CTCarrier class](https://developer.apple.com/documentation/coretelephony/ctcarrier) in our **react-native-device-country package** to get the country code, but with the release of iOS 16.0 it became deprecated with no replacement options, so we had to give up some of the functionality. 
If you use our package don't forget to update to the latest version [here](https://github.com/dev-family/react-native-device-country).:zap:
Some of the ways to stop procrastinating.
Tags: motivation, productivity, career
Published: 2023-04-27 17:16:18


1. Tackle your most important task for 15 minutes. Set a timer and just get started. This will help you overcome the initial resistance and inertia. You might find that you can work longer than 15 minutes once you get into the flow.

2. Break tasks down into small chunks. Divide your big project into smaller and manageable steps. This will make it less overwhelming and more achievable. You can also reward yourself after completing each step to keep yourself motivated.

3. Start your day with the hardest tasks. Do the most difficult or unpleasant task first, when you have the most energy and willpower. This will give you a sense of accomplishment and free up your mind for the rest of the day.

4. Give yourself a pep talk for motivation. Use positive self-talk to encourage yourself and boost your confidence. Remind yourself of your strengths, your purpose, and your benefits of completing the task. You can also use affirmations or inspirational quotes to inspire yourself.

5. Remove distractions from your work environment. Turn off your phone, close your browser tabs, or find a quiet place to work. Distractions can easily tempt you to procrastinate and waste time. By eliminating them, you can focus better on your task.

These are some of the tips that might help you stop procrastinating. However, different methods work for different people, so you might need to experiment and find what works best for you.
Data science Project Lifecycle
Tags: datascience, machinelearning, beginners
Published: 2023-04-27 17:06:31

1. Understand Business Requirement: Define the problem statement and understand the customer's business use case. The primary motive should be adding value to customer's business by helping them make best decisions.

2. Data Acquisition: The process of data acquisition is mostly Extract, Transform and Load(ETL). The major sources of data is/are databases, data warehouses, log files, Hadoop/spark systems. Most of the time, SQL is used to load/processing of data is done using SQL.

3. Data Preparation: This step involves data cleaning and pre-processing.

4. Exploratory Data Analysis(EDA): After data preparation, in this step we plot the data, visualize the data using various visualization techniques. In this step, we deep dive into each feature/columns present in the dataset to understand the features that contribute more towards achieving our goal.

5. Modeling, Evaluation and Interpretation: Modeling deals with building various models like regression, classification, clustering, etc that suits the given business problem. Evaluation is defining the KPI, that is the performance metrics for our model(s) are defined in this phase for best results/predictions. Model interpretation at heart, is to find out ways to understand model decision making policies better thus giving more transparency to the users of the application.

6. Communicate/Document/Publish results: Showcase the results to stakeholders and higher-management to get a go-ahead for model deployment.

7. Deployment: This step is usually done by Software Development Engineers, Machine Learning Engineers and sometimes by Distributed System Engineers.

8. Real-World Testing(A/B Testing): The real world testing deals with verifying the results of data analysis, models we have obtained are really meaningful in the production environment. In this phase we measure the true business impact.

9. Customer/Business: In this step, we showcase the experimental results we have achieved to the customer/business and convince them of the solution we have developed for the business use case and the value the solution adds to their business.

10. Operations: This phase deals with retraining the models, handling failures in the model, and defining an entire process of how to retrain the model and handle model failures. This is called operationalization of models.

11. Optimization: This step is a continuous improvement phase. Here we try to improve the model(same model or different model), acquire new/more data, adding more features, improving/optimizing the production code.


P.S: The above steps in the life cycle of a Data Science project may differ/include/exclude one or more steps depending on specific business use cases, timelines, business processes etc.
ChainFury- Create LLM ChatBots in 4 clicks!
Published: 2023-04-27 16:47:48

Introducing [ChainFury](https://github.com/NimbleBoxAI/ChainFury) - the ultimate tool for developers, data scientists, and researchers to build and deploy AI chatbots with ease! ChainFury is a robust platform that harnesses the full potential of LLMs (large language models) and allows you to easily chain together prompts, utilities, and agents to create complex chat applications.

> What makes ChainFury so unique is its user-friendly interface, which makes it incredibly easy to manage prompts, chains, agents, and memory modules, even if you're new to the world of AI chatbots. With ChainFury, you can create customized chatbots that can summarize long pieces of text, answer questions over specific data sources, all with the help of LLMs.


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

But that's not all - ChainFury provides invaluable insights into your chatbot's performance through detailed feedback monitoring. You'll be able to see chatbot statistics and feedback metrics in your dashboard, so you can make informed decisions about improving your chatbot's interactions.

Installing ChainFury is a breeze, with two easy methods available. You can use Docker to run ChainFury with just a few simple commands or install it manually by building the front end and running the back end separately.

If you don't want to go through the process of installing the app, you can try out the application here -> [ChainFury 🦋 ](https://chainfury.nbox.ai/)(I'll add the link again at the end so you can continue reading.)

> On launching the platform, you will be able to effortlessly create your very own chatbot in 4 clicks ⚡️

You can choose from one of the pre-configured chatbots, which are equipped with a wide range of features and functionalities, or you can use the platform's easy-to-use elements to create a custom chatbot that suits your requirements.

Steps to create a chatbot-
1. Click on "New Bot"
2. Click on "Create from Template" and enter a name for your bot
3. Click on "Create" to start creating your ChatBot
4. You will be directed to the screen below. Click "Save" to complete your chatbot creation!

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



Once your chatbot is up and running, you can start chatting with it right away simply by clicking the chat icon at the bottom right. You'll be amazed at how easy it is to engage with your chatbot and drive your conversations in an intelligent and responsive way.

Made by the problem solvers at [NimbleBox.ai](https://NimbleBox.ai), ChainFury is the perfect tool for anyone who wants to tap into the full potential of LLMs and use them to create amazing chatbots that can do so much more than respond to simple commands.

Here's the link to try it out again-> [ChainFury 🦋](https://chainfury.nbox.ai/) but before you go 👇
Give us a ⭐️ on [this GitHub repository](https://github.com/NimbleBoxAI/ChainFury) to show some support. ❤️ Thanks!
Payments 101 for a Developer
Tags: rust, opensource, api
Published: 2023-04-27 16:40:22

[Suppose you are a rookie developer in the payments team of an online business or a payments service provider (PSP), it could be frustrating to encounter your team members using various payment terminologies in every conversation. Here is a high level summary to be prepared for such a situation.](https://github.com/juspay/hyperswitch/wiki/Payments-101-for-a-Developer)