teleren/devto huggingface dataset:
Array Methods — Destructive vs Nondestructive
Tags: javascript, webdev, beginners, programming
Published: 2022-01-09 15:29:05

Working with data is a fundamental aspect of JavaScript. During my first phase at Flatiron School, I found myself using array methods in everything I did. Array methods could be pretty difficult to use, considering there were so many to work with, and they all did different things. There’s many ways we can group these methods, such as arguments and return value.
When working with arrays, we have to be careful and aware of which methods are destructive and which are nondestructive. Destructive methods are methods that return a mutated or altered array, and nondestructive methods return a new array.
Below we can see that after we use .push() on our array, we alter that array. This is destructive.

![code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqwgk8wq4wx5xrqxzbdg.png)
 
Below you can see that the spread operator can be used to make a copy of and avoid altering the original array. This is nondestructive.

![code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6x6zvenb1yd233vclux.png)
 
**When should we use a nondestructive method over a destructive method?**
We can use a nondestructive method when we want to preserve the data from the original array.
**Which methods are destructive?**
Destructive methods include .push(), .unshift(), .pop(), .shift(), and .splice()
**Which methods are nondestructive?**
Nondestructive methods include spread operator […] and .slice()
**Summary**
Be careful when working with arrays to ensure you don’t mutate data that you want to preserve.
Pycraft is now on Discord!
Published: 2022-01-09 15:23:20

I've created a Discord server for Pycraft, here is the link: https://discord.gg/buECXtjNhw, this will be the best place to get announcements about Pycraft's updates, share feedback, report bugs and suggest new features. 

Posts will still be shared both here and on twitter as normal, but also now on Discord. I hope you are having a pleasant day!
Store
Tags: atlashackathon
Published: 2022-01-09 15:13:39

### Product ordering store
[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.)

Site structure:

- item option photo directory
 
- ordering input zone
  - item information
  - prepare option
  - serving form
  - recipe addition
  - portion size
  - order request
  - direct visitor input 

- item order request

Visitor can order an item by site view access

### Contest entry type 

Adventure

### Repository

{% github https://github.com/musha635842/react %}

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

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

###
What is React JS?
Tags: react, javascript, programming
Published: 2022-01-09 14:54:18

## What is React JS
React JS is a JavaScript library for building UI with reusable components. It is an open-source, component-based and front-end library that is responsible only for the view layer of the application. Every part of a web application can be considered as a component. Most of the components are the same in design but different in data. So with React JS, it is quite easy to make our application dynamic and use the same component for all parts. It was developed by Meta(Facebook) and what's app, Instagram and Facebook also developed with React JS.
How to view HTML Code online?
Tags: html, beginners, webdev, javascript
Published: 2022-01-09 14:49:58

If you want to preview your html code output quickly then this article is especially for you because in this article i will show you how to view html code online from any device.

Today in this article i will introduce [HTML Viewer](https://goonlinetools.com/html-viewer/)


![Html viewer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmg0yytzfvgoot0hezk1.png)

## Here is How to view HTML Code?

1. First open [HTML Viewer](https://goonlinetools.com/html-viewer/)
2. Type or paste HTML Code 
3. See Instant HTML Preview Below
4. Click on hide code button to enable preview mode.

This tool also support code sharing feature. If you want to share your preview/code with friends then click on share code button. Please preview [code here](https://goonlinetools.com/html-viewer/?e=DwBwfAygFghgTgUwAQBcoEsDOSYFsYBe6AdgOZJQq4A2SAbuggO4JxJPppICeA9gK5sAZnEbEAJpmAB6cEA)

Thanks for reading this article, If you have any questions regarding this then feel free to ask in the comment box.
Symfony & Doctrine: Part 4
Tags: symfony, doctrine, php, beginners
Published: 2022-01-09 14:45:57

While developing a new app, we usually don’t have any data on DB, it’s common to add fake data to do our tests, either manually or using libraries. With Symfony we have a bundle called **“Doctrine Fixture”**, I tried it and below are my notes about it. 

To install it, use: `composer require orm-fixtures --dev`
New folder **“DataFixtures”** is created under “src”, it will contain PHP Classes where we create objects to persist into DB.
 
I like to keep things organized so I will create many fixtures classes instead of adding all dummy data to **AppFixtures** generated by default. 

In order to reuse objects across fixtures Classes we use **object References**(line 32 to 34) and we can get easily the reference in the 2nd Fixture Class (line 15)

![Category Fixtures](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wxyh8rmgc2zbbji23kt.png)
![Job Fixtures](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxvibfz1s4yx7mn0hqg7.png)
 
When using multiple fixtures, we need to specify the order in which fixtures will be loaded otherwise Doctrine will use the alphabetical order, which may result in errors if objects referenced are not yet created. To do so, we need to implement **DependentFixtureInterface** and then add **getDependencies()** to specify fixtures to load before. 
![Fixtures dependencies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4s2sdtrm4r4dkcetmo3b.png)
 
To add data to db, we run :  `symfony console doctrine:fixtures:load`

 I have also tried an other bundle that helps to generate dummy data instead of setting values manually (if you lack inspiration like me :D ) to add it : `composer require fzaninotto/faker --dev`

Once installed, we can use methods availables in this library to get a name, address, country, slug, numbers... It's awesome.  
Below my JobFixtures class after using this library
![JobFixtures using Faker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ig4hknhr41h4q2dja7a9.png)
 
more infos on the documentation : https://github.com/fzaninotto/Faker 

Thanks for reading :)
Refactoring #4: Using Minio to work with S3 buckets locally
Tags: s3, minio, webdev, refactoring
Published: 2022-01-09 14:35:14

You’ll often notice in various projects that code behaves differently depending on the environment. That is not ideal, as code should behave the same across all development environments. This way, it’s easier to debug issues, test, and refactor.

In our case, we stored uploaded images on an AWS S3 bucket on the production site. However, in staging, we stored them on DigitalOcean, and locally on the public folder, somehow. The code for that looked like this:
{% gist https://gist.github.com/GeniJaho/fe526f25650f78140d737d048dcfb959 %}
This is how we improved it.
##Install and configure Minio
[Minio](https://github.com/minio/minio) is an open-source object storage server with an Amazon S3 compatible API. If you’re using Homestead as your working environment, you’re super lucky; [Minio is pretty easy to install](https://laravel.com/docs/8.x/homestead#configuring-minio), barely an inconvenience. Follow the instructions on the Laravel docs above, and you should be ready for the next step.

![Minio Object Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/et7qk66chinpcenak2u9.png)
##Refactor the uploading code
Minio will allow you to work with the same ‘interface’ as S3 when uploading files. You only need to apply different configuration values to your environments. This is the Laravel way. This is the way xD. With that said, our code now looks like this.
{% gist https://gist.github.com/GeniJaho/4feb37957cb904275b89266e47b80a16 %}
##Two little gotchas
You might run into some issues on the first try. From the docs, you should be able to access Minio on `http://localhost:9600`. If that doesn't work, try `http://192.168.10.10::9600`, and also change the `.env` to `AWS_ENDPOINT=http://192.168.10.10:9600`.

Secondly, the docs say you should use the `'use_path_style_endpoint' => true` configuration. If you're not sure what that means, it will simply make your URLs look like this locally: `http://192.168.10.10:9600/bucket/image.jpg`. It will also make your URLs look like this on production `https://s3.eu-west-1.amazonaws.com/bucket/image.jpg`. You might not want that, especially if your previous images have another URL signature.

What worked for us was just removing the `use_path_style_endpoint` configuration key. This way, the URLs had their bucket name in the path on our local environments, and in the domain part on staging and production, like this `https://bucket.s3.eu-west-1.amazonaws.com/image.jpg`. And yes, you can also use DigitalOcean with the same configuration.

> The code used for illustration is taken from the [OpenLitterMap](https://github.com/OpenLitterMap/openlittermap-web) project. They’re doing a great job creating the world’s most advanced open database on litter, brands & plastic pollution. The project is open-sourced and would love your contributions, both as users and developers.

---
Originally published at [https://genijaho.dev](https://genijaho.dev/blog/using-minio-to-work-with-s3-buckets-locally).
My AI startup journey is full of battles. Giving users an option to answer in text I'm always trying to avoid.
Tags: ai, startup, architecture, programming
Published: 2022-01-09 14:27:05

If you've ever created an experience where your users need to write some information in plain text, I can image how shocking some values were. This story shows how users can complicate our lives, no matter how simple the task.

## The ask

We created an AI assistant that helped people with hypertension (high blood pressure) better manage their condition. It communicated with users through Telegram messaging app (it's really accessible, developer-friendly and stable, which is really important for a startup).

We needed to collect daily blood pressure & pulse values from our users. It would allow us to suggest the next best action (everything is great / values are high, try to relax / you should contact your doctor / you need to go to the emergency room). The only really accessible way for getting those values was by asking. I know, so primitive - but effective. The ask was simple: "Please send us our values (example: 120/60/60)"

## The harsh reality

The users followed the guidelines for maybe one day. Maybe! In less than 24 hours my beautiful implementation `[int(value) for value in text.split('/')]` fell apart.

Users started mistyping, and sending things like: "120.60/60" or "120 60  60". No problem, right? We can just find the 3 numbers in our text using regex and everything is ok. Something like this: `r"\D*(\d{1,3})\D*(\d{1,3})\D*(\d{1,3})\D*"`. Great thing about this approach was that it also covered messages like: "systolic: 120, diastolic: 60, pulse: 60".

And then, I lost my mind. Some users started sending: "On date 29.10.21 the pulse is: 120/60/60". Well, now we have to **guess** that something is a date, and the other thing is a pulse. Because as cardiologists will tell you, values 29/10/21 are technically possible. Good thing is, they are very rare. So we would just guess - if values are withing date range, it's a date.

And from that moment, all was good. Still some edge-cases appeared, but it worked for like 99.5% of the cases.

## Battles worth fighting

Months later we implemented a ML solution using [BERT](https://towardsdatascience.com/bert-explained-state-of-the-art-language-model-for-nlp-f8b21a9b6270). More for fun than anything else, because the added benefit was negligible.

Being part of the startup taught me there are a lot of battles that can be solved, just by investing time and effort. But a startup has very limited resources, and choosing to fight the wrong battles will get it killed.


-----

If you find my content interesting, follow me on [twitter](https://twitter.com/JurajMalenica). We can share half-baked ideas and discuss engineering challenges.
Branding a multitenated application using CSS
Tags: webdev, css
Published: 2022-01-09 14:20:43

A friend of mine had an interesting challenge. He wanted to have a public part of an B2B application brandable in the color of its customers and asked me how I would do it. This post describes what I told him.

The application basically is a simple form and a summary describing the data the user will submit.

## Base setup in the CSS

Use CSS variables for the colors and use them consistently where you want the brands colors to be applied. 

```css
:root{
  --brand-color-1:rgb(66,153,225);
  --brand-color-2:rgb(255,255,255);
}
```

I this case I created a themable button:

```css
button {
  background-color: var(--brand-color-1);
  border-color: var(--brand-color-2);
  color: var(--brand-color-2);
  border-radius: 3.5rem;
  border-style: solid;
  
  padding: 6px 10px 6px 10px;
}
```

Looks like this: ![Button with blue background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjr6i7blv4nqemdqo7va.png)

## Use CSS inheritance to override the color

In CSS properties are inherited from the root element to its child elements. 
In this case I would override it on body as I would like to have all elements using the overridden colors, eg like this:

```html
<body style="--brand-color-1: #48BB78">
``` 
![Button with green background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csce8ua46szeg7gtk07b.png)
 
Now you can override the color on the html using your web framework of choice.

If you are rendering on the server you should be aware of caching. You would probably like to cache by tenant and make sure you invalidate when changing the colors, but that is out of scope for this post.

If you want to play around with this solution I made a codepen: 
{% codepen https://codepen.io/ggmueller/pen/eYGLRrb default-tab=html,result %}

## Concluding

This is a solution by a backend developer :-). Do you know of a better solution?
Keto Diet Lib - a collection of food info and helpful tools for ketogenic patients
Tags: atlashackathon, flask, mongodb, javascript
Published: 2022-01-09 14:11:31



![Site Demo Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82pgwta86740rc6gqm05.gif)

### Overview of My Submission
**Keto Diet Lib** is an informative site with comprehensive data on foods and their nutritional values for ketogenic patients. 

It uses a combination of the [Atlas Search](https://docs.atlas.mongodb.com/atlas-search/) and **Aggregation Pipeline** to provide a simple but effective search engine that helps generate the list of data for the user.

The site also has a dedicated page for each food to display their fats, proteins, carbohydrates, and calories. Additionally, the page has tools that can help with the user's keto diet plan:
1. **Serving** - updates the nutritional values based on the selected serving option (ex. 1 cup, 4.2 oz) 
2. **Nutrient Comparison** - a pie chart that shows the division of fats, proteins, and carbohydrates
3. **Ketometer** - visual meter that informs the user the contents of the carbohydrates vs. the user's allowed carbohydrates consumption
4. **Keto Rating** - overall rating of the food in terms of how healthy it is for ketogenic patients

Lastly, the site also has a page that generates the top 5 data per food group with the highest fats and lowest carbs. The data are displayed in 100 grams.

### Submission Category: 
I'm submitting this entry for the **Choose Your Own Adventure** category.


### Link to Code

{% github https://github.com/netervati/ketodietlib %}


### Additional Information

Check this [link](https://ketodietlib.herokuapp.com/) for a live demonstration of Keto Diet Lib. Please, note that I'm using a free tier account to host this so you will experience slow response from the site.

*Search Results*

![Search Results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zjgn1w638qer1clg8y9.png)

*Data Page*

![Data Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr89bter72nzl9ua9idp.png)

*Top Food / Data*

![Top Food / Data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t19cfkyhvs8zv5ht4l7d.png)

*Search Operators Demo*

![Search Operators Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ov2mptsq26n3689l8jmg.gif)

### Technologies Used
- Flask
- Flask Pymongo
- Jinja
- Bootstrap
- Vanilla JS
- Chart.js
- MongoDB
- Atlas Search
- Gunicorn
- Heroku

### Resources
- [My Food Data](https://myfooddata.com/)
- [Nutrita](https://nutrita.app/)

## Conclusion
This was my first Hackathon (sort of since I joined 2 game jams before), my first use of MongoDB, and my first post in Dev. I joined late for this event, but I still had fun learning about the amazing tools the database has. Initially, I was hesitant to show this project because everyone else has complex and cool creations, but I think I did well for my first try. This was a great experience. To all participants, good luck!
Curso ReactJs do ZERO GRATUITO - Criando um BLOG
Tags: react, javascript, braziliandevs
Published: 2022-01-09 13:39:00

Que tal criar um blog com React do total zero, desde o create-react-app até a listagem dos posts ?
Se liga nesse curso que ta muito legal e é gratuito que eu gravei para vocês!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhw6pqxx6b4q80lqy2x7.png)
[Link do curso no Youtube](https://www.youtube.com/watch?v=uqNZfSHwE0c)
Leetcode diary: 1525. Number of Good Ways to Split a String
Tags: javascript, algorithms, devjournal, motivation
Published: 2022-01-09 13:27:16

This is a new series where I document my struggles of leetcode questions hoping seeing however small of an audience I get gives me the motivation to continue.  

I was thrown off by this question a bit, because it's supposed to be a medium difficulty and a DP question. It is not really either lol ...

Anyways, my thought process was like this:
1.) our goal is just to match left and right unique character number
2.) we can utilize sets to keep count of unique characters
3.) But that would not work for the right side, since we need to keep count of how many of each, when it reaches 0, we remove.
4.) so we'll just use a map to get the best of both worlds.
5.) now it's just a matter of splitting the string and iterate!

below is the actual code:

```
var numSplits = function(s) {
    const sSplit = s.split('');
    const leftSet = new Set();
    const rightMap = sSplit.reduce(function(map, letter){
        map[letter] = map[letter] ? map[letter]+1 : 1;
        return map;
    },{});
    
    let goodNum = 0;

    sSplit.forEach(function(letter){
        leftSet.add(letter);
        rightMap[letter]--;
        if(rightMap[letter] == 0) { delete rightMap[letter]; }
        
        if(leftSet.size === Object.keys(rightMap).length) {
            goodNum++;
        }
    });
    
    return goodNum;
};
```

the performance is really good since it's just O(n), there seems to be no trickery to this since a couple of posts in the discussion are basically the same.

Let me know anything on your mind after reading through this, THANKS!
Google Summer of Code
Tags: googlecloud, javascript, webdev, ope
Published: 2022-01-09 13:24:42

#### What is GSoC?
Google Summer of Code is a global, online program focused on bringing new contributors into open source software development. GSoC Contributors work with an open source organization on a 12+ week programming project under the guidance of mentors.
#### How it Works?
GSoC is open source program which is divided into different section, The first one is Apply project the program the Interested contributors propose a project to work on.
Next process is selected applications work with mentor for project code. The  Accepted GSoC contributors spend the summer coding with guidance from a mentor.
and the Last one is finalize and submission of project code for the world to use!
This is complete process about how GSoC works...!!
#### GSoC 2022
The official announcement of GSoC 2022 by google is announced on Wednesday, November 10, 2021 in which they explain about dates and schedule 2022 GSoC and updates in GSoC 2022.
#### Updates in GSoC 2022
GSoC is open for all 18 years above student or folks who self taught and excited to contribute in open source in last GSoC programs only university student take participation in GSoC from 2022 any folks can take participate in GSoC.
#### Get Started with GSoC
#####Organization : 
Apply to be a mentor organization and help bring in new, excited developers to your open source community!
Dates to apply: Feb 2022
#####Contributors : 
Spend your summer writing code for an open source software project!
Dates to apply: April 2022
[Read Complete article about GSoC 2022](https://opensource.googleblog.com/2021/11/expanding-google-summer-of-code-in-2022.html)

I am  sharing content related web development, graphic designing and content writing on twitter if you're getting this article helpful conn with me on [twitter](https://twitter.com/PatilGanesh1010).
Retro Computers and Games Museum | Wroclaw, Poland
Tags: javascript, react, python, gamedev
Published: 2022-01-09 12:55:15

This is a virtual-tour that I took with my wife - who is a great retro gamer  - to one of the most recommended places to visit by TripAdvisor : The Computers and Games Museum in Wroclaw, Poland.

We enjoyed everything from pictures hanging on the wall to Doom, Wolf, street fighter 1 , Mario, Donkey Kong and Space Invaders to the retro computer machines : Amiga, IBM, Atari, Commodore, Sinclair, Apple, Robotron, PET … etc.

It was a real journey to the past, I even got goosebumps when I stood before the Atari 600XL machine and in front of my eyes I saw scenes that happened 30 years ago in a different country, different time and different … everything basically where I was inserting the Missile Command cartridge in the slot, or putting the cassette into the cassette recorder and waiting to load for 30 minutes and sometimes there is an error after being seated next for long time and maybe it works and maybe not - a bug of some sort or a loading error - oh man, what great memories.

Enjoy the tour and feel free to subscribe in my channel :)
Thank You and have a blessed day.
{%youtube v65zPyfBmlU%} 

Facebook: https://www.facebook.com/profile.php?id=100073053935530
Instagram: https://www.instagram.com/theamirovichcorp/