teleren/devto huggingface dataset:
Two Techocodger Videos
Published: 2022-08-21 14:23:42

As presaged in my [hello post](https://dev.to/techocodger/hello-from-a-techocodger-2m59) corresponding to this account, there is a YouTube channel.

- [Techocodger YouTube Channel](https://www.youtube.com/channel/UCkx02uDDrYGalB8iIMxg16w)

The channel was set up to host two videos I made as a pair of "coding walkthroughs". 

These appear as the playlist:
- [Coding Walkthroughs](https://www.youtube.com/playlist?list=PLFRAsaMqA_bU7zVu3Xi8rfOOsN8uLj-Cm)

and the two videos are:
- Coding Walkthrough 001 - Code Inspection
- Coding Walkthrough 002 - Code Cascade

Here is a brief overview of them, there will be a fuller post as a companion to each one.

These coding walkthroughs are aimed at programmers who have been learning to code but perhaps haven't yet written much beyond the typical small coding examples.

I wanted to show what it is like dealing with a moderate amount of your own code, especially when you only work on it occasionally. The topic here is not really about the code itself, but rather the ordinary nature of coding.

These videos are meant to be like looking over the shoulder of a colleague as they code, from which you can politely walk away with your own thoughts of how you would do things better.

To that end, these are deliberately single-take recordings, with no edits. The indecision and rediscovery that you can watch me do, is largely what I want to demonstrate.

Note that this does mean that the commentary is an important part, so if you watch without sound you will only see some unimpressive meandering around some equally unimpressive code. At the time of writing I haven't seen how well the automated captioning on YouTube will turn out.

---

### Coding Walkthrough 001 - Code Inspection

This walkthrough tackles revisiting the source code of a program so as to work out which parts will need to be modified for adding a desired new feature.

Some GUI controls have already been added and the intention is to rediscover into what parts of the program's structure those values will need to be passed. 

This first session, was just about looking around, no code editing happens.

- [Coding Walkthrough 001 - Code Inspection](https://youtu.be/dJz8J0AReCE)

---

### Coding Walkthrough 002 - Code Cascade

This walkthrough follows on from the previous video. It tackles actually adding code to pass the value of a new checkbox in the GUI down into the places where new code will need to be written.

The session shows just one of the many ways to tackle making a series of edits that will end up providing a new propagation of values through multiple layers of the program.

- [Coding Walkthrough 002 - Code Cascade](https://youtu.be/bN9_-gJx42U)

---

I do have longer companion articles (mostly) written for each of the videos and will probably publish those in due course.
Hello from a Techocodger
Published: 2022-08-21 14:20:00

Hi, I'm Techocodger and I'll be using this account to share some demonstrations of the dull and unglamorous side of coding. So if you want to be hip and cool and trendy about programming this probably is not for you.

I've been a self-taught, mediocre, sporadic and amateur grade programmer for decades.

I have made a couple of videos because I wanted to let beginner programmers see that you don't have to be a coding wizard or expert in language X to create a program that can seem to be complex.

Now, to be a bit more candid, "Techocodger" is an alter-ego that is just for this purpose. There is no "business" to this, nothing being sold or promoted, no social graph plan etc. I just felt like doing it. If it helps you, good, and if not, I'll apologise for wasting your time - or even perhaps for showing you my bad habits and techniques.

I do have a regular personal-style account here on Dev - this is really just a convenient separation of purpose. The connection is not anything secret and can probably be  deduced from the video content.
onChange does not trigger when typing but triggers after clicking outside the textfield.
Tags: react, reacthookform, discuss
Published: 2022-08-21 14:18:07

I have 3 react components .  Lets say, A B & C. C is a textfield component.  C is present in B . B is just a parent component for C. Component B is present/imported in A. We are using react-hook-form version 7.

My issue is whenever I type anything inside the textfield, the onChange method does not trigger. But when I click anywhere outside the textfield, the onChange method of textfield triggers.

Also, the textfield component C is wrapped in a Controller tag of react-hook-form.

In my Comp A, I have a function  convertToText to carry out required calculation, for which I need the value entered inside the textfield in component C.  handleChange is a event by which I keep a watch on the onChange attribute of CompC (textfield).

For this, I pass the props from Component A to Component C via Componet B as follows:

const CompA = () => {
/*other lines of code*/
return(
<CompB  handleChange = {convertToText} />
)
}

const CompB = (props) =>{
/*other lines of code*/

const {control, getValues, setValue, handleChange,  ...} = useFormField(props.label, validations, input, props )


const renderInput = (value, onChange, onBlur, ref) => {
 <CompC 
       onChange={ (e)=> handleChange(e,onChange,name)}
       value={value}
 />
}

return(
<Controller 
    control={control}
    render=({field: {value, onChange, onBlur, ref}}) = > renderInput(value, onChange, onBlur, ref)
/>
)

}


/* useFormField is a react hook function*/

//  useFormField.js

function useFormField(label, validations, input , props)
{
   const {control, getValues, setValue, formState:{errors}, trigger } = useFormContext();

const handleChange = (e, onChange, name) => {
if(input && input.type === 'number')
{    
         onChange(Number(e.target.value))
}
else if(typeof e.value === 'number')
{
 onChange(e.value)
}
else if(onChange)  onChange(e);

if(props.handleChange)
{
  props.handleChange({ 
   event:e,
   value: e.value? e.value: e.target.value,
   name,
   setValue,
   getValues,
   addToast
});
}
};
return { control, getValues, setValue, handleChange, trigger};

}
}

export default useFormField;


please help me with this.
QR CODE GENERATOR
Tags: webdev, sideprojects, tool, fun
Published: 2022-08-21 14:03:00

Hey there! Making some projects involves work, efforts and mainly the idea generation and the usage of your project to people out there. 

That's where developers like us find the fun out of our creations. I'm talking about building side projects. Haha!

We're living in a business world, right? People tend to mange their business in offline for so long until COVID changed the gameplay. Everything's online now. 

Coming to the point, every tech business needs an influence over people and that's where a cool website comes in handy. A website comes with a URL. No matter how long or short your website URL is, it's still a URL. 

Why type a link when you can scan it in a tap go? That's where QR Code comes to your aid. Just enter your desired URL and then my tool generates a QR Code for you to save and use anytime by scanning it. 

[Code 🔗](https://github.com/JagadeeshKJ/QR-Code-Generator)
[Live ⚡](https://qr-code-generator-eight.vercel.app/)


![Outlook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p32pp98nvsw5e8h0fdlv.png)
Yet another Portfolio website written in SvelteKit and Tailwind
Tags: svelte, tailwindcss, typescript, webdev
Published: 2022-08-21 13:34:59

One of the important aspect of a developer life is to showcase his/her skills. It can be done in many ways but as a web developer we can show it through a portfolio website which can be shared easily with others.

At some time in our journey as developer most of us have developed some kind of portfolio website. My goal was the same by using some of the latest technologies and making it in a way so that anyone could modify it or update it without much of hassle. For this purpose I chose **[SvelteKit](https://kit.svelte.dev/)** as my Javascript Framework with **TailwindCSS** and **Typescript**. Let me walk you through some of my thoughts which led to choose this particular stack.

_PS: I am not a UI/UX Designer, But any suggestions are welcome always_

[Portfolio Demo](portfolio-pi-navy-73.vercel.app/)
[GitHub](https://github.com/ishaanparlikar/portfolio)

### Why SvelteKit?
1. I like the fact that Svelte or Sveltekit does not ship any additional library or code to the browser. It compiles down to raw JavaScript which can read by the browser efficiently.
2. Sveltekit gives me SSR which can help in SEO optimization but It can also do CSR and SSG.
3. By default it handles routing for you.

### Tailwind CSS
I have been working in tailwind for a while now and It really makes my development workflow fast. I am aware of the criticism that tailwind receive and I also sometimes feel the same but for this purpose I wanted to keep it simple.On top of it, it gives me theming options so I can customize it later from a single file.
Also, I am using [daisy UI](https://daisyui.com/) on top of the tailwind for UI Components .

### Typescript
Its 2022 😂

### _Other Libraries_ 
* [Iconify](https://docs.iconify.design/icon-components/svelte/)
* Firebase (Analytics)
* [Email Js](https://www.emailjs.com/) For Inquiry and Contact form submission.


_Now let me walk you through some of the features of this._

1. Minimal Dependencies and Latest technologies
2. Locale Ready (Add your Details in locale file and you are set). It will handle SEO tags as well.
3. Ready for SSR, SSG, CSR
4. Dark Mode/Light Mode
5. Firebase Analytics - Add Config into env file and start Tracking
6. Type-safe
7. Contact form submission with Email-Js.(Add the API Keys to ENV file)
8. SEO Ready.
9. Simple File Structure.
10. Update JSON and Image files in `lib/assets/` and Go.

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

This website serves as a template to one who wants to get quickly started. You can customize color schemes in tailwind config files. After designing template it took me half hour to upload all the content and host it on vercel.

You can check my portfolio here [Link](https://www.ishanparlikar.dev/)

> _I know there will be some bugs and issues. If you find any please write to me or create an issue on GitHub._
> _Any suggestions are welcome_
> _If you like it don't forget to ⭐ it or Fork it._
Caddy in Docker with common_log
Tags: caddy, docker, logging, log
Published: 2022-08-21 13:08:21

---
title: Caddy in Docker with common_log
published: true
description: When you just want a simple log
tags: caddy, docker, logging, log
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9oyllllwezjpw6ilb2nx.jpeg
# Use a ratio of 100:42 for best results.
---

As of Caddy [v2.5.0](https://github.com/caddyserver/caddy/releases/tag/v2.5.0) they have _"removed the deprecated common_log field from HTTP access logs, and the single_field encoder."_. For me as a casual user of Caddy who mostly just looks at logs this is inconvenient. I don't use any tools to analyse json files for automation, maybe I should? However, the good folks at Caddy doesn't leave us high and dry. "If you relied on this, you may use the `transform encoder plugin` to encode logs in Common Log format.". But, since I am using Docker the version of Caddy I pull down from Docker Hub does not have this plugin available... Enter the builder.

According to [Caddy's official Docker Hub documentation](https://hub.docker.com/_/caddy/), we need to create our own [Dockerfile](https://docs.docker.com/engine/reference/builder/) with the builder image (`caddy:builder`) and then create our own Caddy image.

This is how the Dockerfile looks like:
```dockerfile
ARG VERSION=2.5.2

FROM caddy:${VERSION}-builder AS builder

RUN xcaddy build \
  --with github.com/caddyserver/transform-encoder

FROM caddy:${VERSION}

COPY --from=builder /usr/bin/caddy /usr/bin/caddy
```
The magic part is the line:
```dockerfile
RUN xcaddy build \
  --with github.com/caddyserver/transform-encoder
Which pulls the transform-encoder plugin and installs it. Then we are switching to a "normal" Caddy image and just replacing the binary with our custom built one.
```

Now you just need to build and run this Dockerfile locally!

![docker whales](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk4vf1j62s7s6myshbtd.jpeg)

## Caddyfile
This is the syntax to use it in a [Caddyfile](https://caddyserver.com/docs/caddyfile/concepts#caddyfile-concepts):
```
log {
        format transform "{common_log}"
        output file /var/log/homepage.log
    }
```
##tl;dr
```sh
docker pull mroggy85/caddy:2.5.2
```

See my Docker Hub Page: [https://hub.docker.com/r/mroggy85/caddy](https://hub.docker.com/r/mroggy85/caddy)

Original blog post: https://okuno.se/blog/caddy-in-docker-with-common-log
Build a media center from almost anything
Tags: kodi, streaming, diy, mediacenter
Published: 2022-08-21 12:53:00

- Waaait what is a media center, and why should i care?
	- It's software that's basically a smart tv equivalent where you can view all your media/subscriptions in one place. 
	- In some ways it's better than a smart tv because it has generally more software than a cheap tv and you can repurpose your existing device. 
	- The one drawback is that it will require some setting up.

## Hardware
- You can use any 64bit intel/amd processor equipped laptop/pc from tha last 10 years if you are sticking to hd content.
- You can use an android box or phone with hdmi out or a cheap **S**ingle **B**oard **C**omputer like the raspberry pi.

## Software
- The star of the show is kodi, which is a dedicated media center app with an extensive addon ecosystem.
- It can be installed directly on windows, android or on linux, macos. 
- On the other hand if you are using dedicated hardware for this purpose i would advise to install a **J**ust **E**nough **O**perating **S**ystem which is a stripped down linux system with kodi acting as the systems "desktop", they have dedicated controls for wifi and bluetooth inside the kodi interface.
- JEOS are:
	- for amd/intel and some **S**ingle **B**oard **C**omputers you can install [libreelec](https://libreelec.tv/downloads/).
	- In case of the raspberry pi you can use libreelec or [OSMC](https://osmc.tv/download/).

#### Addons
- Sooo inside kodi, software is distributed as addons they can be installed from repositories and user repositories can be installed via zip files.
- You can basically watch every streaming service with right addon, most of it can be found in the [slyguy](https://k.slyguy.xyz/) repository, but you can find every kind of content under the sun.
- Kodi comes included with a base repository with a lot of addons, also libreelec has its own repo with useful addons like a chrome browser.

#### Connectivity
- You can remote control it with android apps like [yatse](https://play.google.com/store/apps/details?hl=en&id=org.leetzone.android.yatsewidgetfree), [kore](https://play.google.com/store/apps/details?id=org.xbmc.kore&hl=en), the [Official Kodi Remote](https://apps.apple.com/us/app/official-kodi-remote/id520480364) ios app or with the built in web interface.
- Kodi includes a SMB file server, and you can cast to it using airplay, or you can share videos with kodi through the remote app.

## Sooo
- I hoped i managed to spark some interest in you. Stay curious!
GSoC 2022 CircuitVerse | Week 9 and 10 Report
Tags: javascript, webdev, opensource, internship
Published: 2022-08-21 12:49:11

## Description
These two weeks were awesome in the context of learning and coding. I learned a lot about migrations, rails console, rails specs, rails ActiveRecord, and rails API.

These 2 weeks were majorly focused on data migration, completing the PR and notification API. 

So the migration I coded for the data was ok but need modifications. Aboobacker guided me to write quality and scalable migration. Also, as this was the `data` migration, Aboobacker suggested to use `rails-data-migrations` gem that make a separate `data_migrations` directory in `db/`, that help us to track the data migrations files. 

- To Generate data migration file:
```rb
rails generate data_migration migration_name
```

- To run the data migration:
```rb
rake data:migrate
```

We have made some cleanups as well.
I also learned a lot about the spec and these weeks I worked on that part as well.

In this week(week 10), I worked on notification API for mobile-app along with the specs.


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

#### PR:
- [feat: noticed integration (Notification Page)](https://github.com/CircuitVerse/CircuitVerse/pull/3243)
- [feat: notifications api](https://github.com/CircuitVerse/CircuitVerse/pull/3259)

The progress we have made in these 2 weeks:
- Implement noticed gem.
- PR for notification API for Mobile-App.
- Activity Notification data Migration.
- Removed activity Notification gem.

### What Next?
- Reimplement Web push for notification.
- Design for weekly contest.

### Conclusion
By far these two weeks were full of debugging and learning. I took much time as expected for this PR but will work more hard and try to deliver the features as expected.
Create Web Components in Lit, publish on npm & use in Angular 14, React 18 and Vanilla JS Projects (free video course)
Tags: javascript, react, angular, webcomponents
Published: 2022-08-21 12:35:00

I have published a free mini-course to create Web Components using the [Google Lit](https://lit.dev/) library and TypeScript.

In this series you will also learn how to publish your Web Components on NPM and how to use them in Vanilla JavaScript, [Angular](https://angular.io/) 14 and [React](https://reactjs.org/) 18/TypeScript projects.

> I use [ViteJS](https://vitejs.dev/) to create VanillaJS, React18/TS and the Lit projects, while I use [Angular Cli](https://angular.io/cli) to create the Angular 14 Project

♥️ Don't forget to subscribe my [YouTube Channel](https://www.youtube.com/c/FabioBiondi?sub_confirmation=1) ♥️

---

### 1. Create a Lit Project
{% embed https://www.youtube.com/watch?v=T5nrB5t5pMw %}

---
### 2. Create a Web Component with Lit
{% embed https://www.youtube.com/watch?v=N2iDnH2P4ns %}

---
### 3. Styling Components with CSS e Custom Props
{% embed https://www.youtube.com/watch?v=eNepHRNqwBI %}

---
### 4. Component Properties
{% embed https://www.youtube.com/watch?v=aTY0y0_7nLg %}

---
### 5. Slot
{% embed https://www.youtube.com/watch?v=YsNKauElN08 %}

---
### 6. Built-in Directives: when
{% embed https://www.youtube.com/watch?v=dpknJ0JN4pA %}

---
### 7. Mouse Events
{% embed https://www.youtube.com/watch?v=qFcjwcJKDl8 %}

---
### 8. Emit Custom Events
{% embed https://www.youtube.com/watch?v=WvlWwjzGhyk %}

---
### 9. Publish web components on Npm
{% embed https://www.youtube.com/watch?v=hrhWXSZ7M3w %}

---
### 10. Use the component in Vanilla JS projects
{% embed https://www.youtube.com/watch?v=q52Gc6I_gMM %}

---
### 11. use classMap, update component and re-publish on Npm
{% embed https://www.youtube.com/watch?v=QvVwx-IupHw %}

---
### 12. Use the component in Angular projects
{% embed https://www.youtube.com/watch?v=gXHMIfKfnrU %}

---
### 13. Use the component in React 18 projects
{% embed https://www.youtube.com/watch?v=r6TrVGxDXDU %}

---

♥️ Let me know what you think and don't forget to subscribe my [YouTube Channel](https://www.youtube.com/c/FabioBiondi?sub_confirmation=1) ♥️
Things that I have learned for the past 1 year in Cloud Computing
Tags: beginners, cloud
Published: 2022-08-21 12:29:00

This week is my 1 year anniversary venturing into cloud computing.
Everyday at work, always an exciting day. New things that I don't know and learn. 

So, I want to share with you guys on things that I have learned this past 1 year venturing into cloud computing. 

1. Keep exploring and never stop learning
Cloud technology always keep changing and improving day by day. There's always new things that you will find really pique your interest along the way. Who knows that, there's a tool to improve the efficiency of your Lambda(AWS). I don't know that at first 🤷🏻‍♂️🤯

2. Always ask questions. 
Sometimes, stupid question leads you to something that you don't even know exist! It's fine to keep asking your colleague, your friend, the community. That really shows that, you keep thinking, and curious about something.

3. Always become curious of something, and what happening behind the process. 
Lack of curiosity would lead to lack of motivation to explore, learn new things and acquiring new knowledge. In short it affects the  development and creates a disconnect to the surroundings. This disconnect will leads to increase in stress and affects your happiness. 

4. Don't sad or give up when you make a mistake. 
Acknowledge the mistake, analyse back, take time what led to you making the mistake, put the lesson learnt into practice, review your progress and remember that we can't avoid making mistakes. It's normal. The question is, how can we minimise it. Read back this paragraph and repeat. 

5. Make friends and chat with your colleagues/community
You don't know who you will be talking with. I am sure that you will surely learn something from them. Find a community that can help you in this cloud journey. Maybe after that, you can help back the community by helping others.


Yup, that's all!

---

Thank you for reading :D

Psstt pstt :p
Do consider to love this article ❤️ and follow me! Why not right? It's FREE~
I would really appreciate it 👨🏻‍💻
Will be posting more on things related to AWS, Javascript, Python, Serverless and more!
Finite state machines in frontend
Tags: programming, webdev, tutorial, javascript
Published: 2022-08-21 12:13:33

Friday - This most loved weekday for working people, sharing the interesting story on interesting day

[Finite state machines explained]
(https://www.youtube.com/shorts/JKq3xiMaVsY)

Conclusion
Until next time, have a good day.

Keep developing!!
Our website [iHateReading](www.ihatereading.in) || [Youtube](https://www.youtube.com/channel/UC6I-Tz6QwYbJpoIK7l0NtXA) || [Twitter](https://twitter.com/treyvijay)
Interceptores Java
Tags: java
Published: 2022-08-21 12:07:45

Los interceptores son útiles cuando se requiere aplicar una funcionalidad especifica para ciertas peticiones HTTP y es transversal a nuestra aplicación.
Es decir son fragmentos de código reutilizables que interceptan un método al controlador para agregar funcionalidad antes o después

 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvp4ioblhriydzhdd0jd.png)
 
Que hace un controlador?
Siempre se va a interceptar el código antes o después.

 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yau3arq3meejnvfuxaro.png)
 
Como funciona un interceptor?
Los interceptores deben implementar la interfaz HandlerInterceptor o extender de la clase abstracta HandlerInterceptorAdapter
Son 3 metodos que podemos implementar
.Metodo boolean preHandler(): cuando este método retorne true, continua con la ejecución del controlador y si tiene mas interceptores asociados continua con la ejecución en cadena, cuando retorna false, se asume que el interceptor se hace cargo del request(por ejemplo, redirige a una determinada vista o ruta) y no continua ejecutando el controlador ni los demás interceptores
Metodo void postHandler(): implementar algo después de que se haya invocado el método handler del controlador
Metodo void afterCompletion(): implementar algo cuando finaliza el proceso, es decir, después de cargar y renderizar la vista
Frontend Links
Published: 2022-08-21 11:50:49

{% embed https://qwik.builder.io/guide/overview %}
{% embed https://partytown.builder.io %}
{% embed https://github.com/BuilderIO/mitosis %}
{% embed https://jamstack.org %}
{% embed https://jamstack.org/generators/ %}
{% embed https://jamstack.org/headless-cms/ %}
{% embed https://strapi.io %}

## React

{% embed https://reactjs.org %}
{% embed https://create-react-app.dev %}
{% embed https://www.gatsbyjs.com %}
{% embed https://nextjs.org %}
{% embed https://remix.run %}
{% embed https://lit.dev %}