teleren/devto huggingface dataset:
Creating a CSS Animated Loading Card
Tags: css, animation, loading
Published: 2021-01-13 21:33:30

Loading animations are used to tell users that the site they want to see is on the way. Usually we'll see spinners, but we can take this a step further. 

Let's build out a card that has a loading animation to it. By creating a loading animation that looks similar to our final UI, the user will know what to expect when our page fully loads.

{% youtube p9AMmrxBzKw %}

The steps to create an animated loading card are to:

1. Create a card
2. Add a background to specific parts (image, text)
3. Animate with a CSS Animation

Here's the CodePen:

{% codepen https://codepen.io/chris__sev/pen/mdrzYQE %}

## The Technique: Background Animation

We can build out a sample HTML/CSS card with the following:

```html
<div class="card is-loading">
  <div class="image"></div>
  <div class="content">
    <h2></h2>
    <p></p>
  </div>
</div>
```

Using Sass, we can style out the base card:

```scss
.card {
  margin: 10px;
  width: 300px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

  .content {
    padding: 20px 30px;
  }
}
```

## The CSS Loading Animation

Now we add a loading animation. This will be a CSS animation `@keyframes` that will move the background to give it a shining effect.

Here is the CSS animation:

```scss
@keyframes shine {
  to {
    background-position-x: -200%;
  }
}
```

Here is the `is-loading` class that will add the backgrounds to the image, header, and paragraph.

```scss
.card.is-loading {
  .image,
  h2,
  p {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
  }

  .image {
    height: 200px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  h2 {
    height: 30px;
  }

  p {
    height: 70px;
  }
}
```

The important line here is the `animation` line:

```scss
animation: 1.5s shine linear infinite;
```

We are animating the background infinitely so that the gradient keeps moving across the element.
Mockups for Portfolio Website: How to add project screenshots onto digital devices for FREE
Tags: ux, ui, html, css
Published: 2021-01-13 21:26:15

Hello friends!

I'm in a particularly good mood this evening after I finally discovered an even EASIER way to mockup projects without Photoshop or Figma.

<img src="https://media.giphy.com/media/TFBqG1K15zTVkTb2cx/giphy.gif">

(No shade to Figma, but I like things done quickly sometimes and the options on there can be overwhelming when I don't use it often enough!)

<img src="https://media.giphy.com/media/sRIXt1e9dQRjEjxnMk/giphy.gif">

Mockups are models or replicas of well... anything really. BUT in the world of UX, UI and software development: 

A mockup is a model of a design or device, used largely for product presentational purposes. It's a way for designers, engineers and you (yes, you!) to show off what your design will actually look like when it's launched out into the real world. 

You may have heard of Figma, Placeit, Artboard.Studio,
Vexels, WoFox, MockupsJar aaaand others that the industry *swears by* to Generate Mockups, but I personally like how easy <a href="smartmockups.com">smartmockups</a> is to use.

Here's a working example of one of my creations:

<img src="https://www.i.imgur.com/oBm3K4X.png">

# le instructions

1. Take a screenshot of your project in Mac and iPhone format (Chrome has a toggle device toolbar to switch between devices in the inspector panel)
2. Search on smartmockups.com for the type of device you'd like (there's a lot of free options!)
3. Upload your photos and arrange as required.
4. Download their premium (paid) and non-premium (FREE!) versions of the image.

And voila!
Alternatives to JavaScript
Tags: javascript, tutorial, programming, codenewbie
Published: 2021-01-13 21:08:06

{% youtube TTqGfoQus04 %}

---
JavaScript is written in **C++**, including engines like **Spider Monkey**, **V8**, **Chakra**, etc. That is, JavaScript codes are compiled to machine codes, but C++ binding is used in runtime between the browser and the engine. 

Since browsers only support JavaScript, other programming languages can be transpiled to JavaScript before the C++ binding can be done successfully.

> Codes can now be transpiled from languages like TypeScript, Dart, etc. to JavaScript then compiled to machine codes in the JavaScript engine

*More on browsers and engines C++ binding later*

Below are alternative languages to JavaScript:
- [TypeScript](http://www.typescriptlang.org/)
- [CoffeeScript](http://coffeescript.org/)
- [Brython](https://brython.info/)
- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html)
- [Dart](https://www.dartlang.org/)
- [Flow](https://flow.org/)
- [Elm](https://elm-lang.org)

> It is advisable to know JavaScript fully well before learning other alternatives to JavaScript.

A high-level language like JavaScript is abstracted from the machine level. Check out the [Freecodecamp article](https://www.freecodecamp.org/news/understanding-the-core-of-nodejs-the-powerful-chrome-v8-engine-79e7eb8af964/) to learn more.

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
### TechStack Media | Bluehost
- Get a website with a free domain name for 1st year and a free **SSL** certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
-  30-Day Money-Back Guarantee.

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"> </a> 

**[Learn more](https://partners.hostgator.com/MaZ1N)**

{% youtube niIhlSomTOQ %}
I built a note-taking app with markdown and local storage using ReactJS
Tags: react, showdev, sideprojects, portfolio
Published: 2021-01-13 19:58:06

There are tons of note taking apps out there but I wanted to build mine to see how hard it actually was and during the holidays **I did it!**

**[Take a look at it here](https://noting.netlify.app/)**

So, Noting is built with ReactJS, TailwindCSS and uses [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor) as the Markdown editor. It also has local storage. And has dark mode, because Tailwind really makes that easy

It's a very simple app but I do believe it covers everything I wanted it to have so I'm incredibly happy for it!

There's absolutely no reason for me to brand this project with an actual name, cover and what not but I got into the mentality of "It's a real product and I really need to finish it" and it kept me accountable!

If you have any doubts or suggestions, please comment them here!

Also, I enjoy building in public so, if you're interested, you can follow me on [Twitter](https://twitter.com/HeyItzaMi?s=09)!
Dynamically Increase SWAP (ZRAM) Size in Linux
Tags: fedora, swap, zram, linux
Published: 2021-01-13 19:50:39

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j8oj5qvv9qo55n2ccbfc.jpg)

- - -

# Introduction

**Swap memory is useful, but no one likes it when it's slow**. Swap in Linux is used when the amount of physical memory (RAM) is full. If the system needs more memory resources and the RAM is full, inactive pages in memory are moved to the swap space.

Fedora particularly has been using [swap-on-zram](https://en.wikipedia.org/wiki/Zram) by default for years and comes by default on Fedora Workstation. ZRAM creates a block device in RAM where pages that would otherwise be written to swap (disk/ssd) are instead first compressed, then stored. This allows for much faster I/O of swap, and also the data compression provides a great amount of memory savings.

The zram device, typically `/dev/zram0` has a size set at create time during early boot, by zram-generator per its configuration file. The memory used is not preallocated. It's dynamically allocated and deallocated, on-demand. Due to compression, a full `/dev/zram0` uses half as much memory as its size.

The system will use RAM normally up until it's full, and then start paging out to swap-on-zram, same as a conventional swap-on-drive.

- - -

# Dynamically increase swap size on-demand

If you are using Fedora Linux, you should already have zram0 setup and running. You can run the following command to verify:

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

Now, edit the zram-generator configuration file located at `/usr/lib/systemd/zram-generator.conf`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4166q1cbfmxgufwwyydh.png)

And increase the SWAP size as desired, e.g: increase it 1x the RAM size.

{% gist https://gist.github.com/tuladhar/46b4b8f0772e2ea954bc4e29954c6750 %}

Finally restart the service to take the new configuration in effect.

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

Verify that the swap size has increased by running the following commands:

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

- - -

![](https://media.giphy.com/media/374pcIBVEGb6g/giphy.gif)

- - -

# References
* https://fedoraproject.org/wiki/Changes/SwapOnZRAM
rbenv: bundle: command not found
Tags: rbenv, ruby, bundle, bundler
Published: 2021-01-13 19:49:03

For those using RBENV for managing ruby versions, whenever you install a different ruby version and then you'll be faced with the following error(not 100% same lol):

```
rbenv: bundle: command not found

The `bundle' command exists in these Ruby versions:
  2.3.3
  2.4.4
  2.5.7
  2.6.5
  2.7.0
```

Both these commands will be helpful in fixing the issue.

```gem update --system```
```bundle update --bundler```
Ruby CLI and API
Published: 2021-01-13 19:27:30

Let us build a simple CLI with ruby and [CocktailsDB API](https://www.thecocktaildb.com/api.php?ref=apilist.fun)

##Setup

####gems/libraries that will be used:
1. Net::HTTP
2. open-uri
3. json

```ruby
require 'net/http'
require 'open-uri'
require 'json'
```

##Testing our API
For this demonstration, I will be using the API to search for a drink by name. Fortunately, our API provides an auth key without having to create an account. 

`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=URL_PARAM`

All we need to do is fetch the API with our search query.
`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita`
*notice I am replacing `URL_PARAM` with `margarita` at the end of our URL.

After visiting the link we get a json response that looks something like this.
```
{
    drinks: [
        {
            DRINK_ONE_INFO....
        },
        {
            DRINK_TWO_INFO....
        }
    ]
}
```

##Fetching our API
We'll ask for user input and fetch query to our API endpoint in our `fetch_drink_by_name` method. 

```ruby
def fetch_drink_by_name
end
```

####Getting user input
First, we'll prompt the user to enter a search query 
`puts "enter name of drink"` 

Then instruct the CLI to wait for input from the user, and store the input in a variable
`query = gets.strip`.

Finally, we will save our endpoint in a variable. Notice we are using template literal to add our user's query as a URL parameter.
`url = "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=#{query}"`

####Retrieving our data
Now we will retrieve our data in four simple steps
1. Convert URL to URI
2. Make a GET request and retrieve the body of the response.
3. Parse our JSON data and get info stored in our `drinks` object.
4. Print results(if any), otherwise print no results message.

*I will print our `drinks` variable to CLI to make sure everything is working*
```ruby
require 'net/http'
require 'open-uri'
require 'json'

def fetch_drink_by_name
  puts "enter name of drink"
  query = gets.strip
  url = "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=#{query}"
  uri = URI.parse(url)
  res = Net::HTTP.get_response(uri).body
  drinks = JSON.parse(res)["drinks"] 
  if drinks
    puts drinks
  else
    puts "sorry no results found"
  end
end

fetch_drink_by_name
```

All done, you may use the data however you wish. If everything works correctly your CLI will show an array of objects, with each object containing the drinks data. Or print "sorry no results found" if there were no results.
Seeking Validation
Published: 2021-01-13 19:12:50

One of the first things I did in my rails project after setting up model associations was setting up my model validations. 

Simply put, validations exist to prevent invalid data from being saved to your database. The well on things you can do with validations is deep, but for the sake of my rails project, The Undertower, I just needed some quick and easy validations.  

Originally I thought this was going to be a more difficult process than it turned out to be. Because the validations I needed were pretty simple, it went by pretty quickly. My reviews model checks for the presence of a name for the review, the review itself, and a star rating. Because the star rating turned out to be a little different than the previous two, I needed to spend some time on Google. I wound up writing it so it checks for numeric value and set parameters for how many stars someone could leave. 

Outside of that my validations wound up being pretty standard: Book checks for name and title, review validations check for a name and content, and user validations check for basic login information.
Integrating Zoom SDK into React Native (Video-Calls)
Tags: reactnative, zoom, startup, tutorial
Published: 2021-01-13 19:03:41

Hello guys.

I created tutorial about how we can integrate ZoomSDK into iOS and Android with React Native in order to add free video calling / streaming into React Native (Zoom allows you to use videocalls for free under one of its plan).

As it contains lot of pictures, it is a little tricky to cross-post it here, so I will only share link where you can find more details: 

{% medium https://stefanmajiros.medium.com/how-to-integrate-zoom-sdk-into-react-native-47492d4e46a6 %}

Thanks for reading and sharing your tutorials,
Stefan.
Welcome Thread - v107
Tags: welcome
Published: 2021-01-13 19:02:28

---
title: Welcome Thread - v107
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Creepy Raccoon Welcome](https://media.giphy.com/media/MAir7JcHGl0TLlwbtV/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Looking for React Native Boilerplate? Try ⚡ Osmi Kit
Tags: javascript, cli, reactnative, boilerplate
Published: 2021-01-13 18:56:42

---
title: Looking for React Native Boilerplate? Try ⚡ Osmi Kit
published: true
description: Awesome React Native boilerplate / Starter Kit
tags: javascript,cli,reactnative,boilerplate
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pbzad3htj9r8p5kpv5gm.png
---

Hello React Native Developers ~!
Do any of you use **Ignite Andross** to generate new React Native projects? If yes, you already know that Ignite Andross really really really save your time on initializing react-native app. You don't need to install the general dependency and config it from 0.

Also with Ignite CLI, you can easily generate screen, component, redux, saga, and many more. It really saves your time.

But unfortunately, in the Ignite latest update. They fully support Ignite Bowser boilerplate and leaves Ignite Andross behind. Because of that, I create an alternative boilerplate like Ignite Andross, plus with the CLI.

---

## Welcome to ⚡ Osmi Kit ⚡
### Battle-tested React Native boilerplate
The original concept of this boilerplate is from [Ignite](https://github.com/infinitered/ignite). We're really like the project structure from Ignite Boilerplate, especially for Ignite Andross. But we realize that Infinite Red team no longer maintains the Andross Boilerplate. So, therefore we create an alternative boilerplate like Ignite Andross.

This is the React Native boilerplate that the [LibsCode](https://libscode.com/) and [CloudGakkai](https://cloudgakkai.dev/) team uses on a day-to-day basis to build client apps. Developers who use Osmi Kit report that it saves them two to four weeks of time on average off the beginning of their React Native project!

### Tech Stack
Osmi Kit includes the following rock-solid technical decisions out of the box:
- React Native
- React Navigation 5
- OsmiCSX
- Redux-Saga
- Redux-Persist
- AsyncStorage
- apisauce (to talk to REST servers)
- Flipper-ready
- Reactotron-ready
- TDD-ready
- And more!

### Quick Start
Prerequisites:
- Make sure you already setup React Native environtment (Android SDK, Java, etc.). [See React Native docs](https://reactnative.dev/docs/environment-setup)

Install Global CLI:
```sh
// npm
npm install -g osmi-cli

// yarn
yarn global add osmi-cli
```

Run the CLI:
```sh
osmi new MyApp
```

And Osmi will walk you through the rest.

---

[Install Osmi CLI now](https://github.com/OsmiCSX/osmi)

---

### Special Thanks
Special thanks to [Infinite Red](https://infinite.red/) who create such a beautiful react-native boilerplate (Ignite CLI). And give the inspiration for me to create this alternative cli and boilerplate.
Utilizando o Formik Context
Published: 2021-01-13 18:34:35

Com o uso do Formik Context é mais fácil de organizar a estrutura de seus formulários, deixando de lado a preocupação de ficar passando várias propriedades entre os componentes; facilitando também a criação de componentes genéricos.
Na imagem abaixo vemos como funciona o Formik Context. Declarando o formulário Formik, seus elementos filhos tem o acesso instantâneo do estado atual do formulário declarado no componente pai.

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

Posso colocar meu formulário com duas sessões separadas em componentes diferentes, AddressForm (formulário de endereço) e ProfileForm (formulário do perfil do usuário), dessa forma você consegue organizar melhor seus formulários no projeto. Não precisando passar a instância do Formik em cada componente criado, possibilitando gerenciar todas sessões do seu formulário em um único contexto.


Bora pro código?!
Vamos criar um projeto com 2 componentes, o primeiro declara o Formik e o input "name", o componente filho acessa o valor do campo "name" no estado do Formik em tempo real e exibe no browser.
Executando os comandos abaixo no terminal criamos o projeto:

{% gist https://gist.github.com/claudionts/8e161fc94f282dea94754153c877eee8 %}

Após criar o projeto, iremos usar o trecho de código abaixo no arquivo App.tsx, para testarmos o Formik Context:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5zlhwancrsfry4dcurjx.png)

O conteúdo digitado no input será consultado e exibido instantâneamente em outro componente, resultado:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jijwvxlo2lcmgy1csmwx.gif)


Terá novos artigos sobre o assunto, demonstrando o formulário com várias sessões, e também a criação de Input e Autocomplete Genéricos

{% codesandbox cranky-bhaskara-b5lbt %}
How do you deal with anxiety surrounding one-on-one meetings?
Tags: discuss, anxiety, meetings, mentalhealth
Published: 2021-01-13 18:48:34

Just curious about how others go into one-on-one meetings. Every time one pops up on my calendar, a little bit of anxiety hits me and I can't help being nervous, even though I know 100% that it is going to be a great meeting with positive feedback and no issues. I have a fantastic boss who I have expressed this anxiety to, and his response has always been that if there is EVER an issue that needs to be addressed, he will not wait until our regularly scheduled one-on-one to handle it, which I greatly appreciate (he is a very open and transparent person, and an excellent leader). But even with this being said I STILL get a level of anxiety when our routine one-on-one pops up. How do y'all deal with that, and what are some suggestions on how I, and others like me, can deal with that anxiety?
Day 11 : 100DaysOfCode
Tags: 100daysofcode, productivity, kotlin, programming
Published: 2021-01-13 18:45:49

strted day by fixing some minor issues in clients project
then

after classes studied scanline algo
solved some leetcode ques
..
continued with trees(learning)..
then explored some basic mathematics used in cp (sessions on youtube , unacademy...)
actually still i m watching them :)

looks like day didnt went that productive.


You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Another Funny Story!
Tags: watercooler, jokes
Published: 2021-01-13 18:11:09

One time when I was seven I sprained my big toe. Usually when kids break or sprain something it's like "ohh I fell of my skateboard and sprained an ankle." but nope. I'm no normal kid, when I was walking up the stairs I was barefoot because I was living in Hawaii at the time and I accidentally put my toe on the edge of the stairs instead of my full foot then "CRACK!!!" bam sprained a toe.
CodePen - 60 Gradient Morphing Blob
Tags: codepen, javascript, svg, webdev
Published: 2021-01-13 18:03:27

<p>I made this colorful blob after being inspired by Adam Argyle's <a href="https://twitter.com/argyleink/status/1199043350008958976" target="_blank">https://twitter.com/argyleink/status/1199043350008958976</a> 60 degree gradient trick. The shape is made using Catmull-Rom splines, the movement and color modulation is all based on Simplex noise ✨</p>

Some day I will make something with a hard edge... 

{% codepen https://codepen.io/georgedoescode/pen/oNzamjV %}
All About Google Dorks
Published: 2021-01-13 17:54:03

#LocalHackDay
In this blog, you will get to know about google Dorking and some pro tips which I used to become the author of my own google dork.
What is Google Dorking?
Did you ever get into the situation when you are searching for the term and the result just contradicts the output? So the solution is “Dorking” there are some advanced google searching keywords/queries to find information that is not easily available on the websites & which helps you to get better/exact results which you want.
There is a hell lot of dorks available on GHDB (google hacking database) where you can find much sensitive information. But keep in mind Dorking is just an advanced search method you can’t hack or achieve anything big/great just by Dorking it just comes handy in the information gathering process(recon).
What can Google can do for a hacker?
— Search sensitive information like payroll, SIN, even the personal email box
— Vulnerabilities scanner
— Transparent proxy
Popular dorks
Image for post
Basic Formula of Dork
"inurl:."domain"/"dorks" "
Here,
“inurl” = input URL
“domain” = your desired domain ex. .gov
“dorks” = your dork of your choice
How to publish your own dorks?
when you got your desired google dork take for example — Dork:allintext:password filetype:log
you just need to mail to the dorks@offsec.com
with the subject "allintext:password filetype:log" as it is the dork you have mined with author name and description
you won't get any confirmation mail that your dork is published on google hacking database nut yes they publish it within a maximum of 1 day you need to check your name manually if it's published or not.
Image for post
Some measures to take!
Protect Your Data
— Keep patching your systems and applications
— Keep your sensitive data off the Web apply authentication — (RSA, Clienless VPN) — Disable directory browsing
— Consider removing your site from Google’s index: http://www.google.com/remove.html.
— Use a robots.txt file to against Web crawlers: http://www.robotstxt.org.
Some Pro tips to publish your own!
1 If you want to publish your own dork sometimes the similar search results also have a dork that is useful and isn't in the google hacking database.