teleren/devto huggingface dataset:
Evoluce tvorby komponent v Reactu
Tags: react, javascript, czech
Published: 2021-07-07 14:15:20

React ušel od svého vzniku velký kus cesty. A zatímco jeho klíčové myšlenky zůstaly stejné, způsob vyjádření těchto myšlenek se změnil. React je stále založen na tvorbě UI pomocí komponent, jejich tvorba (způsob zápisu) však prošla výraznou evolucí.

## Specifikace

Od první veřejně dostupné verze **0.3.0** vydané v roce 2013 bylo možné vytvářet v Reactu komponenty pouze pomocí tzv. [specifikací](https://web.archive.org/web/20161014110534/https://facebook.github.io/react/docs/component-specs.html). Ona *specifikace* není nic jiného než objekt, který obsahuje metodu *render* a případně další metody související s životním cyklem komponenty nebo s jejím stavem.

```jsx
const Counter = React.createClass({
  getInitialState: function() {
    return { value: 0 };
  },
  handleClick: function() {
    this.setState({ value: this.state.value + 1 });
  },
  render: function() {
    return (
      <button onClick={this.handleClick}>
        {this.state.value}
      </button>
    );
  },
});
```

## Třídy

První přelomová verze z pohledu vytváření komponent přišla v roce 2015 a to konkrétně verze **0.13.0**. V témže roce byl vydán ECMAScript v nové verzi 6, která (mimo jiné) přidala novou syntaxi pro psaní aplikací, třídy. Autoři Reactu tak nadále nebyli nuceni navrhovat vlastní systém tříd (což byly právě ony *specifikace*) a mohli se přeorientovat na použití standardu definovaného ECMAScriptem.

```jsx
class Counter extends React.Component {
  state = { value: 0 };
  handleClick = () => {
    this.setState({ value: this.state.value + 1 });
  };
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.value}
      </button>
    );
  }
}
```

## Funkce

Rok 2015 přinesl první přelom v tvorbě komponent. A byl to ten samý rok, který zároveň naznačil, jak bude vypadat přelom následující. Ve verzi **0.14.0** dostali vývojáři možnost používat tzv. stateless function components (bezestavové funkcionální komponenty). Díky nim bylo možno komponenty zapisovat jako obyčejné jednoduché funkce. Jak však název napovídá, tento zápis neumožňoval použití vnitřního stavu komponenty, metod životního cyklu ani kontextu.

Toto vše změnila verze **16.8.0** z roku 2019, která přinesla tzv. [Hooks](https://reactjs.org/docs/hooks-intro.html). *Hooks* představují primitiva, díky kterým může i funkcionální komponenta používat stav, životní cyklus a řeší problémy, které s sebou přináší používání tříd (bindování funkcí, práce s klíčovým slovem *this* atd.)

```jsx
const Counter = () => {
  const [value, setValue] = useState(0);
  const handleClick = () => {
    setValue(value + 1);
  };
  return (
    <button onClick={handleClick}>
      {value}
    </button>
  );
};
```

### Užitečné odkazy

* [https://frantic.im/react-api-evolution/](https://frantic.im/react-api-evolution/)
* [https://en.wikipedia.org/wiki/React_(JavaScript_library)](https://en.wikipedia.org/wiki/React_(JavaScript_library))
* [https://www.w3schools.com/js/js_es6.asp](https://www.w3schools.com/js/js_es6.asp)
Getting started with GitHub Actions for Rust
Tags: beginners, rust, github, actions
Published: 2021-07-07 14:14:45

> TL;DR: Create an Action on GitHub so your code gets built and tested after every push, and do all this with nothing more than a "next-next-finish".

You *never* used GitHub Actions and you want do do it with your Rust project; if that's the case, this might help you.

## What is and Why GitHub Actions?
[GitHub Actions](https://github.com/features/actions) automatize software workflow, which _per se_ is **not** CI/CD (Continuous Integration/Continuous Delivery), but is used in this method.

So, which workflow are we going to automatize? Test and build. In other words, this:
```ssh
$ cargo test
$ cargo build
```

## How to do it
First, open your GitHub repository and go to **Actions**.
![GitHub Actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/756h5zscio1kj5ksu6ig.png)
> The example is from [this repository](https://github.com/rogertorres/mtgsdk) that I wrote about [here](https://dev.to/rogertorres/rest-api-wrapper-with-rust-mk4).

This will lead you to this GitHub proposal, which will do exactly what we're set to do here, i.e., build and test:
![Workflow proposal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qawjl7h9op3bi27fjatc.png)

GitHub will preview the `.yml` file it will create. For this scope, you don't have to change anything (except  maybe the `name` from "Rust" to something else — I used "test").
![yml preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijt85753h6odw1vk9eqj.png)

Commit the change clicking on the button that will appear on the right and the file will be created:
![After commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lncchmvn2svx6068rmn.png)

Now, if you go to **Actions** again, you will see GitHub creating your **.yml** file. For me, it took around 2 minutes.
![Building yml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i12lw4b8lyl7tr58xdok.png)![yml built](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7ke1u2hymkr3f00exc1.png)

And that's it. From now on, every time you `push` against the repository, GitHub will run the tests for you.
![After push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzgxpvgmedft7zexpacb.png)

To see the result of the commit above, see the **Build** log [here](https://github.com/rogertorres/mtgsdk/runs/2993657655?check_suite_focus=true).

---

And that's all for today.

See ya 🙃

_Cover image by [Susan Q Yin](https://unsplash.com/photos/BiWM-utpVVc)_
6 Steps Startup Launching Checklist for First Time Entrepreneurs
Tags: startup
Published: 2021-07-07 14:11:13

Launching your small business startup is much easier with a clear, step-by-step outline; heres what you need to know:

Step 1: Organize your table of contents. With this plan, you'll outline each aspect of your business, such as your mission statement, products and services, number of employees, and information about your target market.

Step 2: Collect attachments and appendix materials. They are vital if you are planning to pitch your online business to potential investors or business partners.

Step 3: Create a list of key topics and sections. This document will create a cohesive document, as well as provide a firm guide for your business planning process. 

Step 4: Assign projects and tasks for each area. It helps you break down each goal into action steps, so it is an effective business planning strategy.

Step 5: Write up an executive summary for your small business startup. You can complete the entire plan in a few short pages by doing this step.

Step 6: Get an outsider's perspective. Although you need to keep your business planning strategy and ideas confidential, talking to trusted colleagues or friends about your plan can provide you with some insights.
[CSS] Scroll snap example
Tags: codepen, css, html, ui
Published: 2021-07-07 13:57:02

<p>Scroll snap example for presentation websites</p>

{% codepen https://codepen.io/FlorinCornea/pen/mdmPqvy %}

Let's start with a simple HTML structure:

```HTML
<div class="section-wrapper">
  <section class="page-one">
    <p>Scroll dowb just a little bit</p>
  </section>
  <section class="page-two">
    <p>A bit more</p>
  </section>
  <section class="page-three">
    <p>And more</p>
  </section>
  <section class="page-four">
    <p>Now scroll up</p>
  </section>
</div>
```

Now for the css scroll snap part:

```CSS

.section-wrapper {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow: auto;
}

section {
  height: 100vh;
  scroll-snap-align: start;
  transition: scroll-snap-align 2s;
}

``` 

<p>We need to add `scroll-snap-align` with the individual sections and the `scroll-snap-type` to the element that contains all the sections</p>

<p>Looking forward to see other examples that you might have</p>
Hack your own powerful Chromebook for less than $200
Published: 2021-07-07 13:48:30

Alright, so you have your main computer, a great powerful MacBook or Windows notebook, that can command the power of the gods on demand. 80 gigabytes in your `node_modules` directory? No problem for this beast.

![Giphy](https://media.giphy.com/media/XXAKgZR1EbAqmuGBE9/giphy.gif)

But sometimes wouldn't it be great just to have just one more computer? Let's say your friend comes over and forgets his computer. So not only are they eating those amazing cookies you got for yourself but also using your damn computer and snooping across your email. Yeah, we've all been there. 

I'm often surprised at how often programmers assume they need to spend like a thousand dollars on every computer since that's what they use themselves. In fact, there is a super cheap way you can build a powerful (not slow) Chromebook yourself for around $200 or less. 

Here's how you do it!

## Get a computer

Go on [eBay](https://ebay.com) and find a used business class laptop that's 3-4 years old. 

See a lot of big companies acquire Dell, HP, and Lenovo business notebooks in masse. Their employees use the machines for 3 years and then they sell them to wholesalers who retail them as used laptops. These wholesalers clean them up, install a new Windows license, and then sell them at a premium. However, some will sell them as-is without any reconditioning for super cheap. That's what we are looking for. We're also specifically looking at business class laptops since they are way more durable than the consumer class laptops that you might normally see at a retail store.

Here's a good example of one a [Dell 5480](https://www.ebay.com/itm/114879975632)

The HP EliteBooks are also a good choice. You can see a list of them on [Wikipedia](https://en.wikipedia.org/wiki/HP_EliteBook). The older the unit, the slower and cheaper. 

## Install [CloudReady by Neverware](https://www.neverware.com/#intro)

Make sure the laptop is certified by [Neverware](https://guide.neverware.com/supported-devices/) as compatible. This is the Google owned company that makes a version of Chrome OS that can be installed anywhere. Most business class laptops are certified though. 

## Adjust coffee table to perfect height using laptop as paper weight.

*Just kidding, go enjoy your new Chromebook*
Improving Horizontal Scroll with CSS Scroll Snap
Tags: css, html, beginners
Published: 2021-07-07 13:46:00

The pattern with horizontal scroll is frequently found in mobile versions of sites.

For example, on Airbnb's home page:

![Airbnb's vertical scroll block example](https://cdn.hashnode.com/res/hashnode/image/upload/v1625578932305/bcl8gXkXf6.gif)

It looks smooth and the scroll always stops at the beginning of a card, but there are many bad examples on the Internet when the scroll stops in random positions. I'll not provide links to these sites, but I've created a demo for you, please see it on your phone: 

[codepen](https://codepen.io/golubkov-p/full/dyWGEKe)

Try to enable and disable CSS Scroll Snap behaviour by toggling the checkbox on top of the page and see a difference when scrolling.  The difference is enormous. When CSS scroll snap is enabled, the scroll behaviour is more smooth and looks like a native app.

This behaviour is achieved by 2 simple CSS rules:

```css
.scroll-container {
  scroll-snap-type: x mandatory;
}

.scroll-container-child {
  scroll-snap-align: start;
}
```

Cool, right? You can read more about CSS Scroll Snap on  [mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap).

## Browser's support

![Browser's support table](https://cdn.hashnode.com/res/hashnode/image/upload/v1625664933009/ZTo8A0hQSf.png)

It has nice browser's support and can be used in production. [Can I Use](https://caniuse.com/?search=CSS%20Scroll%20Snap).


## That's it

Thank you for reading! Add your reactions and comments.

Follow me on [Twitter](https://twitter.com/paulcodes_tech).
Huffman Coding Compression Algorithm
Tags: programming, algorithms, tutorial, computerscience
Published: 2021-07-07 13:35:44

Huffman Coding is an algorithm for doing data compression and it forms the basic idea behind file compression. In this article, we are going to talk about the construction of Huffman Tree and how to decode it.

How does Huffman Coding work?
Suppose the string below is a message to be sent over a network.

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

Each character occupies 8 bits. There are a total of 20 characters in the string. This means, our final message is 8×20 = 160 bits. Using the Huffman Coding technique we can compress the string to a smaller size.

Steps to build Huffman Tree
1- We have to create a table showing the frequency of each character in the sentence including spaces, punctuations, and any other characters.
2- Order the list by frequency. The only order that is important is that they are ordered by frequency, the highest value at the top.![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1jps92m7lc0g2thbw50.png)

3- It’s time to draw the tree!
Start from the least frequent items and put these into circles, starting at the bottom right of your paper.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlwop050mt5zp7863zth.png)

Take the two items furthest to the right, pair them together, joining the branches by summing the frequencies together. Continue to do so until you have matched the pairs you can, leaving any spares at the moment.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1ieacbv6529wzz9qspd.png)

Start at the root node (In this example root node is ‘20’), put 0 next to each lefthand branch, and 1 against each right-hand branch:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uafhsdvpa1heoc19wcm.png)

Start from the root node, find the path to each character (called leaf node), identify the 1 and 0 branches you have to use to get to each one. Place these in the Code column of your table.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ivc70t0kv4e22grvhvs.png)

To reach the compressed message, we have to sum characters (8×5 bits) and codes (5×3 bits).
40+15 = 55

At the beginning of the article, we discussed that our final message was 160 bits. The compressed message is 55 bits. That means we saved 60 bits!

Initial String
BCCABBDDAECCBBAEDDCC
Compressed message 101111001101001010010001111101000100001011111

Decoding Huffman-encoded Data
The decoding procedure is deceptively simple. To avoid ambiguity, Huffman encoding is a prefix-free encoding technique. No codeword appears as a prefix of any other codeword.

To decode the encoded string, follow the zeros and ones to a leaf and return the character there.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50mr4vfvuw3evcw3cv11.png)
Neumorphic Login Form In Bulma
Tags: bulma, webdev, ux, css
Published: 2021-07-07 13:34:27

Neumorphic Design is a new trend in the user interface with a proper combination of background colors. So here we made Login form in Bulma with Neumorphic Effetcs.

In this element, we modify Bulma’s classes and also use media queries to make it responsive. Here we used Bulma input components and also used utilities classes. This is a responsive modal for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/neumorphic-login-form-in-bulma/)
eslint command line options supported by next lint (incl. --fix)
Tags: nextjs, eslint, react, codequality
Published: 2021-07-07 13:33:57

next.js comes with its own CLI for linting your code, `next lint`, which is basically a preconfigured wrapper around eslint.

What the documentation doesn't tell you though is whether this wrapper accepts the same command line options as eslint. The short answer is: it doesn't. At least not _all_ of them, but a whole lot more than the only one documented by next.js' sparse documentation for this command, the `--dir` flag.

I found out about this only via [this GitHub issue](https://github.com/vercel/next.js/discussions/26179). It links to [this file on GitHub, which contains a comment with the full list of supported options](https://github.com/vercel/next.js/blob/canary/packages/next/cli/next-lint.ts#L91-L120)

The exact list and place might change in the future, but it should pretty much always stay in that file, which is where you will find the most recent version of the list. Still, for convenience's sake, here's the list as of 2021/07/07:

```
Options
        Basic configuration:
          -h, --help                     List this help
          -d, --dir Array                Set directory, or directories, to run ESLint - default: 'pages', 'components', and 'lib'
          -c, --config path::String      Use this configuration file, overriding all other config options
          --ext [String]                 Specify JavaScript file extensions - default: .js, .jsx, .ts, .tsx
          --resolve-plugins-relative-to path::String  A folder where plugins should be resolved from, CWD by default
        Specifying rules:
          --rulesdir [path::String]      Use additional rules from this directory
        Fixing problems:
          --fix                          Automatically fix problems
          --fix-type Array               Specify the types of fixes to apply (problem, suggestion, layout)
        Ignoring files:
          --ignore-path path::String     Specify path of ignore file
          --no-ignore                    Disable use of ignore files and patterns
        Handling warnings:
          --quiet                        Report errors only - default: false
          --max-warnings Int             Number of warnings to trigger nonzero exit code - default: -1
        Inline configuration comments:
          --no-inline-config             Prevent comments from changing config or rules
          --report-unused-disable-directives  Adds reported errors for unused eslint-disable directives ("error" | "warn" | "off")
        Caching:
          --cache                        Only check changed files - default: false
          --cache-location path::String  Path to the cache file or directory - default: .eslintcache
        
        Miscellaneous:
          --no-error-on-unmatched-pattern  Prevent errors when pattern is unmatched - default: false
```
Quick Introduction to class in C++
Tags: cpp, tutorial, programming, class
Published: 2021-07-07 13:32:59

A class is a data type that you define and you can also add some functions that work on this data type. That's it, that is exactly what a class is! Thank you for reading this article and I'll see you in the next one.

**wait** . . .

Above explanation is simple and covers what a class is in as little words as possible but there are more caveats related to it and I'll go over them in this article. 

### Declaring a class

```cpp
class Cat {
   private:

      // data memebers
      string breed;
      int legs;

   public:
      // constructor
      Cat () {  
        breed = "Sphynx";
        legs = 4;
        meow = true;
      }

      // member function
      void setLegs(int num) {
         legs = num;
      }

      // member function
      void setBreed(string breed_name) {
         breed = breed_name;
      }
};
``` 

#### Data members

What you create of classes are `objects`. These `objects` have certain properties that can be accessed and these can be defined in the class as **data members**. For a Table it can be wood type, number of drawers, length, height etc. By creating an object of a table, you can assign values to these properties in accordance with their data types.

> A class is a plan, object it's execution 

#### Member functions

You might want your objects to perform some tasks and for that you write member functions. These functions are like regular functions accept they are only accessible to the object of the class; which means the functions can or can not take parameters, it can or cannot or return something back. Member functions are a powerful and you must use them with caution.

_Inheritance_ in C++ can be achieved by deriving a class from another class of which access specifiers are an important part. I'll pick these topics up in my future articles. Stay tuned! If you want to read more about classes, head over [here](https://en.cppreference.com/w/cpp/language/class)

Thanks for giving this article a read and I'll see you in the next one 😄

> PS: This is an article in my series Quick Introduction to a concept in C++. You can find all the articles in this series [here](https://dev.to/guptaaastha/quick-introduction-to-a-concept-in-c-15n6). I also answer why I don't use the series feature by [dev.to](https://dev.to/guptaaastha/) there.
Everything about Top CSS Gallery
Tags: topcssgallery, cssgallery, webdesgin
Published: 2021-07-07 13:26:20

Top CSS Gallery is a unique design global platform for showcasing and awarding the top websites with <a href="https://www.topcssgallery.com/most-liked/">CSS web design</a>. Our platform is endorsing, backing, supporting and promoting work of best web designers, developers, freelancers and digital marketing agencies. We popularize the finest websites built elsewhere through CSS Gallery, increasing their competency and consistency as well as awarding the most excellent out of them. Please explore the CSS design examples in our Top CSS Gallery website.

<b>Awards</b>

Prestigious awards are presented for exceptional creativity and technical aptitude for CSS web design. Front runners are being greatly rewarded and acknowledged for innovative web design trends by means of industry leaders and the multiple daily visitors of our Top CSS Gallery website.

There are numerous CSS design gallery features to be evaluated to meet our range of selection criteria. The selected website gallery submissions that have healthier scores have a better chance to be nominated for the particular title of ‘Site of the Day (SOTD)’. SOTD website is specifically placed and being presented on our home page. The details will also be publicized on social media and professional networks to make the belongings popularized.

<b>Team</b>

To make this achievable, we have a team of expert designers is working for Top CSS Gallery website continuously day in day out. This team keeps a very close watch on every website gallery submission considering the worth of the sites. It ranks sites in the back-end on the basis of the features like customer experience, innovation in design, overall creativity and quality of content being displayed by these websites. All of them are skilful in this procedure and well practised in the domain of website design as well as graphic designing.

<b>Evaluation</b>

Any approved website submission is entitled to participating and receiving an award based on the evaluation. Top CSS GALLERY website comes up with new awards and winner sections in the website on regular time intervals. As mentioned above we give importance to all the authentic submissions. Our privacy policy has the full rights to deal with the submission and result rules we have prepared for evaluating and judging our CSS awards. The submitted designs always remain the sole property of the website owner and the winners do not carry the right to question our web portal rules. The winners are being honoured with best of their reputation online and being presented amongst the popular digital space.

Other than <a href="https://www.topcssgallery.com/site-of-the-day/">Site of the Day</a> (SOTD) awards there is even another recognization like the most recent, most liked and most visited website listing awards.