teleren/devto huggingface dataset:
Still 100 underline/overlay animations | The advanced CSS collection 🚀
Tags: css, webdev, codepen
Published: 2021-04-28 15:06:28

300 animations were not enough? Ok, I have done 100 more animations and, guess what, still No extra elements, No pseudo element, No SVG, No Keyframe and No JS. Only **one** element and some magic transitions!

This time I will introduce the `@property` to be able to animate CSS variables. Sorry Firefox users, most of animations won't work since there is no support for `@property`. I highly recommend Chrome or Edge to fully enjoy all the 100 animations!

Refer to my previous article for more detail about `@property`:

{% link https://dev.to/afif/we-can-finally-animate-css-gradient-kdk %}


----

## Table of content

* [The Shape II](#the-shape-ii)
* [The Multi-Steps](#the-multisteps)
* [The Mixed](#the-mixed)
* [The Colorful](#the-colorful)
* [The Pixelated](#the-pixelated)
* [The Irregular II](#the-irregular-ii)
* [The Multicolor II](#the-multicolor-ii)
* [The All Sides III](#the-all-sides-iii)
* [The Fancy IV](#the-fancy-iv)
* [The Inverted IV](#the-inverted-iv)
* [The Broken II](#the-broken-ii)
* [The Crushed](#the-crushed)
* [The Area 51](#the-area-51)
* [The Arcade II](#the-arcade-ii)

---

### The Shape II

{% codepen https://codepen.io/t_afif/pen/BapEMRd %}

### The Multi-Steps

<sub>PS: all the below will not work on Firefox</sub>

{% codepen https://codepen.io/t_afif/pen/rNjbPzR %}

### The Mixed

<sub>PS: #6 will not work on Firefox</sub>

{% codepen https://codepen.io/t_afif/pen/KKaYJyx %}

### The Colorful

{% codepen https://codepen.io/t_afif/pen/xxgeMWb %}

### The Pixelated

{% codepen https://codepen.io/t_afif/pen/abpxXRz %}

### The Irregular II

{% codepen https://codepen.io/t_afif/pen/GRrLzwM %}

### The Multicolor II

<sub>PS: all the below will not work on Firefox</sub>

{% codepen https://codepen.io/t_afif/pen/BapEMvr %}

### The All Sides III

<sub>PS: #1, #2 and #7 will not work on Firefox</sub>

{% codepen https://codepen.io/t_afif/pen/LYxvaPb %}

### The Fancy IV

<sub>PS: all the below will not work on Firefox</sub>

{% codepen https://codepen.io/t_afif/pen/OJWGqJE %}

### The Inverted IV

The below will not work on Firefox due to a [known bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1571244) and also due to the lack of support for `@property`

{% codepen https://codepen.io/t_afif/pen/yLgrwaB %}

### The Broken II

{% codepen https://codepen.io/t_afif/pen/abpxMWB %}

### The Crushed

{% codepen https://codepen.io/t_afif/pen/NWdmJvm %}

### The Area 51

**☢️ Danger Zone**: hover the below at your own risk!

<sub>PS: #2 will not work on Firefox</sub>

{% codepen https://codepen.io/t_afif/pen/NWdmJyV %}

### The Arcade II

**Warning**: the below may 🤯🤯 

<sub>PS: All the below will not work on Firefox</sub>

{% codepen https://codepen.io/t_afif/pen/YzNMgvL %}

----

### That's it!

Tell me which one is your favorite 👇 and don't forget to ❤️🦄 if you want me to do another collection. Can we make this reach 500 animations? Your reactions will decide!

---

{% post https://dev.to/afif/still-100-css-loaders-for-your-next-project-57hp %}
Hooks in React
Tags: react, javascript, hooks, webdev
Published: 2021-04-28 15:06:11

## Introduction
When it comes to web development, who doesn't love using one of the most awesome and lively featured Javascript library, React, often referred to as ReactJS. Today we are going to know about of the most awesome feature of ReactJS' version 16.8.
Cutting the chase, I was introduced to the awesome world of React by my mentors at my current workplace, and since then I am after React and learning it as much as I can in a befitting manner. And no doubt, one of the most fascinating features to me was **React Hooks**.

## What are hooks in **React**?
Hooks were introduced in React Version 16.8. One of their most awesome and well knows feature is it that they let you use state and other React features in a *Functional Component*. 
So Basically, Hooks are the functions which literally, Hook Into, React state, and lifecycle features from functional components.

## How Hooks work?
Before we know how React hooks work, let us define what closure is. “Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.”

To make it a bit easy to understand, hooks let you use the functions instead of switching between HOCs, Classes, and functions. As Hooks are regular Javascript functions, thus you can use the built-in Hooks and create your own custom one.

## Always remember
* Hooks should always be called at the Top Level.

By following this rule, you are making sure that Hooks are always called in the same order as they were declared each time your component renders. (Remember that don't ever call the hooks inside the functions that are nested and also inside the loops.)

* Hooks should always be called from React Functions.
Don't call Hooks from regular JavaScript functions. Instead, you can

1. Call Hooks from React Function components.
2. Call Hooks from custom Hooks.

Can't quench your thirst for learning more about hooks in react? Stay tuned for more articles on types, examples, usages, and other aspects of mastering the art of using hooks in React.
Why to use »npm ci« instead of »npm install«
Tags: npm, devops, php, webdev
Published: 2021-04-28 15:02:14

We had some problems with our pipelines/actions lately, which could easily be resolved by using `npm ci` instead of `npm install`.

## The short version
Use `npm install` to update and install your dependencies.
Use `npm ci` to only install your dependencies.

Always use `npm ci` in your pipelines/actions, never `npm install`.

## Don’t compare it with composer
Personally, I do have a strong PHP background and am using composer as PHP’s Package dependency manager on a daily basis.

One of the first things you would learn about composer, is the difference between the install and update command:
`composer update` will read your composer.json, update all dependencies, write those in your composer.lock file and install them afterwards.

In case you only want to install your packages as locked in your composer.lock file, use `composer install` instead. This will ensure, that your production environment uses the same dependency versions.

That does make sense, right? This is what we want to use in our pipelines or actions (depending which kind of CI/CD you are using). This does make sure to not auto-update dependencies when deploying. Maybe some updated ones might break something.

## Let’s transfer this knowledge to npm
Do we agree, that we want to update dependencies locally, lock those dependencies in our lock-file and only want to install those dependencies as we did lock them?

This does avoid any auto-update which might break something in you application. That’s the exact reason, `composer install` is being widely used in all production pipelines that I have seen.

## `npm install` does work in a different way than `composer install`
This is the key element to understand! Those commands are not the same. Let me explain:

Unlike `composer install`, `npm install` will update your dependencies before installing. This isn’t logical at all when you have a PHP background, but it’s important to understand and you need to deal with it.

Running `npm install` or `npm update` are nearly the same and will update your `package-lock.json`, which is what you want to avoid in production.

If you want the same functionality as `composer install`, use `npm ci`.

## Use `npm ci` if you don’t want to update
`npm ci` will parse your `package-lock.json`, won’t do any updates and install those packages.

This is exactly the same as using `composer install` in the PHP world.

## Please update your Pipeline or Actions
If you do use any kind of Pipelines or Actions, make sure to use `npm ci`, to avoid any problems.

This will avoid merge conflicts. Just in case: Yes, you should version control your package-lock.json file, so every developer working with your project will use the same dependencies as you do and as your production environment does.

Besides this and other occurring problems, it will make your pipelines and actions faster, as `npm ci` will be finished in less time than `install`.

I hope this was helpful. 

- - - 
Cover image by https://unsplash.com/@romanenko29061983
Coupling And Cohesion
Tags: devjournal, computerscience, python, django
Published: 2021-04-28 14:52:27

**TL;DR**
If you know about this, do something better with your time.

Working for a startup, they tell me to setup an Authentication User using Django.

I'm a Javascript Developer, with perhaps a skill of 8.8/10, i'd use Python but for educational purpose, so this is kind of new to me.

Looking at the [Django Quick Start From Mozilla](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction) 

And later at their [Django Docs](https://docs.djangoproject.com/en/3.2/#the-django-open-source-project), in the Design Philosophies link and after reading [Coupling and Cohesion](http://wiki.c2.com/?CouplingAndCohesion)

I'll argue that in Software Engineering
The less responsabilities and interdependence you have between modules or components, the better.
I'm gonna applied this gem, to my life.

Have a nice day!
How To Check for a particular Route then apply condition in laravel (blade)
Tags: laravel, php
Published: 2021-04-28 14:35:41

---
title: How To Check for a particular Route then apply condition in laravel (blade)
published: true|
canonical_url: https://jovialcore.tech/how-to-check-for-a-particular-route-then-apply-condition-in-laravel-blade/
description: 
tags: laravel, php
//cover_image: https://direct_url_to_image.jpg
---

I want to use a single nav bar (in layouts/app.blade.php) for all my pages in laravel but I wanted a way I could show a particular search form right on the navbar for only a particular page without duplicating layouts.

Here is how I solved it with named routes:

So I need to check if a URL is exactly like, e.g,  "page" and then I show something.

My web.php 
```
Route::get('/pages', function () {
    return view('page');
})->name('page');
```

My layouts/app.blade.php
```
<nav class="navbar">
   <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Coventions</a>
          </li>
        </ul>

   @if (\Route::current()->getName() == 'page') 

<form >
<input name="s" type="search">
</form>

@endif 

<button> Upload </button>

</nav>
```

So whats happening above: I simply mean that if the route is same as `'page'` every other thing under the blade `@if` (which is the search form )condition will show else, it should just ignore and display the rest.

I hope it helps.
Java 9 Private Interface Method
Tags: java9, java, interface
Published: 2021-04-28 14:50:00

https://grokonez.com/java/java-9/java-9-private-interface-method

Java 9 Private Interface Method

In this article, we're gonna take a look at Java 9 Private Interface Method which helps us avoid duplicate code and keep encapsulation for interface.

<!--more-->
<h2>1. Java 8 - Interface</h2>
<a href="https://grokonez.com/java-tutorial/java-8">Java 8</a> provides 2 new features for <strong>Interface</strong>: <strong>default</strong> methods and <strong>static</strong> methods.

This is an example of Java 8 interface:
<pre><code class="language-java">
public interface ICustomerService {

	default void healthcare(String name) {
		System.out.println(name + " registers for customer service.");
		System.out.println("-- get HealthCare Service.");
	}

	default void consult(String name) {
		System.out.println(name + " registers for customer service.");
		System.out.println("-- get Consultation Service.");
	}
}
</code></pre>
To make code easy to read and clear, we can create new <code>register()</code> method inside:

More at:

https://grokonez.com/java/java-9/java-9-private-interface-method

Java 9 Private Interface Method
UI Dev Newsletter #54
Tags: webdev, html, css, javascript
Published: 2021-04-28 14:44:25

This newsletter started a year ago. No issue skipped for a whole year! Thank you for your support. If you want to help me get this newsletter running, use the following link: https://www.buymeacoffee.com/p8Ug5NM. 

- [Profiling site speed with the Chrome DevTools Performance tab](https://bit.ly/32LxZD9)
Matt Zeunert explains how to use DevTools to profile your site and interpret the results.


- [The Almost-Complete Guide to Cumulative Layout Shift](https://bit.ly/3gDtRNO)
Jess Peck shares an opinionated explanation of CLS: what it is, how to measure, and how to fix it.


- [Building split text animations](https://bit.ly/3xnLTJW)
Adam Argyle shares different ways to solve split text animations and interactions that are minimal, accessible, and work across browsers.


- [Float an Element to the Bottom Corner](https://bit.ly/3aCG41n)
Temani Afif shows how to lay out an element to the bottom corners and wrap text around it.


- [Accessibility is a priority](https://bit.ly/3xnLSWo)
Elabbassi Hicham discusses the importance of accessibility on the web, what are the current issues, and how to act on your websites to make them a bit more accessible.


- [Use Google like a pro](https://bit.ly/3ezrPM5)
Marko Denic shows how to get better at Googling by using ten simple yet powerful techniques.


- [2021 CSS Developer Roadmap](https://bit.ly/32IZWLQ)
George Moller shares a 10-step summary for learning CSS in 2021.


- [Charts.css](https://bit.ly/2PmoKX5)
Charts.css is a CSS data visualization framework.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Reverse String in one line
Tags: javascript, java, streams
Published: 2021-04-28 11:46:57

Yesterday, while scrolling Twitter I stumbled upon this one: {% twitter 1387021418743877633 %} 
At first, I was amazed how much JavaScript has changed since the last time I tried it. Spread operator and useful methods directly on array objects are something that I am missing in Java. 
Naturally being a Java dev, as I was looking at JS code I tried to transpile it to Java code. Initial code would look something like this:
```java
public String reverse(String in){
    String[] split = in.split("");
    Collections.reverse(Arrays.asList(split));
    return String.join("", split);
}
```
This works but this is more than one line. To produce oneliner I started looking at Java Stream API and its methods. While I was aware that all intermediate operations are out of the question for such a task, I started looking at available Collectors. 
My search came back empty and I had to resort to implementing custom Collector:
```java
public String reverse(String in){
    return Arrays.stream(in.split("")).collect(new Collector<String, List<String>, String>() {
        final List<String> helper = new LinkedList<>();
        @Override
        public Supplier<List<String>> supplier() {
            return () -> helper;
        }

        @Override
        public BiConsumer<List<String>, String> accumulator() {
            return (strings, s) -> strings.add(0, s);
        }

        @Override
        public BinaryOperator<List<String>> combiner() {
            return null;
        }

        @Override
        public Function<List<String>, String> finisher() {
            return strings -> String.join("", strings);
        }

        @Override
        public Set<Characteristics> characteristics() {
            return new HashSet<>();
        }
    });
}
```
There it is! Technically it's a oneliner. Our supplier method is a simple list, when we add a new item to the list we always do it at the beginning of the list as in the accumulator method. The finisher combines a list into a resulting String. We don't implement combiner because parallel streams are not ordered and we cannot lose the initial string order.
Of course, this is overkill and I did it just for fun, but I got to admit how powerful the Collector API is. 
Do you have another way of writing this method? Write it in the comments! Thanks for reading!
Setting up ESLint for Vue 3 in VSCode
Tags: vue, tutorial, webdev
Published: 2021-04-28 14:22:45

### Make sure eslint is installed and updated for your project
``` 
npm install --save-dev eslint eslint-plugin-vue
```

### Create a .eslintrc.js file in your projects root directory:
```javascript
module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/vue3-recommended',
    // 'plugin:vue/vue3-essential', // This option doesn't impose formatting rules
    // 'plugin:vue/vue3-strongly-recommended', // This option imposes formatting rules on your code to improve readability 
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}
```

### Disable vetur in VSCodes settings (if you had it installed)
I'd personally recommend only disabling it on the project level using the workspace settings tab. Mainly because if you still have some vue 2 projects you want vetur to continue to lint them.
```
"vetur.validation.style": false
```
vetur doesn't yet support vue 3 fully so it can conflict with some of the new features. If you add a ` <Teleport> ... </Teleport> ` to a component, you'll see a huge red wall because vue 2 didn't support multiple root elements in a component, while vue 3 does. 

### HTML All The Things
While you're here, check out the [HTML All The Things Podcast](https://podcast.htmlallthethings.com/) that I co-host. We talk about **Web Development, Freelancing, Small Business and Productivity**. 

### Resources

[https://eslint.vuejs.org/user-guide/#installation](https://eslint.vuejs.org/user-guide/#installation)
Promising your asynchronous operation
Tags: javascript, programming, webdev
Published: 2021-04-28 14:20:43


Incase of multiple *async* operations, the use of callback can quickly result in **[CALLBACK HELL](http://callbackhell.com/)**. Callback hell is when visually, execution is happening top to bottom.

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


With the introduction of promise the chaining of functions was made simple and straightforward, simplified the code and improved its readability.


**Promises in JavaScript**
Promise is an JavaScript object that comprises of 3 states:

**Pending:** Initial State, before the Promise succeeds or fails
**Resolved:** Completed Promise
**Rejected:** Failed Promise

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

Creating a promise is simple matter of calling the promise constructor. The *resolve* and *reject* functions for settling the promise state, are passed to the promise constructor:

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

A simple subscription can be made to the fate( settled state of promise) by using *.then* (if resolved) or *.catch* (if rejected).

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sez70cumvgdb0g7f63s.PNG)

**WRAPPING UP**
Promise is a broader topic that cannot be summed up in one article. The aim of this post was to get you familiarized with Promises in JavaScript and how to create and use them
Testing of ASP.NET Core MVC apps using Microsoft Test Host
Tags: dotnet, csharp, aspnetcore
Published: 2021-04-28 14:17:54

Automated testing is highly important. It helps not only to keep your code working after some changes but also makes easier the process of writing the code (TDD).

There are several approaches of testing ASP.NET Core MVC applications. The simplest one is just to create an instance of controller and call its methods in the test:

```csharp
public class SomeControllerTests
{
    [Test]
    public async Task GetAll_ShouldReturnAll()
    {
        // Arrange
        var service = new SomeService();
        var controller = new SomeController(service);

        // Act
        var result = controller.GetAll();

        // Assert
        // TODO check result
    }
}
```
But this approach has several problems:
* You need to create controller with all dependencies
* You don't test HTTP part (routing, status codes, serialization)

These problems could be solved using Microsoft.AspNetCore.TestHost nuget.

```csharp
public class TestFixture
{
    public HttpClient HttpClient { get; private set; }

    public async Task Initialize()
    {
        var builder = new HostBuilder()
            .ConfigureWebHost(webHost =>
            {
                webHost.UseTestServer();
                webHost.UseStartup<Startup>();
                ConfigureWebHost(webHost);
            });

        _host = await builder.StartAsync();
        HttpClient = _host.GetTestClient();
    }

    private void ConfigureWebHost(IWebHostBuilder builder)
    {
        IConfigurationRoot configurationRoot = null;
        builder.ConfigureAppConfiguration((context, conf) =>
        {
            conf.AddJsonFile("appsettings.json");
            configurationRoot = conf.Build();
        });

        builder.ConfigureTestServices(services =>
        {
            // Here you can overwrite some services
        });
    }
}
```
You also need a small class which will help to serialize request models:

```csharp
public class JsonContent : ByteArrayContent
{
    public JsonContent(object obj) : base(ConvertToBytes(obj))
    {
        Headers.ContentType = new MediaTypeHeaderValue("application/json");
    }

    private static byte[] ConvertToBytes(object obj)
    {
        var serialized = JsonConvert.SerializeObject(obj);
        return Encoding.UTF8.GetBytes(serialized);
    }
}
```
Now you can create fake http host in your tests:
```csharp
public class SomeControllersTests
{
    private TestFixture _sut;

    [SetUp]
    public async Task Setup()
    {
        _sut = new TestFixture();
        await _sut.Initialize();
    }

    [Test]
    public async Task GetAll_ShouldReturnAll()
    {
        // Act
        var request = new SomeRequest
        {
            // Some request data
        }

        var response = await _sut.HttpClient.PostAsync($"some-route", new JsonContent(request));

        // Assert
        // TODO check response
    }
}
```

Also you can add required authorization by manipulating with HttpClient.

GLHF

# Links
1. https://docs.microsoft.com/en-us/aspnet/core/test/integration-tests?view=aspnetcore-5.0