teleren/devto huggingface dataset:
React Native App using Realm Database
Tags: react, javascript, reactnative, realm
Published: 2022-01-01 07:13:49

## ** Create a Database Schema 
**
**Folder ./Db/Schema.js
**

```
export const TodosSchema = {
    name:'Todos',
    properties:{
        _id:'string',
        title:'string',
        completed:'bool'
    },
    primaryKey:'_id'
}

```
## **App.js**


```
import React, {useEffect, useState} from 'react';
import {Button,ScrollView,StyleSheet,Text,View} from 'react-native';

import Realm from 'realm';
import {TodosSchema} from './db/schema';
import {nanoid} from '@reduxjs/toolkit';

```

## Declareations States 

```
let realm;

const App = () => {
const [data, setData] = useState([]);
 

```

## create realm instance on app launch

 

```
 useEffect(() => {
    const getRealmInstance = async () => {
      try {
        realm = await Realm.open({
          path: 'myrealm',
          schema: [TodosSchema],
        });
      } catch (e) {
        console.log(e);
      }
    };
      let todos = realm.objects('Todos');
      setData([...todos]);
    getRealmInstance();
  }, []);

```
 

##  //CREATE DATA In Object

```
  const createData = () => {
    realm.write(() => {
      realm.create('Todos', {
        _id: nanoid(),
        title: 'this is ui',
        completed: true,
      });
     
    });   

```

## **  Single Read**
```
let  item =realm.objectForPrimaryKey('Todos','id');
console.log(item)
```
## **UPDATE DATA
**  

```
const UpdateData = id => {
    realm.write(() => {
      let data = realm.objectForPrimaryKey('Todos', id);
      // data.title = 'SDM';
      data.completed = true
      // console.log(data._id)
      console.log(data);
      // realm.delete(data)
      
    });
    
  };

```
 

##  DELETE Function

```
const (DeleteTodo)= id => {
    realm.write(() => {
      let deletedata = realm.objectForPrimaryKey('Todos', id);
      realm.delete(deletedata);
    });
    
  };`

```
  

```

return (
<View>
<TextInput style={styles.input}  placeholder="title " />
<Button onPress={createData} title="Add Tasks..." />

<ScrollView>
{data.map(item => (
<View key={nanoid()}>
   <Text>{item.title} , {String(item.completed)}</Text>
   <Text>{item._id}</Text>
<View>
   <Button onPress={UpdateData(item._id)} title="Edit" />
   <Button onPress={DeleteTodo(item._id)} title="Delete" />
</View>
</View>
))}
</ScrollView>
 </View>
  );
};

export default App;

```
```

```
`const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});`


```

Package.josn

**Dependencies**

`"dependencies": {
    "@reduxjs/toolkit": "^1.7.1",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-redux": "^7.2.6",
    "realm": "^10.11.0",
    "redux": "^4.1.2"
  },
`

`
Solved: why does my website stop working after I make a push to github?
Tags: todayilearned, github
Published: 2022-01-01 07:02:50

My personal website was working fine... until I made some updates in VScode and pushed it.  After that, I got a 404 error when I tried to access my website.  After I got back from work, hours later, the error was still there -- my website was down.  So I went to my github repo -- the one that consists of my personal website -- and I went to settings > pages.  Curiously, I discovered that the field under 'custom domain' was blank!  This was strange, because I was certain that I had already entered in my custom domain (www.richard-ng.com).  Anyway, it wasn't there now..only a blank field.  So, I entered my domain and pressed save.  A minute or so later, I tested my website -- the 404 error was gone, and my site was back!  

In the pages section, github still complains that my site is improperly configured...but it works fine!  It is something to worry about?

Thanks for reading!  Let me know if this helped you.
Attempt #1: Daily Log
Tags: 100daysofcode, programming, sideprojects, github
Published: 2022-01-01 06:25:37

This post has been rewritten to better fit the series narrative.

In deciding to participate in #100DaysOfCode, I first tired to participate in a manner that I saw others doing.  Only thing was, my goals didn't necessarily align with their scope:
- I wasn't a rookie, I was participating as someone operating 4 saas products with a million subscribers.  I came to level up my skills, but it would be different.  
- I wasn't learning a single skill.  My _singular_ objective in participating was build confidence in building my own SaaS products.  Given I had no intention of building every feature myself, it meant I would need to take the opposite approach:  Write as little code as possible to achieve the result, and transfer responsibilities elsewhere. 
- I had an understanding for how my best work surfaces.  I can be a perfectionist, but I always fail if I focus on completion.  Instead, if I take a milestone approach, I could have incremental progress and could later revisit when the topic felt fresh again.  

 There was also the factor of I didn't have clearly defined goals to align this work to, partly due to the impact my cancer treatment was having at the time.  But as we've progressed into 2022, the goals have sharpened and become clearer :) 

Instead of trying to document the various efforts in a daily format, I've opted instead to share the macro-level efforts I'm tagging as #100DaysOfCode.  I estimate that over the course of the 2022 calendar year, I will have invested at least 100 days of time towards improving my skills with the intent of deploying for-profit SaaS products, and will try to encompass as many broader discussions as I can author.
Top 5 Programming Languages in 2022 You Should Learn
Tags: programming, python, javascript, php
Published: 2022-01-01 06:22:05

**Top 5 Programming Languages in 2022 You Should Learn**
In this blog i am going to tell you Top 5 Programming Languages in 2022. So Lets start this article:-
1. Python
2. JavaScript
3. Java
4. PHP
5. Golang

[Click Here](https://codexashish.blogspot.com/2021/12/top-5-programming-languages-in-2022-you.html) to see this post in detailed.

_Thankyou_
Reminder — Join Us for the MongoDB Atlas Hackathon ⏰
Tags: meta, atlashackathon
Published: 2022-01-01 04:59:22

---
title: Reminder — Join Us for the MongoDB Atlas Hackathon ⏰ 
published: true
description: A reminder for those of you participating in the MongoDB Atlas Hackathon on DEV — or those considering it! 
tags: meta, atlashackathon
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfi4nf1j7yaswjvd0b9c.png
---

#### **The MongoDB Atlas Hackathon on DEV closes on January 13th, 2022 @ midnight UTC.** 

**Don't miss this chance to flex your software development muscles and win up to $1,500 USD – and more 👀** 

--- 

If you're just returning to your computer after celebrating the winter holidays OR if the end of 2021 has been a busy time for you, we wanted to share a friendly reminder that the [MongoDB Atlas Hackathon on DEV](https://dev.to/devteam/announcing-the-mongodb-atlas-hackathon-on-dev-4b6m) is ongoing and we'd LOVE to see a submission from you. This is DEV's first-ever hackathon with our friends at MongoDB and we think it's a particularly exciting and fun opportunity to show off your software development skills. Plus, hey, the amazing prizes don't hurt either! How does a grand prize of $1,500 USD in cash sound? How about $300 to the DEV shop, plus a sticker pack and a limited-edition profile badge? 🤩 

Refresher: this hackathon challenges you to build an application utilizing MongoDB Atlas (a collection of cloud database and data services that helps you accelerate and simplify how you use data in your work) and share an overview of your project on DEV. There are five fascinating categories so you can truly build what interests you. 

### **[>> Full details on how to participate in the MongoDB Atlas Hackathon here](https://dev.to/devteam/announcing-the-mongodb-atlas-hackathon-on-dev-4b6m)**

---

### **Additional tools & reminders**

> _Questions about MongoDB or the hackathon in general? Head over to our help thread, which is being monitored by the MongoDB and DEV teams_:

{% link https://dev.to/devteam/mongodb-atlas-hackathon-help-thread-3g3a %}

> _Looking for a chance to connect with other participants? Want to find a project partner or simply share your progress? The community discussion thread is the perfect place to do that_:

{% link https://dev.to/devteam/share-your-mongodb-atlas-hackathon-updates-5g4k %}

---

## Happy coding and enjoy this challenge! You have just under two weeks left!
CSS tips on Images you need to know
Tags: css, webdev, beginners, javascript
Published: 2022-01-01 05:01:37

Hi folks, hope you are doing good. In this blog I'm gonna share 5 properties to keep in mind while working with images -

**1. Object-fit : cover -**

This property allows the image to fill the entire dimensions while maintaining its aspect ratio. Especially useful for profile images.

![Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0aw0kblv46tbh3a46unw.png)

**2. Transform: scaleX(-1) / scaleY(-1) -** 
Use transform: scaleX(-1) to flip your image horizontally and scaleY(-1) vertically.

![flip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlyqzt6il0f70qf8cauh.png)
**3. Object-fit : contain -**

This property is used to contain the entire image in the desired dimension and also maintains the aspect ratio. This property is used a lot in making banners.

![contain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5tx5el0dmtgx3jeuhb4.png)

**4. Filter: drop-shadow -**

This property is used to add shadows to images with no background.
Ex: filter: drop-shadow(30px 10px 4px #3a3a3a);

![drop-shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82gjps2xd4rtot3t3okv.png)

 30px indicates its relative position towards the right and a negative value will move the shadow towards the left. 


 10px indicates its relative position towards the top and a negative value will move the shadow towards the bottom.


4px represents its blur factor


3a3a3a represents its color


**5. Filter: opacity -**

This property increases the transparency of the image depending upon the percentage.

![opacity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6sardyaci8a5849mwgg.png)

If you know of other tips/tricks, let me know in the comments. Thanks for reading :)

**Connect with me on -**

* [Twitter](https://twitter.com/fidalmathew10)
* [Github](https://github.com/FidalMathew)
* [Linkedin](https://www.linkedin.com/in/fidal-mathew-82aba7200/)
Client logo carousel with owl carousel
Tags: codepen, codenewbie, css, beginners
Published: 2022-01-01 04:58:33

Yesterday my senior developer gave me a task to design a logo carousel but the task time is too short so that i found a JavaScript library for logo carousel which is [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/)

And as usual I would love to share that with you guys :)

{% codepen https://codepen.io/atulcodex/pen/abLYzjQ %}
Flip box/flip card with HTML CSS
Tags: beginners, codenewbie, codepen, css
Published: 2022-01-01 04:46:27

<p>Hello coding people, hope you're doing well 👨‍💻. In this DEV post, you will learn how to make this "**Easy flip box or flip card**" with just HTML and CSS</p>

{% codepen https://codepen.io/atulcodex/pen/LYzdPvb %}
Speeding your process in writing , editing , deleting multi line in writing code
Published: 2022-01-01 04:40:10

In this article we will learn how to write multi line on vscode that will help U to save more time 

To write multi code in the same time you should select multi line using :

`` ctrl + Alt + Down arrow ``  

If you want to want to start from Down to up press on 
``ctrl + Alt + Up arrow``

If you want to delete multi line in the same time press on

`` ALT Key + double click on the line that you want to delete it ``

If you want to edit multi line in the same time press on

`` ALT Key +  click on the line that you want to edit it ``

You can view [video  on youtube ](https://youtu.be/t_uV5TZIzxQ)
See GIF Image

![Write multi line on vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3n5qmfmc5iagumu8pecc.gif)
Host static website for free in less than 10 minutes.
Tags: html, github, git, css
Published: 2022-01-01 03:26:08

# What is github?
GitHub, Inc. is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.

# What is git?
Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows.

# Prerequisite.

* Github Account.
* Git installed and configured with your github account.

# Getting started

### My folder structure

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

### Create repository in github.

* Create a new repository.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cg7u5hdp0yc0bu4nu5u.jpg)

* Configure repository details.

> *Make repository name shorter that will result to short URL.*

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

> *The repository has to be public unless you are a pro member in github. I have access to create private repository as I have pro member tag on my github profile.*

* Commit the files

Start git bash and add these lines of code one by one.
* `git init`
* `git add .`
* `git commit -m 'my first commit'`
* `git remote add origin https://github.com/{username}/{repository name}.git`
* `git push -u origin master`
* Refresh the github repository page and you will see all files.

* Configure github pages.

* Go to settings.

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

* Go to pages.

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

* Select branch and save it.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cup3c4m2svputvuu3jo.jpg)

> *You will get redirected*

* Your work is done
 
> *Refresh the page and you will see the deployed link.*


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggo9nucajwh4o0nlxkge.jpg)
Just Do It 
Tags: beginners, html, webdev
Published: 2022-01-01 02:41:53

> Doing the same thing over and over again and expecting a different result is insanity - Albert Einstein

- Are you insane?

> If you're tired of starting over, stop quitting.

Welcome to post #1. It's New Year's Day. Approximately 4 years ago I started my journey into web development - I joined Codecademy and bought Colt Steele's web development course. I even uploaded a video onto YouTube showing off my website marked up in HTML.

But I did what most people who foray into this world do. I gave up. 
Why?
**_Because I couldn't get rich quick_**. 😭 Don't get me wrong, I was passionate about tech and the internet. I always kept coming back to coding, (believe me, I've bought my fair share of courses) but i wasn't disciplined enough to stick with it.

That was 2017. Fast forward to 2022 and here I am again. This time, I'm all in. I no longer need to get rich quick. 

P.s. There's no such thing as getting rich quick... Legitimately at least. 

I'm returning to what I'm truly passionate about; Writing, The internet and more recently... Blockchain tech 🔥 
Assuming I didn't stop learning, I'm sure my life would be different today. 
_But I believe everything happens for a reason_

I've gone on long enough. 
TLDR; If you're walking down the right path and you're willing to keep going, eventually, you'll get there... and re-orientate yourself to what you truly love. 

What's to come?

- I'll be documenting my journey on all the learnings I learn as I learn - in ~~(hopefully?)~~ a fresh, punchy tone. 
- For now, these will be HTML, CSS, JavaScript, React, SQL and REST APIs. 

Thank you for your time and have a smashing New Year 🔥

Sade
NextJs 12 en Netlify
Tags: nextjs, react, netlify
Published: 2021-12-12 11:16:39

Recientemente me encontré con la necesidad de actualizar un proyecto de NextJs v11 a la v12. 

El upgrade de versiones funcionó muy bien, actualicé otras dependencias e instalé una nueva que requería la nueva versión de next y su funcionamiento en localhost no presentó ningún problema.

Ese mismo día actualicé el repositorio esperando que se actualizara el sitio en netlify y así se pudieran ver los cambios . Al día siguiente me comentan que no había cambios por lo cual al revisar veo que no se pudo hacer el build (mi error no revisar al momento).

Después de investigar un poco, un post en el foro de netlify me iluminó y pude lograr el build.

Por los momentos para usar la versión de nextjs 12 en netlify hay que usar el plugin en versión beta.

Entonces debemos instalar 

`npm install -D @netlify/plugin-nextjs@beta`

Luego en nuestro directorio base crear el archivo netlify.toml y compiar el siguiente código:

```
[build]
publish = ".next"

[[plugins]]
package = "@netlify/plugin-nextjs"

```

De esta manera podrás hacer el build y todo debe funcionar como a la perfección.

Si previamente habías hecho modificaciones en next.config.js agregando distDir puedes eliminarlo.
Join me on the 100 days of CodeWars challenge
Tags: javascript, webdev, beginners, programming
Published: 2022-01-01 01:05:37

Hi guys my name is Cesar :), I started this blog because I want to keep consistent in coding, so I created the 100 days of codewars challenge, where every day I'll solve a Codewars kata and then I'll share the solution here and an explanaition of it, so you can see how I solved it and compare with your solution, if you want to join me on my road to mastering coding and learning along with me, please follow.
Hope this helps you on your coding journey :)

## [Check the first Kata](https://dev.to/cesar__dlr/1-codewars-100-days-challenge-59f8)

[Follow me on Twitter](https://twitter.com/cesar__dlr)
[Follow me on Github](https://github.com/Cesardlr/spotify-clone-app)
#2 - Hamming Distance CodeWars Kata (6 kyu)
Tags: javascript, tutorial, 100daysofcode, beginners
Published: 2022-01-01 00:41:01

##  #2 - Hamming Distance (6 kyu)

**Instructions:**

<u>Task</u>
The hamming distance between a pair of numbers is the number of binary bits that differ in their binary notation.

<u>Example</u>
For a = 25, b= 87, the result should be 4

> 25: 00011001
> 87: 01010111

The hamming distance between these two would be 4 ( the 2nd, 5th, 6th, 7th bit ).

<u>Input/Output</u>
[input] integer a
   First Number. 1 <= a <= 2^20

[input] integer b
   Second Number. 1 <= b <= 2^20

[output] an integer



**My solution:**

```javascript
function hammingDistance (a, b) {
  
  const decToBin= (n)=>{
    return("00000000000000000000"+(n >>> 0).toString(2)).slice(-20)
  }
  
  let aBin = decToBin(a)
  let bBin = decToBin(b)
  
  let acc = 0;
  
  for(let i = 0; i<20 ; i++ ){
    if(aBin.charAt(i) !== bBin.charAt(i) ){
      acc++
    }
  }
  
  return acc
}
```

**Explanation**
I started converting the decimal number to binary code, for this I used .toString(2) to convert it to binary, but because I had some issues with the number of digits in the result, I added 20 zeros and then I sliced it so I eliminated the extra zeros and I could get the result of a 20 digits binary number.
Then I started a loop with 20 iterations because it is a 20 digits binary number that will check every element of the string and if they aren't equal it will add 1 to the accumulator which contains the last result.

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/57bfea4cb19505912900012c)
Software Design
Tags: beginners, agile, programming, tutorial
Published: 2022-01-01 00:39:55

What’s a certain constant about technology ? 

It is CHANGES! A lot of them. Those changes keep changing our lives, sometimes slowly sometimes fast, blazing fast. (Respond to change)

Imagine the lovers of bread and butter before the glorious arrival of the toaster, with their little pans heat up one side them the other, all that time spent. Suddenly one day technology comes and gives them the perfect equal heated sides on a toast. What a beauty, life has finally meaning!

Our designs are always being influenced by new frameworks, new libraries, new requisites. We’re always learning all those new things that seem to never end. If there existed some constant on our designs other than new things to learn life would be easier.

I’m starting a series of single page articles to create a common ground for people interested in software design study what can always be used while coding. 

We start discussing a set of ideas used to avoid code that slows us down. The goal is to respond to change instead of adding unnecessary complexity on our designs. Those concepts are everywhere so why bother to read it here ?

My main objective is that we can always remember those ideas in a structured and hierarchically organized matter. And as soon as knew ideas appear the articles are going to be improved. For this I’m counting on:

- Visual representation of the ideias.
- Repo with every version of the articles.
- Code exemples for each main idea.
- Engagement of the readers.

As developers we want to move deliberately instead of rushing aimlessly, following good disciplines that have proven efficient short and long term. Make each side of the toast perfectly crunchy.

The first series is about Object Oriented Programming and the SOLID principles. 

Finally a visual representation to organize our studies.
In the next post, we're going to discuss [the "Pillars" of OOP](https://dev.to/jptkao/object-orientation-pillars-22c7).


![OOP and SOLID Principles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwjeux59f553p0git5yl.png)

Post on the [repo](https://github.com/jptkao/Blog_posts/blob/main/Software_Design/OO/Openning_Software_Design.md).
[BTY] Day 6: A Software Quality Model for ML Systems
Tags: betterthanyesterday, mlops, mlsystem
Published: 2022-01-01 00:06:45

Booking.com has used these principles to define and measure the quality of Machine Learning System.  

![A schematic representation the ML quality model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0zemcf0rrhmucf3uy7i.png)

_A schematic representation the ML quality model acting as the backbone of quality improvement initiatives, ultimately aiming at high quality ML systems._

You can find all details about each main/sub characteristics (the definition, the reason why it's so important, ...) in the original article here: https://bookingcom.github.io/ml-quality-model/.