teleren/devto huggingface dataset:
Decimal-to-Hexadecimal converter (java)
Tags: java
Published: 2020-12-13 01:15:04

```java
import java.util.Scanner;

public class DecHex {
    public static void main(String [] args) {
    	Convert number=new Convert(); //instanciation of the objet number
    	String res=""; //declaration of the string to show the result
    	Scanner sc=new Scanner(System.in);
    	System.out.println("Enter the decimal number to be converted");
        String decimal=sc.nextLine();
        if(number.verifBase10(decimal)) {
       int number1=number.toInt(decimal); //Conversion of the string in to number
       res=number.ToHexa(number1);   
       System.out.println("Here is the hexidecimal value: "+res);
       }
        else {
        	System.out.println("Error. Please check the number you have entered");
        }
      }
}
class Convert{
	
    boolean verifBase10(String sDecimal) // method which test the entered number
    {
       boolean test = true;
       String chiffreDecimal= "0123456789";
       if(sDecimal.length() == 0) 
       return false;
       for(int i = 0; i < sDecimal.length() ;i++)
       if(chiffreDecimal.indexOf(sDecimal.charAt(i)) == -1) 
       {
    	  test = false;
          break;
       }
    	 return test;
    }
    		
    int toInt(String number) {
	   int num=Integer.parseInt(number);
      
       return num;
   }
   
   String ToHexa(int num) {
	   int rem;
	   String str2="";
	   char hex[]= {'0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'};
	   while(num >0 && num<=65535)
	   {
		   rem=num%16;
		   str2=hex[rem]+str2;  //conversion in hexadecimal code
		   num=num/16;
	   }
	   return str2;
   }
}
```
How CSS Media Queries should work in the Browser.
Published: 2020-12-13 00:28:27

---
title: How CSS Media Queries should work in the Browser.
published: true
description: css
tags: 
//cover_image: https://direct_url_to_image.jpg
---
This is how Media Queries currently work in the Browser.

```
.nav {
  background-color: #f40
}

@media screen and (max-width: 992px) {
 .nav {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  .nav {
    background-color: olive;
  }
}
```

And this is how I think CSS Media Queries should work in CSS.

```
body {
  breakpoints: {
    sm: 30em,
    md: 48em,
    lg: 62em,
    xl: 80em,
  };
}

.nav {
  background-color: { sm: olive, md: olive, lg: blue, xl: blue };
}
```

No code duplication.
Reduce motion with CSS
Tags: a11y, css
Published: 2020-12-13 00:04:25

---
title: Reduce motion with CSS
published: true
description: Remember to respect the user's "Reduced Motion" settings by using `prefers-reduced-motion when developing. Use prefers-reduced-motion media feature for this.
tags: a11y,CSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/l4tvhmk7za4snxk10vss.png
series: Web Accessibility with CSS
---

Operating systems offer different accessibility settings so users can customize and personalize their experience when using a computer. One of those settings is the "Reduce motion" option.


<figure>
![Screenshot of MacOS accessibility settings window](https://dev-to-uploads.s3.amazonaws.com/i/xcr4u9p7gcrfnbef4u5v.png)
<figcaption>MacOS counts with many accessibility options</figcaption>
</figure>

The "Reduce motion" feature is useful for people who experience vertigo or motion sickness. When active, the operating system will reduce the movement of elements on the screen (or stop it altogether).

## `prefers-reduced-motion`

There is a way on CSS to check if the user has this flag activated: the [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media feature.

It has two possible values:

- `no-preference`: the users didn't specify any preference on this matter or disabled.
- `reduce`: the users specified that they want to remove or replace the motion-based animations.

But it will work even if we don't specify a value. Whatever values we put inside the media query will be executed only when the user prefers reduced motion.

And that is a good place to remove animations and transitions. They are Ok for most users, but if they have the "Reduced motion" flag, we won't show these animated motions to them:

```css
/* disable all animations and transitions if reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
```

## Beyond animations and transitions

While `animation` and `transition` are obvious properties to disable when the user selected the reduced motion on their computer, they are not alone. There are other properties that we should consider disabling too:

- `scroll-behavior`: specifies how the scroll will happen within the page. By default, it just skips from one section to another, but if the value is `smooth`, there will be a small transition that we may want to avoid in reduced motion mode.
- `scroll-snap-type`: a cool feature that could bring some accessibility problems. With scroll snapping, the page will automatically scroll to the specified areas, which may not be something that the user expects or wants.
- `marquee-style`: this is a non-standard property that will only affect `<marquee>` (which you should not be using anyway) and only on Safari (may require a `webkit` vendor's prefix). With the value `none`, it will stop all marquees on the page.



---

**When developing, remember to respect the user's "Reduced Motion" settings by using `prefers-reduced-motion.`**
Logging in Next.js
Tags: nextjs, blogvent
Published: 2020-12-14 05:47:13

---
title: Logging in Next.js
published: true
date: 2020-12-13 00:00:00 UTC
tags: nextjs, blogvent
canonical_url: https://www.netlify.com/blog/2020/12/13/logging-in-next.js/
---

Welcome to Blogvent, day 13!

Next.js is a hybrid framework. Some parts of it live in the browser, and some parts live in Node.js. When you’re developing, that can make for some fairly confusing development, sometimes!

Depending on where you put your `console.log()` statements, your logs will appear in different spots. Here’s some rules of thumb for figuring out where they are:

**If your logs are declared in a function that renders/uses React, they will appear in the browser.**   
Whether it is one of your React hooks, your React components, or a page-level component, that log will be in your browser console. This part of your code is the frontend of your application, so you can remember this that the frontend is client-side, in the browser! This is true for both development and production mode.

**If your logs are in a data fetching function, they will appear in your terminal or build/function logs.**   
If you have utilities, call APIs, or render certain routes based on external data, these logs will be in your terminal in development mode. Your terminal is where the “back-end” of your application lives, and where you can see pages being built. It’s a Node.js environment! In production mode, these logs will appear at build time in your build logs at build time, or in your function/API logs at runtime.

## I want to experiment with this!

Who doesn’t? Here’s a starter application to try this out:

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/next-netlify-starter&utm_source=blog&utm_medium=nextstarterlogging-cs&utm_campaign=devex)

(Clicking this button will deploy a Next.js starter project to Netlify, and clone it to your chosen Git provider)
Learning by doing
Tags: learning
Published: 2020-12-12 20:13:47

I was once taught (on a time management course, of all things) that there are three different people when it comes to learning: visual, auditory and kinaesthetic (aka tactile). Visual people need to see things to understand them, auditory people need to hear things to understand them and kinaesthetic people need to try things to understand them.

How much that is true, I don't know, but I was classified as kinaesthetic and it came as no surprise. I'd discovered that university that I didn't really understood a proof in physics until I'd done the maths for myself. I couldn't remember bullet-point lists, but could learn sentences. To revise I didn't read notes or make visual aids, I worked through past papers.

Which doesn't mean that I can't learn something in other ways - an article is a good way to look up a detail I've forgotten. Or can serve as an introduction.

I already knew that in order to understand coding I need to do it. That's the same for everyone - it's when you try it for yourself that you discover the bits that weren't clear. I've tried various sites where you read some information or are given it in a video and then have to do it for yourself. I've also tried YouTube tutorials where you code along.

But I've sometimes struggled to apply this knowledge to my own projects.

I much prefer applied maths to pure maths. I understand maths much better when I can understand what it is. When learning calculus I felt like I was just changing a number into another number. I didn't understand why until it was explained to me that differentiation is used to measure the slope of a line on a graph and integration is used to measure the area under the graph. I haven't done any differentiation or integration since leaving university, so I don't remember how to do it any more, but I remember why you do it.

What has really helped me learn to code is watching coders work on real problems. I understood better how to structure SCSS files when I watched a coder code and saw how to use it to find things. I understood how to build up unit tests as your code gets more complicated.

Sites like FreeCodeCamp and CodeAcademy are still valuable, because sometimes you need something explained in just the right way to get it to click and it could take a few different explanations before you find that way.

I'm off to watch more videos.
what is buffer in c/c++?
Tags: cpp, productivity, programming, codequality
Published: 2020-12-12 23:59:49

Buffer is a term that refers to a block of computer memory that serves as temporary storage area is called buffer. All standard input and output device contains an input and output buffer. 
**Some of the example of the buffer...**
* Computer which uses RAM as buffer.
* In a video streaming a sections of the movie you are streaming downloads to your device to stay ahead of your viewing.

Data can placed in software buffer before it is processed, writing data to a buffer is much faster than direct operation.
using a buffer while programing in C/c++ speeds up calculation process. Buffers come in handy when a difference exists between the rate data is received and the rate it is processed.

If you want to store a array of characters after a some input to store that in desired location, then you must need to clear unwanted buffer first so as to get the next input in desired location. 

cin.ignore() is used to ignore or clear one or more characters from the input buffer.
Validate, Authenticate and Secure - Oh my!
Published: 2020-12-12 23:46:51

I wanted to use dev.to to create a blog post for my "Library of Books" project in terms of that it is leaned towards technology and software development. 

Topic: Validation, authentication and securing a password. These seemingly all sound similar but different and why am I using them in my project? 

![Screen Shot 2020-12-12 at 6.17.59 PM](https://dev-to-uploads.s3.amazonaws.com/i/5uq1yvpkawkqgz0k0cu6.png)

When studying them, they seemed easy and obvious but once I saw it in my code, I found myself getting confused at the fact that has_secure_password(located in my user model) and then "validates :email, presence: true" do the same thing.
 
What these methods do is adds methods to set and authenticate against a BCrypt password. This mechanism requires you to have a XXX_digest attribute (in this case password_digest is located in my CreateUser class). Or in other words BCrypt will store a salted, hashed version of the users' passwords in the database in a column called password_digest. Once a password is salted and hashed, there is no way for anyone to decode it. 

Lets get on with this has_secure_password. To start, has_secure_password is a macro. A macro is a method that when called, creates methods for you. The macro has_secure_password is being called just like any other ruby method. It works in conjunction with a gem called BCrypt and it allows us to store passwords in a secure way that isn't a plain text password. has_secure_password is also a method called authenticate. You don't see this method because it's "invisible."

Well, what are validations? Validations are used to ensure that only valid data is saved into your database.
Also in the validation, you'll see "uniqueness." Uniqueness is a validation helper that I am using in my project to make sure that an email is not used more than once.

In conclusion, I wanted to give a layout of these different attributes when validating, securing a password and authenticating the users. These words can seem easily jumbled up and I wanted to go in depth to explain what they mean. They do mean very similar things but can be used in different contexts. 

Kindly your Software Engineer,

Alicia
A Dip Into CSS Flexbox
Tags: css, beginners, todayilearned, codenewbie
Published: 2020-12-12 23:34:13

Hello Fellow Codenewbies 👋

Recently I learned more about flexbox in CSS.
I will write this topic in several posts as I learn and dive into it 😊
<hr>

# Flexbox

> Flexbox is a layout model or displaying items in a **single dimension** — as a row or as a column.
-- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)

## Display Properties In CSS 
Elements normally have default `display: block` or `display: inline` from browsers.

**Block** stacks on top of each other.
Including in this element:
- `div`, `header`, `footer`, `main`, `section`, etc.
- heading (`h1` - `h6`)
- `p`

While **inline** stays within the flow.
- `a`
- `strong`
- `em`
- `span`

We can change the behavior of these elements. One of the methods is by setting `display: flex` on the *parent* element.

```css
.flex-container {
  display: flex
}
``` 

#### Result

![wo flex 1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607814407340/bUQ_uMCUg.jpeg)


![w flex 1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607814303857/t2RUnHiZV.jpeg)

**✏ UPDATE**
The parent element is known as ***flex container***, and the elements inside flex container are ***flex item***.

### Flex Behaviour
- `display: flex` will automatically turn the elements inside the parent element into ***columns***. 
<br>
- When the total width of the children is bigger than the width of the parent, they will stretch to fit the *horizontal* axis of the parent element.

I provide an example below to play with.

{% codepen https://codepen.io/adiati/pen/RwRvXJP %}

Toggle the `display: flex` in the example and see how the elements inside flex-container behave and try also to play around with the width of the elements.

## Conclusion
- Each element have a default display property, either `display: block` or `display: inline`.
- When we apply `display: flex` to a parent element, by default, it will turn the elements inside it into ***columns***.
Vuex getters
Tags: vue, vuex
Published: 2021-02-11 10:39:28

---
title: Vuex getters
published: true
date: 2020-12-12 23:29:18 UTC
tags: vue,vuex
canonical_url: https://www.solarwinter.net/vuex-getters/
---

Every time I have to write a Vuex getter with parameters I have to look it up again - for some reason the method just doesn't go in. Today I found [this comment](https://stackoverflow.com/a/53289861/609921), which gives an example of what feels like a very clean way of handling derived data (e.g. properties of an item retrieved using it’s item ID).

Now I only have to go here or to my own blog to look it up. 😄
#005: Twitter Cards
Tags: twitter
Published: 2020-12-12 23:18:10

---
description: It has been a bit of a mad week this week.
---
It has been a bit of a mad week this week. I joined a new team so lots of time learning what's what and also being pulled in two directions as usual demands come through on top of that.

My blog runs on Blazor and I have been making use of JavaScript interop to update the html headers and update the page title to match the blog post article. This works great, I load the page and check the headers and they were saying what I wanted.

The problem was I wanted to add tags for [twitter cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started) This means that when I paste a link to my blog on twitter you get a nice preview and pic of me in the tweet. This was not working at all even though I had the correct headers.

I eventually figured out that the problem was the fact I was using JavaScript to update my headers after the page had been initially loaded. Twitter was fetching my page before these headers got added and therefore couldn't see the twitter card headers. 

My solution was to use invalid html. Not ideal but it works. I added the required html tags in the body of my page using Blazor/C# instead of using JavaScript to add them into the header. Twitter appears to not be fussy in finding them in the wrong place. 

Twitter provides a validator tool at [Twitter Card Validator](https://cards-dev.twitter.com/validator) which my website now passes.

Not much else to say this week, apart from I am missing Visual Studio and C#, I have been mostly using VS Code on Linux and looking at php which isn't as much fun as my usual day job.
Breaking-down & Building-up
Tags: epiphany, team, support
Published: 2020-12-12 23:06:06

>_“Wisdom is not a product of schooling but of the lifelong attempt to acquire it.” -Albert Einstein_

  I've started to work on a project with a friend and mentor of mine.  We're using Trello to keep track of the progress, and details of the tasks on hand.  So far it feels *great* using Trello!  I have tasks to complete and being able to see the details of those tasks helps to keep me focused on what to do next with a sense of direction and purpose.

  I received a lot of great advice on my last post about **breaking things down** _" down to the point of almost trivial "_ as one person put it and so far, taking each task and completing it detail by detail, has helped immensely in my progress.

  I'm getting stuck in some places where I feel like I shouldn't and, so far most of the work has been on building the skeleton for the project but, I'm more optimistic.  I have a great network of support and since joining Dev.to and reading other people's blogs about their journeys or what they've discovered has only enhanced that feeling.  I look forward to getting unstuck some more.
How do I make a scrolling animation like this?
Tags: html, css, help
Published: 2020-12-12 22:38:39

Earlier today I came across this cool design agency's website:

https://sunnyatsea.se/

The first thing I noticed was how **if you scroll down just a bit, it will move to the next section**. Kind of like a slideshow.

I remember hearing of a cool library/animation tool that helps you with this task but I can't find it anywhere.

Does anyone have an tips on how to replicate this? (or if you know the library that would be cool to 😅)

Thanks!!
Build your first app in React
Tags: react, programming, javascript
Published: 2020-12-12 22:34:04

Before starting anything, it is necessary to have NodeJS installed on our computer, and check its installation. We must open our terminal and write the following: ``` node --version ```

If a version number appears, we can continue. Otherwise, you must go to the official Node page, and click on the download corresponding to Long Term Support (LTS), which will work for most cases.
Semantic GitHub
Tags: github, git, conventional, commits
Published: 2020-12-12 22:19:54

---
canonical_url: "https://ajcwebdev.com/semantic-github/"
description: "A semantic pull request lets you tell others about changes you've pushed to a branch but in a way that actually means something."
---

What is a semantic pull request? The first question to ask would be, what is a pull request?
> A pull request lets you tell others about changes you've pushed to a branch in a repository on GitHub.

The second question to ask would be, what makes something semantic?
> Relation to meaning in language or logic.

A semantic pull request lets you tell others about changes you've pushed to a branch but in a way that actually means something. It is also a term for a variety of tools built around GitHub including:

## action-semantic-pull-request

[action-semantic-pull-request](https://github.com/amannn/action-semantic-pull-request) is a [Github Action](https://github.com/features/actions) that ensures that your PR title matches the [Conventional Commits spec](https://www.conventionalcommits.org/).

The Conventional Commits specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages.

## semantic-release

[semantic-release](https://github.com/semantic-release/semantic-release) automates the whole package release workflow including: determining the next version number, generating the release notes and publishing the package.

## semantic-pull-requests

[semantic-pull-requests](https://github.com/zeke/semantic-pull-requests) is a GitHub status check that ensures your pull requests follow the Conventional Commits spec. It is a [Probot](https://probot.github.io/) app on your repos to ensure your pull requests are semantic before you merge them.

Since it can be installed on one or many repositories it's good for use on lots of different repos, or even an entire GitHub organization full of repos. If you want more fine grained control, consider your own custom Actions workflow using a GitHub Action like [action-semantic-pull-request](https://github.com/amannn/action-semantic-pull-request).
Script freezes when losing focus
Tags: programming, python, tutorial, windows
Published: 2020-12-12 22:00:46

This is a **how to stop freezing when your CMD loses focus**.  
&emsp;Ok, so i was doing a Python script that downloads a backup using `requests`, it is a CLI program, and i am using Microsoft Windows as main operating system. I noticed that when my CMD window loses focus, the script freezes, so i did a little research and found [This answer](https://superuser.com/questions/555160/windows-command-prompt-freezing-on-focus) in superuser exchange, it was really useful, but yet, it kinda give me the impression that the script still freezes, since i was using requests, and updating the screen everytime a chunk of file was downloaded, i realized that indeed, the script still freezes, in "mi caso" this is what i did to solve it.

 - Disable QuickEdit mode (See that superuser answer)
 - Use the threading module in order to make a threading request.

For the threading part, check [This answer] (https://stackoverflow.com/questions/22832834/backgroundworker-in-python) from stackoverflow, you can use `thread.join()` in order to wait for the thread to finish if you need to.  
&emsp; Anyways, this is all you need to do if you want to unfreeze your script when your CMD windows loses focus.
Lets get started
Tags: dohackathon, angular, digitalocean
Published: 2020-12-12 21:47:29

This is the first DEV hackathon I'm going to participate in.

Last year, I built [DEV analytics](https://dev.to/sandordargo/my-dev-birthday-gift-for-you-dev-to-analytics-19f2) and I decided that I'll use this hackathon for two reasons:

- Try DEV Analytics as a service, making a backend for it with a REST API and a nice frontend
- I have to learn Angular for a new project. I'm a C++ backend dev and this is a completely new area for me. So this hackathon will help me to learn a bit of Angular and get ready for the new project

Good luck to all of you participating!