teleren/devto huggingface dataset:
Refactoring SSGo: letting old code go is kinda sad
Tags: opensource, ssgo, refactoring, ssg
Published: 2022-10-27 00:48:21

Hey there! Glad you came again. This week I've been working on refactoring Markdown parsing to add all Markdown features support. Let me tell you about how it went.

## Where the idea came from

I initially wanted [SSGo](https://github.com/devils2ndself/SSGo) to have full Markdown support, but when I was trying out Docusaurus I decided to use a ready-made package called [gomarkdown](https://github.com/gomarkdown/markdown) for parsing.

There however is a downside to this: now the whole file needs to be stored in RAM instead of line by line. But the features that gomarkdown brings are worth it.

## Refactoring

When you write code you put your soul into it. And when you have to remove it is kind of sad. You know you're making the code better but there is a part of you that is attached to that code...

Anyways. I created an [issue](https://github.com/devils2ndself/SSGo/issues/14) on my repo to mark that I am working on it and started working. I changed some test files and made a single markdown file that encapsulates all of the features and refactored the code. Then, I squashed all commits into [one](https://github.com/devils2ndself/SSGo/issues/14) and pushed it to remote.
Attending the Next.js Conference 2022: A First-Person Experience
Published: 2023-02-17 23:38:35

---
title: Attending the Next.js Conference 2022: A First-Person Experience
published: true
date: 2022-10-27 00:00:00 UTC
tags: 
canonical_url: https://mattech.fyi/articles/nextjs-conference-2022
---

Attending the Next.js Conference 2022: A First-Person Experience

I recently attended the Next.js Conference 2022, and it was an exhilarating experience. As a developer, I was excited to learn about the latest trends and features in the world of web development. The conference did not disappoint, as it was packed with informative sessions and keynote speeches.

One of the main takeaways from the conference was the emphasis on performance optimization. The speakers stressed the importance of creating fast-loading websites and reducing page load times. I learned about new techniques and tools for improving website speed, such as using Next.js's static optimization feature and serverless functions.

Another exciting aspect of the conference was the unveiling of several new features. The Next.js team announced the upcoming release of Next.js 13, which promises to be even more developer-friendly and efficient than the current version. I was particularly impressed by the new image optimization features, which will allow developers to deliver high-quality images with minimal load times.

In addition to the new features, I also had the opportunity to network with other developers and industry experts. I met some amazing people and had insightful conversations about the future of web development. The conference was a great opportunity to connect with like-minded individuals and gain new perspectives on the industry.

Overall, my experience at the Next.js Conference 2022 was unforgettable. I came away with new skills, knowledge, and ideas for improving my development work. I am eagerly anticipating the release of Next.js 13 and am excited to incorporate the new features and techniques I learned at the conference into my future projects.
Day 644 : Paradise
Tags: hiphop, code, coding, lifelongdev
Published: 2022-10-26 22:12:24

_liner notes_:
- Professional : Had a few meetings, worked on getting the updates I made to a blog post approved. Also fixed the way to check out a demo application for some Web Components I'm making. Not a bad day.

- Personal : Last night I played around with the Meta Quest Pro. It's pretty cool. I was able to play a game of WebXR Tic Tac Toe with audio chat on my site, but I couldn't figure out how to turn on the camera yet. I did some more research and found a video where it looks like a person went to a website and was able to get the camera to activate and go into augmented reality. I also watched a couple of the 360 videos I recorded on my recent trips. It was pretty cool to be in middle and could look all around and relive the moments. Makes me want to buy newer 360 cameras with higher resolutions. Also, I set the room that you go into when you put on the headset, to be a Japanese old school house. It was pretty calming with koi fish in a pond. Pretty much like paradise. Watched the new "Chainsaw Man" episode and caught up on "Mob Psycho 100".

![A lake in Spirit Island, AB, Canada with a small island in the center with some pine trees surround with more pine trees and mountains in the distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hux00y27uiaqlrx127e.png)

Going to play around with the Meta Quest Pro some more. Mostly see if I can visit a site that will allow the passthrough camera to turn on. I want to do it before it gets too dark because I was doing it last night and the passthrough wasn't that great. After that, I want to work on the front end of the side project I've been working on. I thought of a layout I want to try. Maybe watch some anime. I think there may be a new "Bleach" out.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube OD_QOSXOTGQ %}
My Exploration of Service Oriented Architecture and Monoliths
Tags: rails, architecture, ruby, beginners
Published: 2022-10-26 22:12:06

## What is it?
After a quick google search it seems that it is made up of company practices that help to streamline getting from point a to point b. 

If we are creating a ticket system company, what does that system need to run? Payment options, queue, assignments, and other micro-services that we might offer. _Service oriented architecture_ (SOA), allows us to perform those services and other through our micro-services. But no matter the services that we offer through the program, they all work for the company.

The SOA would be the structure we build around the app to make those services all work under the umbrella of the app.

This can be beneficial because debugging allows us to isolate a service with the issue, rather than the entire app being down because of a possibly small error. 

We can reuse parts of the code logic in different parts of the application to help other services to be able run faster or more efficiently and to DRY (don't repeat yourself) up the code.

On the other hand a monolithic app is developed as a single unit. It could have limited flexibility in how to update/expand it, but overall tends to have better performance because of the shared code. Monolithic could be the fastest way to get you app going.

Monoliths tend to have smaller teams, and have interdependent parts of the code. With everything so intertwined and interdependent on each other adding updates to a Monolithic program can become sticky very quickly depending on the updates/changes being implemented.
Android Dev Summit 2022
Published: 2022-10-26 20:58:03

Hi, folks!

If you didn't see yet, first part of Android Dev Summit 2022, this link for you. [Modern Android Development](https://www.youtube.com/playlist?list=PLWz5rJ2EKKc_L3n1j4ajHjJ6QccFUvW1u).

I think, presentations about architect solutions are standard in development in current moment. Some ideas hooked me, and I am planing to use it in the future.

I enjoyed and inspired by reports about Compose. Number of developments tools are increasing all the time. I want to try declarative paradigm, because I liked it the most in React Native. Speed and simplicity of creation of custom component is very higher.

Separately, I want to mark international diversity of speakers. I really was very enjoy them pronanciation and accent. I realy catched estetic enjoy when watched live streem.

In a word, I enjoyed watching, and I advise you.
What is Babel? The Popular JavaScript Compiler
Tags: react, javascript, webdev, programming
Published: 2022-10-26 20:52:49

In the world of programming, we all know when it comes to producing code, we love to find numerous ways to simplify our job. Over time we've seen many different iterations of JavaScript. All of these iterations, along with old and new features being added constantly, needs a way to combine everything into merit code. This is where Babel comes in. 

Babel is a JavaScript compiler. Its a toolchahin mainly used to convert ECMAScript 2015+ into a backwards compatible version of JavaScript in current and older browsers. It's the epitome of declarative code. It transforms code, polyfills features that's missing in your environment, performs source code transformations, offers many plug-ins, and contains many consolidation tools.
 
Babel is needed because it provides the privilege of letting us apply the newest and latest features JavaScript has to offer without a worry of whether it works in specific browsers or not. Babel also converts JSX syntax into JavaScript. Which also contributes to why babel plays such an important role with React being such a popular frontend entity. 

## What does babel do?

Below is a example of Babel working its magic..

```JSX
// React 

function App() {


  return (
 <div>
  <NavBar />
  <Home />
    <h1>Hello World</h1>
      <label>username:</label>
      <input type="text" placeholder="username" />
      <label>password:</label>
      <input type="password" placeholder="password" />
</div>
  )
}


```

The code block below is what babel does with the code block above while working under the hood. It converts our JSX code into JavaScript

```JS
//Babel Compiler

"use strict";

function App() {
  return 

/*#__PURE__*/React.createElement("div", null, 
/*#__PURE__*/React.createElement(NavBar, null),
/*#__PURE__*/React.createElement(Home, null), 
/*#__PURE__*/React.createElement("h1", null, "Hello World"), 
/*#__PURE__*/React.createElement("label", null, "username:"), 
/*#__PURE__*/React.createElement("input", {
    type: "text",
    placeholder: "username"
  }), 
/*#__PURE__*/React.createElement("label", null, "password:"), 
/*#__PURE__*/React.createElement("input", {
    type: "password",
    placeholder: "password"
  }));
}


```
Some of the syntax above is what you may see or be used to when coding in regular JavaScript. When It comes to React JSX syntax, this is no more of your worries. Babel compiles everything allowing us to do less work and make our code very much Declarative. 


Sources: https://babeljs.io/docs/en/ ,
https://www.geeksforgeeks.org/reactjs-introduction-to-babel/
What is AWS and it's services?
Tags: aws, services, cloud, cloudskills
Published: 2022-10-26 20:42:51

**What is AWS?**
AWS means **Amazon Web Services**. It's providing us with cloud services and has a lot of Data Centers all over the world. It's the leading cloud services Market.

**How does AWS Work?**
AWS works with user requirements and their configuration. It's a platform that provides complete customization. 

**Advantages of AWS**

- It gives us a user-friendly model, architecture, databases, and operating system which is already known by programmers.
- It's very cost-effective.
- There is no need to pay extra money on running data servers. 
- It gives us total ownership at reasonable prices.

**Applications of AWS**
- Storage and Backup
- Gaming
- Website
- Mobile, web, and social Applications
- Big Data Management
- Messages and Notifications
- Game Development
- Augmented Reality
- Internet of Things

**Services**
- Computing Services
- Storage
- Database
- Networking and delivery of content
- Security Tools
- Developer Tools
- Management Tools

Let's dig into details in each of this
1. **Computing Services**
 - AWS EC2
 - AWS Lambda
2. **Storage**
 - Amazon S3
 - Amazon EBS
3. **Database**
 - DynamoDB
 - RDS
4. **Network and Delivery Of Content**
 - VPC
 - Route 53
5. **Developer Tools**
 - Code Star
 - Code Build
6. **Security**
 - IAM
 - KMS
7. **Management Tools**
 - Cloud Watch
 - Cloud Formation

**Conclusion**
In this introductory blog, we have seen **What is AWS and its services?**
If you have any questions just comment it.
Follow me for more exciting content.
what is avif format?
Tags: webdev
Published: 2022-10-26 20:40:58


This technology is a good example of how modern image formats (AVIF or WebP) can improve compression by up to 50% and deliver better quality per-byte while still looking visually appealing.

The AVIF is a solid choice if you need lossy, low-fidelity compression. Assuming encode/decode speeds meet your needs.

**We got webp recently. Why we need another one ?
**
When you want to use images on your website, you have a few options. You can choose from GIF, JPG or PNG. In contrast with formats like JPEG or GIF that are specific to one program or operating system only, there are many image formats available - and each format offers different capabilities. Adobe Photoshop has more than one hundred options when it comes to exporting images.

All files are lossy by default, but you can view them as lossless via the “Lossless” or “Meta Data” options. Keep in mind that some tests have shown that AVIF offers a 50% saving in file size compared to JPEG with similar perceptual quality. Note that there can be cases where WebP lossless can be better than AVIF lossless, so do be sure to manually evaluate.
AWS STS - Complete Guide
Tags: aws, devops, cloud, tutorial
Published: 2022-10-26 20:05:55

[AWS STS](https://www.bitslovers.com/aws-sts/) is an API that helps you to secure your AWS resources. This article will teach you everything you need about this service and why it’s crucial. Also, you will learn how AWS STS work.

Learn More:
https://www.bitslovers.com/aws-sts/
Welcome Thread - v197
Tags: welcome
Published: 2022-10-26 20:00:10

---
title: Welcome Thread - v197
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Footage from Michael Jackson's "Thriller" music video — Zombies turning to look at the camera.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9g09ph34186fbf2r4jl.gif)

### Welcome to DEV! 🎃

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Video: generate synthetic data with Stable Diffusion to augment computer vision datasets
Tags: deeplearning, dataset, generativemodel, computervision
Published: 2022-10-27 12:13:56

---
title: Video: generate synthetic data with Stable Diffusion to augment computer vision datasets
published: true
date: 2022-10-26 19:36:38 UTC
tags: deeplearning,dataset,generativemodel,computervision
canonical_url: https://julsimon.medium.com/video-generate-synthetic-data-with-stable-diffusion-to-augment-computer-vision-datasets-5b7e0a2927fa
---

Building image datasets is hard work. Instead of scraping, cleaning and labeling images, why not generate them directly with a Stable Diffusion model?

In this video, I show you how to generate new images with a Stable Diffusion model and the diffusers library, in order to augment an image classification dataset. Then, I add the new images to the original dataset, and push the augmented dataset to the [Hugging Face](http://huggingface.co) hub. Finally, I fine-tune an existing model on the augmented dataset.

{% youtube sIe0eo3fYQ4 %}

- Code: [https://gitlab.com/juliensimon/huggingface-demos/-/tree/main/food102](https://gitlab.com/juliensimon/huggingface-demos/-/tree/main/food102)
- Food101 dataset: [https://huggingface.co/datasets/food101](https://huggingface.co/datasets/food101)
- Original model: [https://huggingface.co/juliensimon/autotrain-food101-1471154053](https://huggingface.co/juliensimon/autotrain-food101-1471154053)
- How the original model was created with AutoTrain: [https://youtu.be/uFxtl7QuUvo](https://youtu.be/uFxtl7QuUvo)
- Stable Diffusion model: [https://huggingface.co/runwayml/stable-diffusion-v1-5](https://huggingface.co/runwayml/stable-diffusion-v1-5)
- Stable Diffusion Space: [https://huggingface.co/spaces/runwayml/stable-diffusion-v1-5](https://huggingface.co/spaces/runwayml/stable-diffusion-v1-5)
- Diffusers library: [https://github.com/huggingface/diffusers](https://github.com/huggingface/diffusers)
- Food102 dataset: [https://huggingface.co/datasets/juliensimon/food102](https://huggingface.co/datasets/juliensimon/food102)
- New model: [https://huggingface.co/juliensimon/swin-food102](https://huggingface.co/juliensimon/swin-food102)
AI - Game Plan
Tags: ai, machinelearning, strategy, leadership
Published: 2022-10-26 19:34:12

## **Introduction**:
The current trend observed is organization / Companies are adopting AI / ML at a rapid pace. The key to success is to tease out how we bring to life in practice and learn in smaller cycle cycles to bring the organization to learn and embrace the technology. The core principal is the same as in any technology wave adoption (Cloud adoption, 5G, LCAP etc..) 

- Explain the "**Why**" ?. Explain how the technology would enable business to achieve its business strategy 

- Explain the "**How**"?. Training the ambassadors about the technology and work with the change team to update the progress and earnings coming from your efforts

- Explain the "**What**"?. Showcase the success by ambassadors and share the patterns / accelerators for the technology and help the wider organization to show the ART of possible. 

 

## **How to drive the Change ?**
Bringing new technology could be stressful and 


Below is an overview of different AI adoption models 

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


Below is an approach which is proven and is a version aligned to shifting from project to product mindset.


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

## Think Big (Incubate),Start Small (Scale) and Scale Fast (Optimize) 


**_Summary:_**

- Free up small teams to act independently

- Feed these teams with the systems, resources, and tools they need

- Funnel the best innovations back through the company.
Videos: 2 webinars with Iguazio and Pinecone
Tags: mlops, transformers, machinelearning, deeplearning
Published: 2022-10-27 12:14:13

---
title: Videos: 2 webinars with Iguazio and Pinecone
published: true
date: 2022-10-26 19:13:43 UTC
tags: mlops,transformers,machinelearning,deeplearning
canonical_url: https://julsimon.medium.com/videos-2-webinars-with-iguazio-and-f862d1e96623
---

### Videos: 2 webinars with Iguazio and Pinecone

Here are two recent webinars that you may enjoy.

In the [Iguazio](http://iguazio.com/) webinar, we show you to deploy [Hugging Face](http://huggingface.co) models with [MLRun](https://github.com/mlrun/mlrun) into real business environments, serve them continuously at scale, manage their lifecycle in production, and much more.

{% youtube fmCV2LWFKVw %}

In the [Pinecone](http://pinecone.io) webinar, we show you how to combine Hugging Face [Inference Endpoints](https://huggingface.co/inference-endpoints) with the Pinecone vector database to build semantic search applications.

{% youtube 78VIBB9ZaR0 %}
adding auto suggestion to my react dictionary app
Published: 2022-10-26 18:56:54

having a hard time adding the useAutoSUggest feature to my react dictionary app,
would anyone be able to help me implementing it so that users and can type any word and they'll get suggestions.

see my code below

import { useContext, useState } from "react";
import { InputContext } from "../App";
import useAutoSuggest from "react-use-autosuggest";

const Header = () => {
  const [value, setValue] = useState("");
  const { inputValue, setInputValue } = useContext(InputContext);

  const handleInputChange = (e) => setValue(e.target.value);
  const handleSubmit = () => {
    setInputValue(value);
    setValue("");
  };

  const handleInputKeyDown = (e) => {
    if (e.key === "Enter") {
      setInputValue(value);
      setValue("");
      return;
    }
  };

  const wordSuggest = useAutoSuggest();

  return (
    <div className="bg-gray-700">
      <div className="container mx auto py-8">
        <h1 className="text-3xl font-bold text-center text-white">
          My Free Dictionary
        </h1>
        <p className="text-center mt-1 mb-10 text-white text-lg">
          Find Definitions for word
        </p>

        <div className="flex itmes-center justify-center mt-5">
          <div className="flex border-2 border-gray-200 rounded">
            <input
              className="px-4 py-2 md:w-80"
              type="text"
              placeholder="Search.."
              onChange={handleInputChange}
              value={value}
              onKeyDown={handleInputKeyDown}
            />
            <button
              className="bg-blue-400 border-l px-4 py-2 text-white"
              onClick={handleSubmit}
            >
              Search
            </button>
          </div>
        </div>
        {inputValue && (
          <h3 className="text-gray-50 text-center mt-4">
            Results for:{" "}
            <span className="text-white font-bold">{inputValue}</span>
          </h3>
Hoisting in javascript
Tags: javascript, webdev, beginners
Published: 2022-10-26 18:55:18


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


JavaScript **Hoisting** refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Hoisting allows functions to be safely used in code before they are declared.

Variable and class declarations are also hoisted, so they too can be referenced before they are declared. Note that doing so can lead to unexpected errors, and is not generally recommended.

### **Function hoisting**

One of the advantages of hoisting is that it lets you use a function before you declare it in your code.

```
catName("Tiger"); 
function catName(name) { 
  console.log(`My cat's name is ${name}`); 
} /* The result of the code above is: "My cat's name is Tiger" */

Without hoisting you would have to write the same code like this:

function catName(name) { 
  console.log(`My cat's name is ${name}`); 
} catName("Tiger"); /* The result of the code above is the same: "My cat's name is Tiger" *
```

### **Variable hoisting**

Hoisting works with variables too, so you can use a variable in code before it is declared and/or initialized.

However, JavaScript only hoists declarations, not initializations! This means that initialization doesn't happen until the associated line of code is executed, even if the variable was originally initialized then declared, or declared and initialized in the same line.

Until that point in the execution is reached the variable has its default initialization (undefined for a variable declared using var, otherwise uninitialized).