teleren/devto huggingface dataset:
Javascript Animation 18
Tags: javascript, webdev, css
Published: 2022-05-08 01:10:07

Whatever you do on Javascript, you have to understand the roots and focus on the basic knowledge.
# 1. Loading Animation 1  
{% codepen https://codepen.io/php-hacker/pen/LYzQMro %}
# 2. Loading Animation 2   
{% codepen https://codepen.io/php-hacker/pen/jOGZXYw %}
# 3. Gallery   
{% codepen https://codepen.io/php-hacker/pen/QWqQzrg %}
# 4. Clock 
{% codepen https://codepen.io/php-hacker/pen/abLqPYQ %}
# 5. Flame Button Animation     
{% codepen https://codepen.io/php-hacker/pen/mdBXaxJ %}
Javascript Animation 17
Tags: javascript, webdev, css
Published: 2022-05-08 01:03:50

Whatever you do on Javascript, you have to understand the roots and focus on the basic knowledge.
# 1. Clipping path  
{% codepen https://codepen.io/php-hacker/pen/ExwQGzM %}
# 2. Point terrain   
{% codepen https://codepen.io/php-hacker/pen/poWaqBL %}
# 3. Mobius
{% codepen https://codepen.io/php-hacker/pen/dyVdwry %}
# 4. Snake game     
{% codepen https://codepen.io/php-hacker/pen/YzreddP %}
# 5. Glowing text animation   
{% codepen https://codepen.io/php-hacker/pen/VwMQqGZ %}
Javascript Animation 16
Tags: javascript, webdev, css
Published: 2022-05-08 00:59:44

Whatever you do on Javascript, you have to understand the roots and focus on the basic knowledge.
# 1. Liquid tab  
{% codepen https://codepen.io/php-hacker/pen/KKXQJde %}
# 2. 2D digital animation   
{% codepen https://codepen.io/php-hacker/pen/BawYMNZ %}
# 3. Parallax tilt effect
{% codepen https://codepen.io/php-hacker/pen/abLqXbr %}
# 4. Point cloud     
{% codepen https://codepen.io/php-hacker/pen/gOGvqYL %}
# 5. Circle animation   
{% codepen https://codepen.io/php-hacker/pen/jOGZXjZ %}
Javascript Animation 15
Tags: javascript, webdev, css
Published: 2022-05-08 00:56:14

Whatever you do on Javascript, you have to understand the roots and focus on the basic knowledge.
# 1. Send Button  
{% codepen https://codepen.io/php-hacker/pen/MWEQNZG %}
# 2. Text Animation   
{% codepen https://codepen.io/php-hacker/pen/BawYXGQ %}
# 3. Dragon effect
{% codepen https://codepen.io/php-hacker/pen/RwLQvpK %}
# 4. Water wave animation     
{% codepen https://codepen.io/php-hacker/pen/jOGZdMK %}
# 5. Particle background animation   
{% codepen https://codepen.io/php-hacker/pen/jOGZdWx %}
Javascript Animation 14
Tags: javascript, webdev, css
Published: 2022-05-08 00:50:55

Whatever you do on Javascript, you have to understand the roots and focus on the basic knowledge.
# 1. Flip book effect  
{% codepen https://codepen.io/php-hacker/pen/WNZMVBZ %}
# 2. Menu-Spotlight/Highlight  
{% codepen https://codepen.io/php-hacker/pen/MWEQNRX %}
# 3. Circle tunnel animation
{% codepen https://codepen.io/php-hacker/pen/QWqQeoq %}
# 4. Sliding value addition and subtraction     
{% codepen https://codepen.io/php-hacker/pen/JjrpgxV %}
# 5. Cube slider   
{% codepen https://codepen.io/php-hacker/pen/BawYXMp %}
Webdev Browser Extensions
Tags: webdev, productivity
Published: 2022-04-10 19:18:39


Here's a list of chromium browser extensions I use to be more productive as a web dev.
Posting it here in case you find these useful too.

1. Web Developer [Link](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/semjkrwblcv3ukavkbly.jpg)
A handy extension for web dev utilities if you are like me who prefers to show block element borders in a click.

2. CSS Inspector [link](https://chrome.google.com/webstore/detail/css-inspector/ncgpjidaohcjajcpafgagmejnooepbml)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zi2su0ehnsutt32vuse.png)
Quickly view element's css and copy styles.
Much polished than [CSSViewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce).
Will require a subscription key in exchange for a donation,
but you can have it for free.
This extension is well made that you'll feel guilty for not donating.



3. Colorzilla [Link](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)
My color picker of choice.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7gk8sqg6tebmvbejuem.jpg)

4. PixelPerfect [Link](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi)
Easily compare your working web page to your design, for pixel perfection (is that really a thing?)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lytb6y5mki0kd5f57htt.jpg)

5. JSON Viewer [Link](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh)
Pretty prints json and set theme if you get eyesore viewing default light theme.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0r7gbr6fbv6a4kwuvfy.jpg)

6. Accessibility Insights [Link](https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni)
Do quick A11y tests.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3cbxskclpmjf8c2p3o4.jpg)

7. Vue Devtools [Link](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
A must have for a vue js dev.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvq3l1zln45amee7ffzt.jpg)

8. Marinara Pomodoro [Link](https://chrome.google.com/webstore/detail/marinara-pomodoro%C2%AE-assist/lojgmehidjdhhbmpjfamhpkpodfcodef)
A simple pomodori app that does it's best at it, no clumsy popping features.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0va1i51p3bnv5gv55ak.jpg)

There are lots of extensions out there in the wild for web devs, feel free to post recommendations in the comment section.

Better DX, Happy Devs
How To Use Default Function Parameter Values In JS
Tags: javascript, programming, webdev
Published: 2022-05-08 00:21:17

Function parameters are undefined by default in JavaScript. Sometimes, you want to define a default parameter in this case. Before [ES6](http://es6-features.org/#Constants) (also known as ES2015), creating default paramaters was a little tedious:

```js
function createName(firstName, lastName) {
  firstName = typeof firstName === 'undefined' ? 'Jane' : firstName;
  secondName = typeof secondName === 'undefined' ? 'Doe' : secondName;
  
  return firstName + ' ' + secondName;
}

console.log(createName()); // Jane Doe
```

With the introduction of default parameter values in ES6, the above could be simplified to:

```js
function createName(firstName = 'Jane', lastName = 'Doe') {  
  return firstName + ' ' + secondName;
}

console.log(createName()); // Jane Doe
```
Day 29: Productive Saturday
Tags: productivity
Published: 2022-05-08 00:07:01

Hi!
This Saturday was a special one and I usually waste all my Saturdays where I don't get quality rest but not this one. today I was able to accomplish many than I usually able to. even if yesterday I stayed up almost all night I woke up energetic which is rare for the weekends and I was able to improve on my paper and worked on my personal project with my friend and teammate. I was able to set up react testing environment with `Jest` and `React-testing-library` and I learned a lot in the process which I definitely need to write an article about. speaking of writing I think I think it's going to be more challenging because I seem to be faster working through task so that they may be many to write articles about. but I'm going to try to spare more time for writing
tomorrow I plan to finish on the paper and learn or finish the task about `github actions` if I spare time I will try to create an article about Jest and RTL
Also, tomorrow will be mu fist month of heacy streak and I think I have many to share and document that I learned from this journey but for now I think today was a good one

I'm signing offf....
Creating a React Accordion Component Using Just CSS
Tags: react, typescript
Published: 2022-05-14 14:53:09

---
title: Creating a React Accordion Component Using Just CSS
published: true
date: 2022-05-08 00:00:00 UTC
tags: #react #typescript
description: A follow-on post for those not using TailwindCSS
canonical_url: https://bionicjulia.com/blog/creating-accordion-component-react-just-css
---

About a year ago now, I wrote a blog post on [how to create an accordion component in React with Typescript and TailwindCSS](https://bionicjulia.com/blog/creating-accordion-component-react-typescript-tailwind). I recently needed to implement an accordion component again (this is why keeping a blog is so handy!), but this time in a codebase that doesn’t use TailwindCSS. Here’s a short follow-on to that post for how you’d create an accordion component if you were just using straight CSS. I'd recommend reading that post first if you're new to React, as it includes more detail on the order in which I built up the code.

Note that I’ve left most of the styling of the overall component out and focused on the important ones that effect the transition.

```jsx
import React, { MutableRefObject, useRef, useState } from 'react'
import { appConfig } from '../appConfig'

interface AccordionProps {
  title: React.ReactNode
  content: React.ReactNode
}

export const Accordion: React.FC<AccordionProps> = ({ title, content }) => {
  const [showExtraContent, setShowExtraContent] = useState(false)
  const [height, setHeight] = useState('0px')

  const contentSpace = useRef(null) as MutableRefObject<HTMLDivElement>

  function toggleAccordion() {
		setShowExtraContent((previousState) => !previousState)
    setHeight(showExtraContent ? '0px' : `${contentSpace.current.scrollHeight}px`)
  }

  return (
    <div className="container">
      <button
        onClick={toggleAccordion}
      >
        <p>{title}</p>
        <img
          src={'/assets/img/icons/chevron-up.svg'}
          alt="Chevron icon"
          className={`${showExtraContent ? 'rotate' : null} arrow`}
        />
      </button>
      <div
        ref={contentSpace}
        style={{ maxHeight: `${height}` }}
        className="extra-content"
      >
        <div>{content}</div>
      </div>
    </div>
  )
}
```

Here are the corresponding CSS styles.

```css
.container {
  display: flex;
  flex-direction: column;
}

.arrow {
  transition: 0.3s;
}

.rotate {
  transform: rotate(180deg);
}

.extra-content {
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
```

Like this post? Read more from me at https://bionicjulia.com/blog.
Should you use BDD for API testing?
Tags: bdd, testing
Published: 2022-05-07 23:53:47

BDD is a collaboration practice: you describe business rules, examples of these rules, and acceptance criteria that illustrate these rules. Some of these acceptance criteria can be potentially automated. 

Detailed API testing (e.g. testing CRUD functionalities, error codes, JSON format etc.) is rarely of much interest to the business, so it generally makes little sense to use Gherkin to express them - it just adds an extra layer of complexity. Lower level tools such as RestAssured do the job just fine. And testing REST APIs with any JavaScript test library is pretty trivial. So if your team finds it more efficient to write REST API tests with a tool like Karate, that's great! But it ain't BDD, and it's not the only game in town.

The only exception is where you might use Cucumber as a communication tool between developers across teams, as a more expressive way to describe and document API contracts. But you can do this with contract testing tools as well, though it may not be as readable. 

Let me know your thoughts in the comments!
Asset Management System - AMS
Tags: vue, javascript, beginners, webdev
Published: 2022-05-07 22:56:24

I made a small project in this weekend. where companies can manage their assets like laptop, monitors or other devices.

**Tech Stack-**
`JavaScript
VueJS`

**Component library**
`element-io`

github repo link - [link](https://github.com/kavyanshpandey/Asset-Management-System)

**Snapshots**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msgem580n3q2wxa58ky4.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e14xc61fikrk3vcmpyre.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpm8sznfr7bmnhzxwesf.png)
What is Indexifembedded?
Tags: webdev, beginners, html
Published: 2022-05-07 22:52:51

## What is Indexifembedded?

Indexifembedded is a new meta [robots](https://www.searchcandy.uk/seo/seo-glossary/robots-meta-tag/ "robots") value announced by Google in January 2022.

The new robots value `indexifembedded` can be used to indicate that the contents of a resource should be indexed if they are embedded in a webpage, even if there is also a robots [`noindex`](https://www.searchcandy.uk/seo/seo-glossary/noindex/ "noindex") present.

> Today, we're introducing a new robots tag, [`indexifembedded`](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#indexifembedded), that brings you more control over when your content is indexed. With the `indexifembedded` tag, you can tell Google you'd still like your content indexed when it's embedded through [`iframes`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe) and similar HTML tags in other pages, even when the content page has the `noindex` tag.
>
> The `indexifembedded` tag addresses a common issue that especially affects media publishers: while they may want their content indexed when it's embedded on third-party pages, they don't necessarily want their media pages indexed on their own. Because they don't want the media pages indexed, they currently use a `noindex` tag in such pages. However, the `noindex` tag also prevents embedding the content in other pages during indexing.

## Example

Example usage using a meta tag:

`<meta name="googlebot" value="indexifembedded" />`

Code language: HTML, XML

Example usage using a HTTP header:

`X-Robots-Tag: googlebot:noindex
X-Robots-Tag: googlebot:indexifembedded
...
OR
...
X-Robots-Tag: googlebot:noindex,indexifembedded`

## Resources

-   [New robots tag: indexifembedded](https://developers.google.com/search/blog/2022/01/robots-meta-tag-indexifembedded "New robots tag: indexifembedded")
Free 10 new Chakra UI components - TemplatesKart
Tags: react, webdev, showdev, chakraui
Published: 2022-05-07 22:51:03

Let's find out 10 new chakra-ui components that I added to [TemplatesKart](https://templateskart.com) website recently.

## Links
Website: [TemplatesKart](https://templateskart.com)
Github Repo: [TemplatesKart Code](https://github.com/MA-Ahmad/templateskart)

## Components overview

1. [Heroes](https://templateskart.com/components/heroes)
  * With gradient cover
  * Simply centered

2. [Blog](https://templateskart.com/components/blog)
  * Newsletter

3. [Cards](https://templateskart.com/components/cards)
  * Join community

4. [Navbars](https://templateskart.com/components/navbars)
  * Multiple links
  * Simple one

5. [Testimonials](https://templateskart.com/components/testimonials)
  * Card with border

6. [Page Sections](https://templateskart.com/components/page-sections)
  * Small detail

7. [Footers](https://templateskart.com/components/footers)
  * With logo left
  * Large with logo left

## Some Components Screenshots

*Newsletters*
![Blog Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h79ickvo5ln227ccn43w.png)

*Join community card*
![Card Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66gr7duwoyq3uph0hi2k.png)

*Navbars*
![Navbars Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oiw6h1pbb0shnxo0zcwl.png)

*Hero section with gradient*
![Hero Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxtmpxtk56cn58m75u1v.png)

*Testimonial*
![Testimonial Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdllbpi2utlavhqji12t.png)


**Show your support**
Give a ⭐️ on Github if you like my work! 🙏
The Weekly Dev - 202219
Published: 2022-05-07 22:44:09

---
title: The Weekly Dev - 202219
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
canonical_url: 'https://kevwe.com/weekly/202219'
---
The Weekly Dev - 202219


Platonic Objects and Real Programming


It is nice to be able to model our code after the things we face in real life. It is nice and convenient until... it isn't any longer.


The wisdom should be somewhere in drawing the line between the fascination of code beauty (if any such thing) and the actual use case.


Do you code to reach some higher ideal, or because you need to get things done?


I bet we can relate to both cases.


What I find mostly frustrating is when you have to deal with someone else's misrepresented beauty ideal and what you need is to get actual things done.


It is difficult do put into words, but I guess if you have even the minimal experience... you know exactly what I am talking about.

Let us promote technology that actually helps to live better.


Cut the dependencies, avoid the bloat, don't force your peers to a specific environment. 


Nice things are nice if you have the freedom to chose them or to turn them down.


A command line is worth a thousand GUIs!


Imposing nice things it's still imposing, do enable freedom, instead.


https://kevwe.se/weekly/202219
Rails: A serializer for your serializer?
Published: 2022-05-07 21:46:43

Getting used to serializers was tricky for me when I first learned of them.  Then came custom serializers. 😑  I now think of them as a serializer for your serializer.  Silly, I know.  A custom serializer can be used to streamline the JSON data that is returned.  Example: The models are director--< movies--< reviews.  The return needs to be JSON data for director that includes the streamlined data for all movies of that director.  Create a new serializer (DirectorMovieSerializer) and include only the attributes of movie that you want to be returned.  Don't forget to add the **has_many :movies** relationship to your DirectorSerializer, and explicitly tell the DirectorSerializer to use the new serializer instead.  See the code below:

DirectorSerializer:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9jcgr2bm37uvl2vvr4i.png)

Add DirectorMovieSerializer:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6zrayx2jrziozbvuf73.png)

JSON data to be returned:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r899isp9dqhde29ltarx.png)

The JSON data returned should be the director data and the streamlined movie data.  This made more sense to me when I started playing around with the code, so give it a try. 😀
Interface Predicate en Java bDarija
Tags: darija, predicate, java, interface
Published: 2022-05-07 21:29:37

Predicate fJava kaykon fjava.util.Function hia wahd l'interface fonctionnelle bi ma3na ahana kathtawi cela méthode whda.
W katmtel wahd la methode smytha test() o li katakhod wahd l'argument.
W flkeher katrejee lik valeur boolean, y3ni katrejee lik ssahih wlh ghalat. 
W ka mola7ada ra f aghlabiat l ahyan ghatlqawh mea lambda.

La methode test() lghaya mnha howa theqeq lik mn l'argument li kataked flparametre wach kayheqeq chorot wla la. 
Hadchi elach natija katkon ya imma ssahih awla ghalat.

syntaxe:

```
boolean test(T t)

```

- T type de l'argument
- t l'argument
- boolean type de retourne, true ila l'argument kayheqeq dik lpredicat awla false

exemple program:

```
public class PredicateTest {
    public static void main(String[] args) {
    Predicate<Integer> p = number -> (number % 2 == 0);                  System.out.println(p.test(8));//vrai  
    System.out.println(p.test(5));//faux  
}
```
Sti3mal dialo flmain kalkon bhat tariqa:

```
public class PredicateTest {
    public static void main(String[] args) {
        Predicate<Integer> sup_a_deux= nombre -> (nombre>2);          System.out.println(sup_a_deux.test(8));
        System.out.println(sup_a_deux.test(5));    
}}
```




Exemple sans lambda:

Edna classe Personne 

 

```
  public static class Personne{      
      private int Age;
      public Personne(int Age) {this.Age=Age;}
      public int getAge() {return Age;}

}
```

Lgharad dialna mn Predicate howa ychof wach l'age dial la personne kber mn 25 ans

```
public static class Age_Sup_A_25 implements Predicate{
     @Override      
     public boolean test(Personne personne) {
         return personne.getAge()>25; 
//fhad return kandiro test ela l'age dial Personne
//kangolo l méthode retourne true si l'Age est superieur a 25 sinon false
      }
   }
```

had la fonction filtrer, katakhod flparametres la liste des personnes o lpredicate, mn b3d kat-retourne liste jdida etinaha smia nvl_liste li kathqeq dak chert dial predicate o li kna dwezna flparametre

Fhad lmital la boucle foreach : `for (Personne p : list_personne)` katsme7 lina ndiro test li kayn f predicate ela kolla personne mn liste

o chert li f predicate howa wach l'age dial la personne kber mn 25ans
Fach `predicate.test(p)` katchof bli test(p) rej3at true katzid la personne p fla liste jdida nvl_liste `nvl_liste.add(p)`



```
public static List<Apple> filter(List<Personne> list_personne, Predicate<Personne> predicate){
       List<Apple> nvl_liste= new ArrayList();
       for (Personne p : list_personne) {
            if(predicate.test(p)) 
               nvl_liste.add(p);         
       }
         return nvl_liste;
 }
```
L'interface Cloneable en Java bDarija
Tags: darija, interface, java, cloneable
Published: 2022-05-07 21:00:16

L'interface Cloneable howa wahd l'interface khawi kaytsema marker interface. 

Kayna wahd la methode smytha clone() mojoda fla classe Object.
O had la methode clone() bach tkhdem lina flcode dialna, l mefrod elina ndiro implementation dial l'interface Cloneable. O hadchi bach flekher nqedro ndiro istinsakh lchi objet.

L'interface kay3ti hadik la classe li ghat-implementer Cloneable imkaniat istinsakh ses objets.

syntaxe

```
public interface Cloneable

```
La classe li kat-implementer l'interface Cloneable mfrod toverride la methode clone() ziada ela anaha dir gestion dial l'exception **CloneNotSupportedException**

```
public class Etudiant implements Cloneable {   
   private String nom;
   private String prenom;
   @Override   
   public Etudiant clone() throws CloneNotSupportedException {

         return (Etudiant) super.clone();

   }
}
```
bach hna flekher nste3mlo dik la methode b had tariqa:
```
public static void main(String[] args) {

Etudiant etd1= new Etudiant("loubna","talha");
Etudiant etd2=(Etudiant) etd1.clone();
}

```