teleren/devto huggingface dataset:
Remix Markdown overview page
Tags: react
Published: 2022-05-14 05:23:49

Now that we have our [Markdown powered page](https://daily-dev-tips.com/posts/rendering-markdown-in-remix/) to work, let's see how we can add some kind of overview page.

This could be on your homepage to showcase your latest articles or simply a blog overview page.

> Note: While doing research, I could not find an automated way, so this article might get updated once I do.

## Loading Markdown files

Markdown files have to be loaded individually in Remix. I'm not 100% sure if there is an automated way of doing it at the point of writing.

If I do find one, I'll update this article 🙌.

Let's get started!

In our example, we'll create a blog overview page, so let's add the `index.tsx` file inside our `blog` directory.

Now we can start by loading the markdown files we want to show.

```js
import * as firstArticle from './my-first-article.md';
import * as secondArticle from './mdx-sample.mdx';
```

Then we only want to load the metadata (Frontmatter section) of the Markdown files.
So let's create a function that only extracts that information rather than the whole file.

```js
function postFromModule(mod) {
  return {
    slug: mod.filename.replace(/\.mdx?$/, ''),
    ...mod.attributes.meta,
  };
}
```

This function will return the slug and all frontmatter parts of the file.
The frontmatter section is everything within the three dashes at the top of the file.

Then we can use the Remix loader to actually load these pages.

```js
export async function loader() {
  return json([postFromModule(firstArticle), postFromModule(secondArticle)]);
}
```

Now we can access this data inside our page.

```js
export default function Index() {
  const posts = useLoaderData();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link to={post.slug}>{post.title}</Link>
          {post.description ? <p>{post.description}</p> : null}
        </li>
      ))}
    </ul>
  );
}
```

And that's it. Remix will loop over the posts we have defined in our import and show the title and description with a link to the actual page.

![Remix Markdown overview](https://cdn.hashnode.com/res/hashnode/image/upload/v1651647501053/xShVkwoNx.png)

Check out this [GitHub repo](https://github.com/rebelchris/remix-starter/tree/markdown-overview) to see the complete code.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Creating an expandable profile card
Tags: javascript, react, tutorial, typescript
Published: 2022-05-14 05:15:50

Hey there! 

Last month, I was assigned to create an expandable component at work, something that could be repeatable, and it should show/hide more data on click. Something easy to achieve by using hooks, the old show and hide game! But, my inner designer couldn't resist the temptation of animating it. And now, I'll just show you how the results!

![Profile card concept designed by Thremulant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwa4abx7vt0mpdkz99j3.jpg)Design by [Thremulant](https://dribbble.com/shots/18148247-Profile-card)

## Let's begin!
The first step is the setup. This is the stack I used:
- Create-React-App
- Typescript
- TailwindCSS
- Framer-Motion (Animations)
- Poppins Font

## Highlighted code
The component is not complicated, although there are some parts that need to be clarified:
- The `AnimatePrescence` it's wrapping only the bottom content of the card. The reason is that those are  the only pieces that are unmounted. 
- Components like this one, are the reason why I prefer to use `await`  instead of using `then`. Nesting all the animations will be a **living hell!!**

  ```javascript
   await bottomTexts.start("close");
   await bottomButtons.start("close");
   await bottomContainerControls.start("close");
  ```
- There are `timeouts` in the open and close functions. The reason is to avoid some animation issues while changing the `flex-direction`. Without them, the image's width will only grow to a third of the card, stop, and then re-start the animation to get the full width.


## The result
Here's the full solution. Feel free to fork and work on it!
{% codesandbox 2uve4n %}
Optimización de tus sitios web, cargan más rápido = mejor interacción de usuarios.
Tags: webdev, programming, beginners, tutorial
Published: 2022-05-14 04:35:58

Después de dos noches trasnochando capacitándome y buscando información al respecto, al fín pude mejorar mi tiempo de carga en el tester para sitios web, al 99%, gracias a un artículo/post que leí en reddit(sí, reddit, tiene sus cosas, pero en general es un medio para encontrar información muy valiosa en el área de la programación) de un programador web de Usa, que, al igual que yo nos desenvolvemos en el área de construir sitios web para empresas y negocios medianos y pequeños, dejo mi sitio web al final del post, para que prueben la velocidad de carga y de paso vean mis proyectos que he hecho. Aquí escribo parte de lo que aprendí:

Muchos programadores web, subestiman la etapa o fase de optimización de recursos a la hora de publicar o desplegar su sitio web, he visto páginas web que sin razón aparente demoran mas de 5 segundos en cargar, esos 5 segundos son demasiados para la atención de un usuario promedio que se topa con tu sitio web, el periodo máximo de atención es de 3s, claro, si tu página web tiene videos incluidos, es razonable esperar un periodo de carga un poco mas extenso, sin embargo, a la hora de escribir código, es esencial hacerlo con la versión para celulares o móviles en mente, escribe tu css en móvil primero, así aumentará la velocidad de carga, cuando el motor del navegador lee tus archivos, busca responsividad, y la primera que encuentre,esa es la que desplega de primero, si encuentra en tus archivos css que está escrito principalmente en versión de pc de escritorio,entonces cargará esa versión, asi que si un usuario carga desde el celular, el motor del navegador tendría que leer o analizar doble vez hasta encontrar la versión adecuada para el usuario.

Otro factor a tener en cuenta es qué tan optimizadas están tus imágenes, me refiero a que tanto pesan? 1 mb? 2mb?, cuanto pesa en total la carpeta completa de tu sitio web al momento de desplegarlo?, si pesa mas de 3 mb, o 10 mb(en caso de los que incluyen videos), es mejor dedicar media hora de tu tiempo a comprimir las imágenes y videos. luego de comprimirlas, es aconsejable convertirlas a formato webp, el formato webp es mucho más rapido en cargar, más liviano a la vez que mantiene la calidad o definición de la imagen. Después de seguir estos pasos lo más probable es que tu sitio web que pesa 39 mb, ahora pese 2 o 3 mb, al desplegarlo y cargarlo en un móvil o incluso en una dekstop, verás la velocidad de carga óptima que debe tener todos los sitios web que despliegues de ahora en adelante, para asegurarte más pásalo por un tester online de sitios web, lo más probable es que veas resultados de optimización del 99 o 100%.

Mi sitio web :

digitalwebdesign.tech
when to use useCallback/useMemo
Tags: react
Published: 2022-04-19 11:23:42

I am a fan of React/hooks. As the usage scenarios in business projects gradually increase, I find the useCallback/useMemo hooks are a bit annoying. Whenever I use components developed by others, when I need to pass function props, I will wrap it with useCallback first. It might actually work fine without the packaging.

This can be divided into two cases, one is to avoid unnecessary re-render, and the other is to ensure the correctness of the logic. For example, useEffect depends on the incoming function props. Using too many useCallback/useMemo will make the code look bloated, and if you don't use it, you may be worried about bugs.

I learned what some developers in the community think:

> MOST OF THE TIME YOU SHOULD NOT BOTHER OPTIMIZING UNNECESSARY RERENDERS. React is VERY fast and there are so many things I can think of for you to do with your time that would be better than optimizing things like this. from kent C. Dodds.

I would like to ask the community if there are any suggestions for using useCallback/useMemo. It can reduce the mental burden when writing code. For example, is it possible to agree that useCallback/useMemo is usually not needed in the code? If it needs to be used, the component should be clearly stated, such as adding comments to props and so on.
Fun with justify-content
Tags: css, html, webdev, joke
Published: 2022-05-14 02:33:37

---
title: Fun with justify-content
published: true
description: A cartoon about FlexBox and the values of justify-content
tags: css,html,webdev,joke
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eppyjerwsgyf2zqdykm5.png
canonical_url: https://alvaromontoro.com/blog/68004/fun-with-justify-content
---

As part of the [comiCSS webcomic](https://comicss.art), today I coded a cartoon about FlexBox and the values of justify-content:

<figure>

![Cartoon titled“Justify-content values” and 6 panels with a character. The eyes look different in all. First panel’s center, and both eyes are together in the center. Second one is flex-start and the eyes are on the left side of the face. Third one is flex-end, and both eyes are on the right side of the face. Fourth panel is space-around, the eyes have half-size space. Fifth one is space-between, the eyes are separated and far from each other. And the sixth is space-evenly, the eyes are way apart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zue23cxvh8dkbd8h2d4f.png)

<figcaption><a href="https://comicss.art/?id=32">See the live demo here</a> or <a href="https://www.youtube.com/watch?v=KX8hr2QksXA">a video of how it was coded</a><br/>&nbsp;</figcaption>
</figure>
 

I was trying to do something different and explain the concept in a fun way, illustrating the main [options for `justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content):

- `flext-start`: pack items at the beginning (by default, the left side).
- `flex-end`: pack the items at the end (right side).
- `center`: pack the items in the center.
- `space-evenly`: all items will have the same space around them (even with the start and end of the container.)
- `space-around`: the space between objects is the same, and the area at the beginning and end of the container will be half of that space.
- `space-between`: the distance between all items is equal, with the first and last item touching the container edges.

There are more options for `justify-content` (`stretch`, `left`, `right`, `start`, `end`, and different combinations with `safe` and `unsafe`.) But I had to keep the cartoon short and straightforward, plus they wouldn’t be much different from some of the others.

Also, the comic strip assumes the default `flex-direction` of `row`. If we changed the value to `column`, the cartoon character would look more like a Picasso 😅

Next grid... maybe?
Day 35: Blog refine!
Published: 2022-05-14 01:06:26

Hi!
So today was a good one, we had a final demo for the team project I have been working on for the last 3 months and it was a success. I took some time to rest and I got a chance to get back to the blog. I just added code references on both articles and I'm going to work on the third one that will be published by tomorrow and it will be about `setting up jest and react testing library` for testing react apps
I changed the plan, I decided to use material UI for styling in my personal project I realized tailwind is great for practising more CSS but will take a lot of time so I will go with material UI which seems to be an easier faster option
today I also learned about working with `formik` and `yup` in react and I think they are great tools that I will use in the upcoming days

I just need to sleep it's 3am already we will see what about tomorrow later
signing off...
Best nodejs course?
Tags: javascript, beginners, node, tutorial
Published: 2022-05-14 00:41:20

I want to learn node and i was wondering if anyone knows which course i should take on udemy because i have some credits to spend!
some of the courses i debating between are:
https://www.udemy.com/course/nodejs-the-complete-guide/
https://www.udemy.com/course/complete-nodejs-developer-zero-to-mastery/
https://www.udemy.com/course/the-complete-nodejs-developer-course-2/
https://www.udemy.com/course/microservices-with-node-js-and-react/
https://www.udemy.com/course/nodejs-express-mongodb-bootcamp/
https://www.udemy.com/course/node-with-react-fullstack-web-development/
new dev here ....ultra learning?
Tags: beginners, productivity, gaming, codenewbie
Published: 2022-05-14 00:28:22

post 1! 
I am building a blog/website to document my journey to a very high level in video games. first off starting with Valorant, Apex Legends, and Starcraft2!

I will be building a cms style blog and using either Vue or some other framework that works faster and responsive. Will work on integrating a twitch embed button that streams my twitch stream or facebook gaming. people will be able to see if im online or not on the front home page. on top of that i will document what worked in coding this blog and what didnt.

ITS LIKE A TWO FOR ONE DEAL A JOURNEY OF CODING AND JOURNEY OF CLIMBING THE LADDER!!!!

going by the high expectations i set for myself i aim to at least update once a week and note down what i have learned. if not 3 posts a week? however it is ultra learning so ITS SORTA ACCELERATED AND FASTER. thank you scott young for the idea.
i need help! my back to top btn its only working once.
Tags: javascript, webdev, beginners, programming
Published: 2022-05-14 00:21:39

my back to top btn its only working once, after that i need to refresh the website.
here is the code:
------------- HTML--------------------
<a href="#" class="btn back-to-top"><i class="fa fa-chevron-up"></i></a>
--------------CSS---------------------
.back-to-top {
     position: fixed;
     display: none;
     width: 44px;
     height: 44px;
     padding: 8px 0;
     text-align: center;
     line-height: 1;
     font-size: 22px;
     right: 15px;
     bottom: 15px;
     z-index: 9;
 }
 
 .back-to-top i {
     color: #ffffff;
 }
 
 .back-to-top:hover i {
     color: #666666;
 }
 
------- JavaScript-----------

// Back to top button
    $(window).scroll(function () {
        if ($(this).scrollTop() > 200) {
            $('.back-to-top').fadeIn('slow');
        } else {
            $('.back-to-top').fadeOut('slow');
        }
    });
    $('.back-to-top').click(function () {
        $('html, body').animate({scrollTop: 0}, 1500, 'easeInOutExpo');
        return false;
    });
The perseverance, commitment to my dreams and goals as a programmer
Tags: life, blog, success, workspace
Published: 2022-05-14 00:15:29

In 2020 I quit my job as a programmer in a company I was working for 8 years. I got tired of the mess, the conflicts between the departments and clients (because many managers and supervisors are focused on the money). I had a laptop (a Lenovo ideapad 330s). I assembled a small table, took a plastic chair, a cheap rgb keyboard/mouse and that was my first workspace.


![First workspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yaxblcqk4bmhwvbkzrm.jpg)

Hey! It was better than the bed. Trust me!

Later, by november of that year (still 2020) I got some money from my first client as freelancer. I used the money to buy a new monitor and a weird desk from a friend. That desk is weird because one of the tables unfolds and you had like an L table workspace. (I'm sorry for my bad english). Oh! I bought  cheap wireless keyboard, mouse and headphones. I was in a "Wireless" trending mode. Not very efficient at the moment. Please, ignore the white case at the bottom. That was my first linux server. I also bought an ergonomic chair.


![Second Workspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iblmqqhq4qcx6whcourh.jpg)

I used that setup for a year. By the end of 2021 I upgraded my pc from the laptop to a cheap gaming PC:
- Ryzen 3 3300X
- Nvidia GT 730 (I know, the lowest of the lowest).
- I a small UPS

I also upgraded my keyboard, mouse and headset:
- Keyboard Kumara k552 with Outemu red switches.
- Mouse logitech g102
- A razer headset (sorry, I don't have the model right now).

I was happy because I could work better and play the same old games with better graphics. 


![Second Workspace upgrade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/taua5m8u3afg3qgus0c9.jpg)

A week later I finally bought a decent desk CubiCubi and cool black/green keycaps for my kumara keyboard. I also bought some cheap rgb speakers.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87y7q9pfrn6g92bobzbm.jpg)

By the end of April 2022, I changed the speakers: Bought a logitech speakers with subwoofer, a led light strip and a desk lamp. This is my current setup:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prqruic9apq8hs3wwous.jpg)

Bottom line is: My current setup is somehow what I imagined when I started working as a freelancer in 2020. And I know I will keep improving my workspace and room. I will paint the room next week, for example.

I really wanted to shared this because I want to tell you that you can achieve your goals if you have focus, conviction and will!
Azure App Services
Tags: azure, paas, deploymentslot
Published: 2022-05-14 00:02:29

Azure App Service is an HTTP-based service for hosting web applications, REST APIs and mobile apps develop in your favorite language, be it .NET, .NET Core, Java, Ruby, Node.js, PHP, or Python. Applications run and scale with ease on both Windows and Linux-based environments.

Azure App Service is a fully managed platform as a service (PaaS) offering for developers. They provide a host of amazing features like (auto)scaling, easy authentication, offline sync (for Mobile Apps), hybrid connections and much more. 

Azure App Service allows you to integrate a variety of auth capabilities into your web app or API without implementing them yourself. It’s built directly into the platform and doesn’t require any particular language, SDK, security expertise, or even any code to utilize. You can integrate with multiple login providers. For example, Azure AD, Facebook, Google, Twitter.

 Authentication flow 
_The authentication flow is the same for all providers, but differs depending on whether you want to sign in with the provider's SDK._

![An authentication provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hc8l9wfdl9aogz7h60s6.png)
 

DEPLOYMENT SLOT
_Deployment slots are live apps with their own hostnames. App content and configurations elements can be swapped between two deployment slots, including the production slot._


![Deployment slot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/na1nwzbh0gfp8fh68l6g.png)



SCALE UP (App service plan)
_You can scale up your resources manually to an instance count or via custom autoscale policy that scales your resources base on metrics_.


![Your app service plan for your applications](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xzdqg5to24f21iu2mbt.png)
Why... here?
Tags: beginners, writing, growth, webdev
Published: 2022-05-14 00:01:17

Almost didn't make it this week.  Covid finally blew threw the house last weekend, leaving no one unaffected in its wake.  Surprised it took this long, to be honest.  We're all doing better now though.

Being that my week has been spent studying, fighting illness and a 3-day training stint at the office, i'll share something i found interesting in the [tl;dr](https://tldrsec.com/) newsletter from [Clint Gibler](https://twitter.com/clintgibler).  If you're not familiar, i highly recommend his content, as do others.

&nbsp;
![People like tl;dr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ol26iopmlvya82kbzr8k.png)

It's easy to find something to pique one's curiosity in Clint's newsletter, but this particular item immediately reminded me a) i hadn't published anything this week and b) i guess there are valid reasons why i should continue.  I have been wondering, as my [cloud resume project](https://zjgrey.net/resume.html) is _basically_ done from a progress-recording perspective, whether i would continue to post here in the DEV Community.  Again, my reason for being here in the first place was only because it was a specific bullet point of [that challenge](https://cloudresumechallenge.dev/).  

Then i read [Jack Rhysider](https://twitter.com/JackRhysider)'s tweet detailing [17 reasons why you should be blogging](https://twitter.com/JackRhysider/status/1524416387434762241) (yes, you).  

While i didn't feel every reason he listed resonated with me personally, overall he makes very good points.  Something about being here, publishing my often haphazard thoughts for the world to see, makes me a little uneasy... a little uncomfortable.

And that's exactly why i know i should continue.  I don't ever expect to use this forum as my personal technical notebook, and i'm not trying to prove to anyone that i know anything.  But this is a different vibe, a different skill set altogether, and (i admit) i do enjoy it.  

So, my blogging friends, keep writing!  

And, as always, thanks for reading  =]