teleren/devto huggingface dataset:
Summary of what I did so far
Tags: 100daysofcode
Published: 2021-03-03 14:55:56

I was inactive for a while here so I shall continue writing about it from the day I stopped posting i.e. day 35 from tomorrow.

Summary of what all I did in these days:
1. Participant in GSSOC 2021
2. Volunteered for preparing a ppt on "Basics of JAVA" for GirlsCodeIt
3. Star 2 at Codechef. I try solving questions on this platform now.
4. Registered for various upcoming events like Google Kickstart, Makeathon by American Express, Coderita 2.0 by GFG. 
5. For the upcoming events I have now switched to Leetcode.
6. Started working on my android application.
7. Participant in SpringOfCode by CodeWarriors.
How I learned React JS and React Native by building fun project
Tags: reactnative, react, javascript
Published: 2021-03-03 14:55:19

I have always wanted to learn React, but I never had the motivation the learn it, well, let's say I easily got bored 😑, but I had this idea of apps that I wanted to build and I thought that was going to be the best way to learn more about React and React Native!

<h3>Referencer App</h3> 

This app helps you cite a book, online article or any other source you used for your paper, using the Harvard referencing style. This app thought me how to use React Navigation, string manipulation, states, React hooks, etc
The name of the app is <a href="https://play.google.com/store/apps/details?id=com.kevilondo.referencer" target="blank"> Referencer-Harvard Style </a>

<h3>Super Hero Roster</h3>

This app gives you all the information you need about comic book characters. It uses an API called Superhero. Here is a link to the github repo, you are more than welcome to clone it and use it for learning purpose.

https://github.com/kevilondo/super-hero-roster

<h3>Quiz App for Naruto and Anime fans</h3>

I created this app to practice what I already learned so far with my previous apps, the only difference is that I built the API myself with PHP and Laravel. If you want to check it out,
The name of the app is <a target="blank" href="https://play.google.com/store/apps/details?id=com.kevilondo.shinobiquiz"> Shinobi Quiz </a>

I have learned a lot by building these apps, and I think this way of doing things is really good for those who are getting started in React and React Native development.

The moral of the story is, try to have fun while coding, build apps that might be useful to you, something you and/or your friends could use on a daily basis if possible. It will boost your confidence and help improve your coding skills.
What is Metaprogramming?
Published: 2021-03-03 14:41:13

**Concept:** Metaprogramming is writing programs that write programs! Sounds awesome right? Let's understand why metaprogramming is important. Take a look at the following code:
```ruby
class Cryptocurrency
  attr_accessor :name, :symbol, :current_price, :last_updated, :price_change_24h  

  def initialize(name:, symbol:, current_price:, last_updated:, price_change_24h:)
    @name = name
    @symbol = symbol
    @current_price = current_price
    @last_updated = last_updated
    @price_change_24h = price_change_24h
  end
end 
```
In this situation I have a Cryptocurrency class that initializes with a hash of attributes from CoinGecko's API and it works just fine. But what if they decide to change its API, we wouldn't be able to even create Cryptocurrency objects and our app will crash.
Luckily there's a solution for this problem, but first let's take a look at the `send` method. We can use it and simplify our code above with less code.
```ruby
class Cryptocurrency
  attr_accessor :name, :symbol, :current_price, :last_updated, :price_change_24h  

  def initialize(crypto_hash)
    crypto_hash.each do |key, value|
      self.send("#{key}=", value)
    end
  end
end 
```
What is going on here?
```ruby
self.send("#{key}=", value)
```
As we loop through each key value pair in our hash we use “message passing” to “send” a method to “self”.
How `send` method would look a like:
```ruby
self.name = value
self.name = "Bitcoin"
```
Now that we understand `send`, we can get into dynamically setting getters and setters. Let's first remember that `attr_accessor` is a class method just like `attr_reader` and `attr_writer`. So we can dynamically add getters or setters:
```ruby
class Cryptocurrency
  def initialize(hash)
    crypto_hash.each do |key, value|
      self.class.attr_accessor(key)
      self.send("#{key}=", value)
    end
  end
end 
``` 
By using *Metaprogramming* we can now get and set every attribute on an object instantiated from the Cryptocurrency class. 

**Reference:**
[Mass Assignment and Class Initialization](https://learning.flatironschool.com/courses/2610/pages/mass-assignment-and-class-initialization?module_item_id=147542)
From the idea to the side project
Tags: startup, petproject, projectmanagement, experience
Published: 2021-03-03 14:40:54

_(From my Medium - Jul 4, 2019)_

A few times in my life I had ideas of projects which didn’t want to leave my head either during at day nor at night. I haven’t finished any of them yet, but I’ve gotten a lot of valuable experience that I’m planning to use in the near future. Here are several things I have noticed.

I guess it’s not a secret to anybody that any project must start from [MVP](https://en.wikipedia.org/wiki/Minimum_viable_product). To do that you should imagine an application of your dream and then move all unnecessary features to the backlog. You can also compose a feature roadmap to specify iterations. Working on one of my projects I almost did it this way, but I ran into over-management — I started the project in Jira, created some releases, stories, sprints, etc. It was a huge mistake. I would recommend using a simple text file for a start. And the main point here is — you mustn’t be seduced to add any new features to your MVP, even if this feature is very small.

For instance, a simple desire to add nice small avatars for users may become a hard, long story about including third-party libraries, static files storing, validating of uploaded files and after all of that, you have to create crop image functionality. All the things that maybe not done mustn’t be done.

The second important point is the following: even if you managed to design minimum functionality and created a boilerplate of application it isn’t a victory yet. The situation when your free time for the project is not enough will come soon. You would like to relax sometimes at weekends but allocated two hours on a weekday may be wasted on ridiculous bug searching instead of development. That’s why it makes sense to take a break for a few months and work on your project in full-time mode. By the way, it’s a good possibility to check how powerful your faith in your own idea is. For example, my faith wasn’t strong enough in the last project.

And another paramount thing — the process can drag for a long time just because you may not know what to do next after the technical part of the product is finished. How to run the project in production, what are the markers of successful and unsuccessful launch, where I can get the investments? To get some orientation in the business part of products and get the basic knowledge about it you can go to a so-called “pre-accelerator”. There you will be able to meet with a curator who will help you with all these questions.

What’s next? I don’t know yet. But as soon I’ll know I will tell you.

Good luck with your ideas! 😉
Building in Public - Free Front End Coding Challenges
Tags: webdev, design
Published: 2021-03-03 14:37:49

# Backstory 

If you've read my blog post [7 Websites To Find Front End Projects For Your Portfolio](https://dev.to/moeminm/where-to-find-front-end-challenges-for-your-portfolio-23f0) — you've probably seen [Good Code](http://moeminm.github.io/goodcode/) on the list. That's my side-project that I've created a year ago but had to pause work on because of my military service. 

I'm now done with my military service and have resumed work on the project with so many exciting features and a rebrand. 

# Insights from Good Code

A few stats that I would like to build a hypothesis around and validate the idea.

![Screen Shot 2021-03-03 at 4.25.55 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614781581197/uehR7Y-Yu.png)

👉 With zero Marketing efforts, Good Code has been continuously receiving traffic. 

![Screen Shot 2021-03-03 at 4.26.48 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614781736634/VBOs_gHg-.png)

👉 With zero Marketing efforts, Good Code templates are downloaded at least 5 times a day.

![Screen Shot 2021-03-03 at 4.29.55 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614781814080/NqHi8F40d.png)

👉 With zero Marketing efforts, people are posting their solutions on Good Code for other people to view.

These insights are all great metrics to ascertain that the idea is validated and there is a market for this service, which is why I've decided to work on creating a full-fledged project with all the features necessary for the target user to benefit from.

# Features Being Developed

👉 Complete redesign and rebranding.
👉 Ability to post your own solutions and receive back right on the website.
👉 Slack channel for more communication amongst beginner developers.
👉 Subscription for full-fledged themes (think onboarding, registration, dashboards, etc) and source files.

# Rebranding Snippets

## Landing Page

![Landing Page.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614781943835/UMmjEQCwA.png)

## Challenge View

![screely-1614781998311.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614782016860/oWsIAtwA4.png)

# Updates

If you're someone who's constantly looking for more projects to work on, Codewell will provide lots of **free** high quality Adobe XD templates that you can use to sharpen your HTML and CSS skills. If you'd like to stay up to date with all the features being built and be notified when it goes public, be sure to subscribe to the newsletter  [here](https://codewell.substack.com/subscribe) and follow me on  [Twitter](https://twitter.com/MamdouhMoemin) .
A little dev secret: How to make a loading screen
Tags: webdev, tutorial, html, javascript
Published: 2021-03-03 14:34:13

When I go to a lot of websites, I see that they don't have a loading screen.  Why?  Because a lot of web developers don't know the secret.  They don't know the right time to put the loading screen in.

I want to share the secret with the DEV community.  A loading screen makes users feel like they don't have to wait as long staring at a white or blank screen for a while.

All it takes is some DOM, CSS, and two event listeners.
Okay, so first, style your loading screen with CSS and make it visible.  Try to animate it a bit.  Store the loader in a  single `<div>` tag.  Make sure it is not transparent and that it covers the whole screen.  You can add additional divs and elements inside.

Okay.  Now add an event listener to `document.documentElement` so that when the document element loads, the loader is shown.

```javascript
document.documentElement.onload = function(){
    document.getElementById("loader").style.display = "block";
};

//or

document.documentElement.addEventListener("load", function(){
    document.getElementById("loader").style.display = "block";
});
```

Your loader doesn't have to be hidden at default, just make sure it is shown once the document element is loaded.
Once the window (or all items in the document) are loaded, the `window.onload()` function will be invoked.

So when the window loads, hide the loader.

```javascript
window.onload = function(){
    document.getElementById("loader").style.display = "none";
};

//or

window.addEventListener("load", function(){
    document.getElementById("loader").style.display = "none";
});
```

I don't know how to display the load progress yet, but this is a good starter.

Now, test it out.  Your loader should be working.
You can check out a couple sites I made that have a loading screen:
 - https://leviathan-programming.cf
 - https://agapechiro-tx.com
 - https://grbc.leviathancoding.repl.co/

Like this?  You can [subscribe](https://leviathan-programming.cf/contact) to me at my [website](https://leviathan-programming.cf)

Thanks for reading!
Happy Coding!
Do we really use useContext() in React?
Tags: react, hooks, question, discuss
Published: 2021-03-03 14:32:19

It was once said that we either just React and state, or React with Redux or MobX, and that we really don't use Context.

The reason was that any change in Context may cause every single component to be re-rendered, versus, if we use Redux, then the global store passes the value in as props, so that only the "affected" components get re-rendered.

Is that still the case with useContext() or Context API?

I read the [React Hooks docs](https://reactjs.org/docs/hooks-reference.html) and it said that the 3 most used Hooks are `useState`, `useEffect`, and `useContext`, so it kind of get me puzzled that I thought Context is rarely used.
Integración Continua
Tags: testing, spanish, productivity
Published: 2021-03-03 14:26:14

La integración continua es una **práctica de desarrollo de software** donde los miembros de un equipo integran su trabajo con frecuencia, al menos una vez al día.

Cada integración es verificada por una compilación automatizada para detectar errores lo más rápido posible. Muchos equipos encuentran que este enfoque conduce a problemas de integración significativamente reducidos y permite que un equipo desarrolle software cohesivo rápidamente.

Hoy en día existen muchas herramientas de código abierto para trabajar con la integración continua. Por ejemplo, en nuestro último proyecto usamos [CI Travis](https://travis-ci.org/).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmpgam06r2qawffqlv89.png)

## Prácticas de integración continua

* MSSR (Maintain a Single Source Repository), esto significa que el proyecto completo debe estar todo en un repositorio.

* Automatice la compilación, utilice las herramientas gratuitas para que su trabajo sea más rápido y seguro.

* Haz que tu compilación se auto testee.

* Cuando trabajamos con un equipo, comprometernos todos los días con la línea principal de nuestros proyectos informa a los otros desarrolladores sobre los cambios. Por tanto, la ** Integración continua ** permite a los miembros del equipo conocer los cambios rápidamente.

* Repare las compilaciones falladas de inmediato. 

* Prueba en un clon de los entornos de producción..

* Automatizar despliegues.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bmgcaej0583w42dcx1t.png)

La integración continua puede reducir los riesgos, facilitar la búsqueda de errores y ayudar con la comunicación del equipo.

para obtener más información sobre Integración continua, sugiero leer a [Martin Fowler](https://www.martinfowler.com/)
Continuos Integration
Tags: testing, programming, productivity
Published: 2021-03-03 14:16:40

Continuos integration is a **software development practice** where members of a team integrate their work frecuently, at least one time per day.

Each integration is **verified** by an automated build to detect errors as quick as posible. Many teams finds that this approach leads to significantly reduced integration problems and allow a team to develop cohesive software rapidly.

Nowadays there are a lot of open source tool to work with continuos integration. For example,in our  last project we used [CI Travis](https://travis-ci.org/).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k40kj9bpn6ioqvbx8h1k.png)

## Practices of continuos integration

* MSSR (Maintain a Single Source Repository), this mean that the complete project should be all in one repository.

* Automate the build, use the free tools to make your work faster and safer.

* Make your build self testing.

* When we are working with a team ,commiting everyday to de mainline of our projects tells the other developers about the changes. So **Continous Integration** allows teammembers to know changes quickly.

* Fix broken builds immediately. 

* Test in a clone of the production enviroments.

* Automate deployments.


### Conclutions

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y9rhbcqa9rgadxd2k0m.png)

Continuos integration can reduce risks, make you find bugs easier and helps with the team comunication.



_for more information of Continuos Integration I suggest to read [Martin Fowler](https://www.martinfowler.com/)_
Matrix (and perlish) background effect in Javascript :)
Tags: perl, javascript, effect
Published: 2021-03-03 14:14:42

Today I have something *useless-but-cool* to show. 

My **Matrix-perlish background**! :sunglasses: :sunglasses: :sunglasses:

![Perl Matrix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gu4w7s5mytelczi5l1v.gif)

Check out my github page to see a [live preview](https://thibaultduponchelle.github.io/wawawa/pmtrx/) :grinning:

It's only a couple of lines of javascript derivated from the work that you can find [here](https://codepen.io/P3R0/pen/MwgoKv) or [here](https://codepen.io/wefiy/pen/WPpEwo) so I deserve absolutely zero credit but I simply modified it to make it appear *more perlish*! :+1:

(or ***p@r]i$%*** if you prefer :grinning:)



Below the full code:
```html
<html>
  <head>
  </head>
  <body>
    <!-- background animations -->
    <div class="div_bg">
      <canvas id="c"></canvas>
    </div>
    <script>
      var c = document.getElementById("c");
      var ctx = c.getContext("2d");
      c.height = window.innerHeight;
      c.width = window.innerWidth;
      var txts = "~!@#$%^&*)(_-=+;:{}[]|\/<>,.";
      txts = txts.split("");
      var font_size = 12;
      var columns = c.width / font_size;
      var drops = [];
      for (var x = 0; x < columns; x++) drops[x] = 1;
    
      function draw() {
        ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.fillStyle = "#000";
        ctx.font = font_size + "px arial";
        for (var i = 0; i < drops.length; i++) {
          var text = txts[Math.floor(Math.random() * txts.length)];
          ctx.fillText(text, i * font_size, drops[i] * font_size);
          if (drops[i] * font_size > c.height || Math.random() > 0.98) drops[i] = 0;
          drops[i]++;
        }
      }
      setInterval(draw, 20);
    </script>
  </body>
</html>
```
Stop coding your own html emails. I created a no-code email template builder.
Tags: showdev, javascript, html, saas
Published: 2021-03-03 14:03:37

Hi Devs!

I wanted to share a no code email template builder I'm creating as part of my larger project [PostHeat](https://postheat.com), a platform for building (and sending) email.

I started this project because I always had a really tough time building emails for my past side projects. I kept running into style issues on different devices, and I could not find an existing tool where I could both build an email template, and write the email in the same screen with a clean and easy UI.

**So I decided to build such a tool for myself...**

I realized that this is a larger problem for devs in general, and that it has several sub-problems:
1. Not all devs are good designers (I fall into this category), so designing an email layout can be difficult
2. Many devs would rather spend time coding than designing an email
3. Tweaking css to get html emails to look good is a pain in the butt
4. Existing solutions don't solve these problems in an easy way, many of them are a pain to use due to bad UI/UX

I'm hoping that I can solve all of these issues with a single What You See Is What You Get (WYSIWYG) email template builder and editor that devs can use to build great looking emails fast.

The most relevant feature to devs is a direct HTML export button, so that after an html email is created, the html can be copied with single click.

I hope this will make many devs lives easier, and help them to build html emails faster and with less headache!

I'll stop talking here, you can probably best **see what I'm talking about by trying it out for yourself**:

1. Go to [postheat.com/create](https://postheat.com/create) to access the editor

2. Build a great looking email, then click on the **</>** button to get the html for the email you just built.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vlzj2zhl51nwliojn1u.png)

3. Copy the email html and paste it into your own projects!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4ftj9plwma5s5ej3r0b.png)

I hope you find this useful! Any feedback on how I can improve the html email builder is greatly appreciated!

Thank You!
TB
Beginner looking for a community
Tags: beginners, webdev, firstpost, codenewbie
Published: 2021-03-03 13:49:28

Hi! I've been learning web programming on my own for almost a year. It has been a very interesting journey, filled with ups and downs, especially because I didn't know where to start and wandered around for a long time.

Now, I finally feel like I'm on the right track and this makes me very happy, however, I do feel a bit lonely. I really want to be part of a community where I can share my thoughts and insecurities about being a self-learner. And most importantly, interact with others that are going through the same.

Recently I completed the Responsive Web Design Certification on freeCodeCamp and I'm currently on the JavaScript one.

I hope I can meet some new people here :)
Nevertheless, Silvia coded. Because why not?
Tags: wecoded
Published: 2021-03-03 13:31:02

My story is a bit boring: I've (almost) never had the feeling that somebody treats me different in tech because I'm a woman. Sadly there are a lot of stories which are different from mine and not positive at all.

## My way to Tech

I grew up playing with lego and with dolls. I always could be more creative with lego, and that's why I chose to work in tech in the end. It gives me the possibility to be creative and at the same time I have some boundaries that prevent me from losing sight of what's currently important.

When choosing what to study at university, I was aware that there are a lot more men than women in tech. And in my group that was also true: We started with 3 women and ~90 men. At the end of my Bachelor's degree I was the only woman. But: for men it was the same dropout rate. At the end we were 30 people in total.
I never had the feeling that professors or other students treated me differently. The only difference was that my name usually was the first one my professors remembered. If that's good or bad is in the eye of the beholder.

## Status quo

I had situations in my job where I worked in teams with about half of the team being women and in teams where I was the only woman. I wouldn't say one is better than the other, it's just different.

Some years ago I spoke with a colleague about International Women's Day where I mentioned that I would also like to do something fun on International Men's Day. He answered me that that's not necessary, because the other 364 days of the year are in the hands of men. He didn't say that in an overbearing tone, but very cautious and in a low voice, as if he waited for my approval and this was the correct answer to give me.
This made me incredibly sad, because that's not the reality which I live in and want to live. We should all be proud of ourselves and each other and our differences. Since then I always make a cake on that day and bring it to work.

Recently I had the first situation at work where I felt like one person didn't respect me because of my gender. This was not nice at all and made me feel very angry. It turned out that I was wrong: This person not just disrespected me, but my whole team, so also my male team members. Still not a great situation, nevertheless I was feeling slightly better when finding that out. 
At the time where I still wasn't sure about my feelings and told people in my team and around the team about it, they immediately said they are there for me if I need help to manage that situation.

And that's what it should be all about for me: To be taken seriously, in daily work life and if there's a problem. This situation made me very thankful for the awesome people I currently work with.