teleren/devto huggingface dataset:
Site Search Powered by JSON Feed
Tags: javascript, search, rss, react
Published: 2023-03-05 19:29:40

Inspired by [Craig Mods's gist for client-side site search](https://gist.github.com/cmod/5410eae147e4318164258742dd053993), I ported his work over to a React component I could use with this Next.js powered site. At the time of posting, every page of [lightpohl.me](https://www.lightpohl.me) is generated at build time — sites like these fall into the category called 'static site generation.' At build time, I grab all posts and photos from a CMS, tell Next.js which pages it needs to build, and generate an RSS feed. When a post is created or is updated, I generate a new build via a webhook and the process starts over again. Without a live API, where would I get the data to power the site search? RSS! Well, sort of.

I use [jpmonette/feed](https://github.com/jpmonette/feed) to generate my existing [rss.xml](https://www.lightpohl.me/rss.xml), but it also supports the JSON Feed specification as an output type. By tweaking the config, I was able to expose an `rss.json` as well. A simplified version of output looks like the following:

```json
{
    "version": "https://jsonfeed.org/version/1",
    "title": "Joshua Pohl",
    "home_page_url": "https://lightpohl.me",
    "feed_url": "https://lightpohl.me/rss.json",
    "description": "Writing about programming, the Internet, and travel.",
    "author": {
        "name": "Joshua Pohl",
        "url": "https://lightpohl.me"
    },
    "items": [
        {
            "id": "https://lightpohl.me/i/waikiki-morning-sailboat",
            "url": "https://lightpohl.me/i/waikiki-morning-sailboat",
            "title": "Waikiki Morning Sailboat",
            "summary": "A small sailboat near Waikiki.",
            "date_modified": "2023-02-21T18:00:00.000Z"
        }
    ]
}
```

The list of `items` works perfectly with [Fuse.js](https://fusejs.io/). Add a `fetch()` call, a couple pieces of state, a few keyboard listeners, and you have a super fast client-side search. Try it out [on desktop](https://www.lightpohl.me) either by clicking the search button in the top right corner or by pressing `CTRL + /`.

It was reminder that feeds need not only be an API for external users, but are powerful tools for sites and web apps themselves. RSS and friends are still cool.
Aumente sua produtividade no VS Code: Conheça as 5 melhores extensões para desenvolvimento
Tags: frontend, programming, vscode, productivity
Published: 2023-03-05 19:13:39

A escolha das ferramentas certas é fundamental para aumentar a produtividade no desenvolvimento de software. E no caso do Visual Studio Code (VS Code), uma das formas de turbinar o seu ambiente de trabalho é através das extensões disponíveis na plataforma.

Pensando nisso, neste artigo vamos apresentar as 5 melhores extensões para o VS Code que vão ajudar você a ser ainda mais eficiente na hora de escrever código. Confira abaixo:

**1. Live Server**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnqoahxxutmsfeydgbfo.png)
A extensão Live Server permite visualizar a página web que você está desenvolvendo em tempo real, sem precisar ficar atualizando a página manualmente. Com ela, você pode ver como as alterações no código estão afetando o layout e a interatividade do seu site. É uma ótima ferramenta para agilizar o processo de desenvolvimento e garantir que tudo esteja funcionando corretamente.

**2. Prettier**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3rajqvi7khuvq4b69kg.png)
O Prettier é uma extensão que ajuda a manter o seu código formatado de maneira consistente e profissional. Com ele, você pode definir as regras de formatação que deseja aplicar no seu código, e a extensão se encarrega de formatar tudo automaticamente. Isso ajuda a manter um padrão de qualidade no seu código e a evitar conflitos entre os desenvolvedores da equipe.

**3. Bracket Pair Colorizer**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/024y6y4hafb4ix8r327f.png)
O Bracket Pair Colorizer é uma extensão que ajuda a visualizar melhor as estruturas de código, colorindo os pares de colchetes, chaves e parênteses. Com isso, fica mais fácil identificar erros de sintaxe e garantir que todas as estruturas de código estejam corretas e organizadas.

**4. GitLens**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g25bqyowbpdnmsahfwg5.png)
O GitLens é uma extensão que adiciona recursos avançados do Git ao VS Code. Com ele, você pode ver quem fez cada alteração no código, quando foi feita, e por que motivo. Além disso, é possível comparar diferentes versões do código, visualizar as diferenças entre elas e muito mais. É uma ferramenta essencial para quem trabalha em equipe e precisa manter o controle sobre as alterações no código-fonte.

**5. ESLint**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2gzz51f31jal8yeotgt.png)
O ESLint é uma extensão que ajuda a manter a qualidade do seu código, verificando se ele está em conformidade com as regras definidas pela sua equipe. Com ela, é possível identificar erros de sintaxe, de estilo e de lógica no código, garantindo que ele esteja sempre limpo e organizado.

Essas são as 5 melhores extensões para o VS Code que vão ajudar você a ser mais produtivo e eficiente no desenvolvimento de software. Experimente cada uma delas e veja como elas podem fazer a diferença no seu dia a dia de trabalho.
Type Hinting in PHP function!
Tags: php, function, beginners, programming
Published: 2023-03-05 18:59:37

May be you know what is a function and how it works. PHP checks the data type at run time. Therefore we don't need to tell php explicitly the data type of a variable. PHP interpreter can detect it automatically. It has both advantage and disadvantage. Advantage is we don't need to think so much when declaring the variable but the problem is if the varaible is changed accidentally then it is very tough to debug. 

But from php 7 it supports type hinting in function parameter. Support you want to print age of a user. Here is an approach.

```php
<?php
function print_age($age){
    echo "your age is $age\n";
}
print_age(19);
```
It is giving result perfectly. But what happens if you call it with a string. such as `print_age("abc");` It will give some wrong output. Right? Here is the solution. 

```php
<?php
function print_age(int $age){
    echo "your age is $age\n";
}
print_age(19);
print_age("zig zag bla bla");
```
Now you will get an fatal error for last line. It will enforce you to pass right parameter type. It can help us to find problem at early stage. Type hinting is possible for all php predefined data types.
Build A Responsive SideBar Navigation using HTML & CSS & JAVSCRIPT
Tags: webdev, programming, tutorial, react
Published: 2023-03-05 18:57:19

In this video, we'll go over how to create a sidebar for your YouTube videos using HTML, CSS, and JavaScript. A sidebar can be a great way to showcase related videos, promote your other content, or add other helpful information for your viewers. We'll cover everything you need to know to create a professional-looking sidebar that will help improve your viewers' experience. 


🔔 Subscribe for more!

https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 


🔗 Source code 

https://upfiles.com/a1lNmFzM

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

☝ Start developing the project (base files + images) 

- Click on the UpFiles link 

- Click the green button (code) 

- Click Download ZIP 

- Extract the project to the desired location 

📂Assets Icons: 

https://boxicon.com/

Fonts: 

https://fonts.google.com/

- - - - - - - - - - - - - - - - - - - - - - - - - - - - 

📬 Doubts about the project send a DM to Instagram 

⌚ I answer at anytime

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

🔥 Follow me! 

Facebook https://bit.ly/3IMfk04 

Instagram https://bit.ly/3GHoQyT

Twitter https://bit.ly/3IOBEqc

Linkedin https://bit.ly/3INnwNY

Tags: 

#sidebar #sidebarhtmlcssjs #webmonster #html #css #javascript #webdesign #website #react 

Sidebar Web Development Front-End Development Tutorial personal portfolio website, HTML, CSS, JavaScript, web development, responsive design, tutorial 



➤ Watch : https://youtu.be/FuRO_tVdNTU

So, make sure to watch this video till the end, and don't forget to hit the like button and subscribe to our channel for more web development tutorials and tips!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jikplquxs2wc3c93mfk5.png)
Angular para leigos (Parte 1)
Tags: angular, typescript, sass, css
Published: 2023-03-05 18:54:32

A cada vez venho percebendo a grande procura por artigos de Angular com um passo a passo de como criar aplicações, pensando nisso decidi criar uma série de postagens sobre o Angular e como construir uma aplicação com dados vindos de uma API json. Mas antes de começarmos a codar, vamos para alguns pré requisitos.

## Pré requisitos para codar em Angular

- Saber 70% de HTML
- Saber 70% de CSS
- Saber 70% de JavaScript
- Saber 70% de SASS/SCSS
- Saber 50% de TypeScript
- Ter o NodeJS com versão atualizada instalada no computador
- Ter VSCode ou outro editor de código instalado
- Navegador atualizado

## O que é o Angular

O Angular é um framework open-source criado pela Google para o desenvolvimento de aplicações web dinâmicas e complexas. Ele foi lançado em 2010 e passou por várias atualizações desde então, tornando-se uma das ferramentas mais populares para o desenvolvimento de Single-Page Applications (SPA). O Angular utiliza a arquitetura MVC (Model-View-Controller) para separar a lógica de negócios da interface do usuário, permitindo uma maior modularidade e reutilização de código. Ele também oferece recursos poderosos como injeção de dependência, binding de dados bidirecional e suporte a testes automatizados, tornando o desenvolvimento de aplicações complexas mais eficiente e produtivo. 

## Startando uma aplicação Angular

Antes de colocarmos a mão na massa, precisamos fazer a instalação do modo CLI do Angular em nossa máquina, para isso iremos abrir o terminal e digitar o seguinte comando: 

`npm install -g @angular/cli`

Após instalado o CLI, podemos então criar então nosso projeto, escolha um lugar fácil de achar seu projeto, ou se preferir crie um novo repositório no Github, clone e dentro do diretório abra um terminal, após aberto o terminal escreva o comando abaixo para criar o projeto angular:

`ng new rentcar`

O comando acima irá criar um projeto de nome rentcar, vale destacar que no terminal você irá veral algumas questões como: se você deseja que o projeto seja rastreado pelo Analytics, se deseja que o router seja instalado para você fazer navegações e validações de rotas e o pré processador css que deseja adotar, você também pode adotar em usar apenas o css tradicional.

## Rodando nossa aplicação Angular

Se você fez todas as etapas acima e não apareceu erro em seu terminal, agora podemos abrir o projeto no navegador e ver o resultado. No terminal navegue para dentro da pasta onde está aplicação e mande o seguinte comando: 

`ng serve`

O comando acima irá abrir uma aplicação na porta 4200 (localhost:4200), se você abriu a navegação em uma aba de seu navegador, irá notar uma tela onde tem algumas descrições e uma parte onde tem um comando de como gerar um componente com CLI. Essa view é famosa tela "Hello World". Agora que sabemos que nosso projeto está ok, podemos então partir para a criação de nossos componentes personalizados, mas essa parte deixaremos para a segunda parte. Por hora encerramos aqui, um grande abraço e se tiver alguma dúvida deixe aí nos comentários :)
Planejamento[1] <04:05>/23
Tags: study, programming
Published: 2023-03-05 18:52:29

## Organizar que lugares vou estudar cada tecnologia
- Resumo das Tecnologias
- Python IA => {A+}
- C#|.NET => {A}
- React => {B+}
- Java => {C}
- Docker => {C}
- Electron => {E}

---

### Para Estudar Python IA
Já tenho uma boa base de python, no entanto, para as bibliotecas, utilizarei a ALURA e a própria documentação delas. Também tem um ótimo tutorial do FCC para isso
{% embed https://www.youtube.com/watch?v=pqNCD_5r0IU %} 


### Para Estudar C#|.NET
https://learn.microsoft.com/pt-br/training/dotnet/?WT.mc_id=dotnet-35129-website

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


### Para Estudar React e Java
Utilize a própria documentação e Projetos do youtube, sem muita enrolação, foque em projetos!

### Para Estudar Docker
Utilize a Alura e vídeos do youtube, não precisa se aprofundar tanto

### Para Electron
Utilize a própria documentação, leia ela de cabo a rabo, será uma ótima base, e depois faça alguns projetos e exemplos no youtube. Depois desse processo, vamos tentar aplicar e reaplicar em alguns projetos nossos.
How to Get Fast in the Terminal (Without Breaking a Sweat)
Tags: beginners, bash, tutorial, linux
Published: 2023-03-05 18:51:47

Welcome to the magical world of terminal commands, where the keys are your friends and the mouse is your **mortal enemy**!

If you're new to the terminal, it can be a bit overwhelming at first. But fear not! With these tips, you'll be navigating your way around like a pro in no time.

## 1. Learn the Basic Commands (Because You Gotta Crawl Before You Can Run):
The first step to becoming a terminal ninja is to learn the basic commands. Think of it as learning to walk before you can run. These commands include:

* `ls` (list files in a directory)
* `cd` (change directory)
* `mkdir` (make a new directory)
* `touch` (create a new file)
* `mv` (move a file or directory)
* `rm` (remove a file)
* `rmdir` (removes a directory)

Memorizing these will make you feel like a terminal superhero.

## 2. Use Tab Completion (Because Ain't Nobody Got Time for all That):
Tab completion is like having your own personal assistant, ready to finish your sentences for you. With tab completion, you can quickly complete a command or file name by typing the first few letters and then hitting the `Tab` key. This can save you a lot of time and help you avoid typos.

**<u>Pro tip:</u>** If you're not sure what to type next, try using double tab to see a list of available options. It's like having your own personal cheerleading squad, rooting you on to victory.

## 3. Customize Your Shell (Because Why Be Basic?):
Customizing your shell is like redecorating your room, but instead of paint and wallpaper, you're using code and command line tricks. It's like adding some bling to your pet rock - suddenly, it's way cooler than before! You can create a prompt that flashes neon lights, invent hilarious nicknames(aliases) for your favorite commands, and even automate your entire to-do list with a few clever functions. So, let your creative juices flow and make your terminal a reflection of your unique style (or lack thereof). Who knows, maybe your customized shell will become the envy of all your tech-savvy friends!

## 4. Use Keyboard Shortcuts (Because Who Needs a Mouse?):
Using a mouse in the terminal is like wearing a helmet while taking a bath, it's unnecessary and might actually get in the way. Instead, use keyboard shortcuts to save time and impress your friends. 
* `Ctrl+C` cancels the current command.
* `Ctrl+D` exits the shell.
* `Ctrl+R` searches through your command history
* `Ctrl+Z` suspends the current process.
* `Ctrl+L` clears the screen.

The more shortcuts you know, the more impressive you'll be.

## 5. Practice, Practice, Practice (Because Elon Musk Didn't Build SpaceX Overnight):
The final step to becoming a terminal master is to practice, practice, practice. Try to use the terminal for as many tasks as possible, even if it takes a little longer at first. The more you use it, the faster you'll become. And who knows - maybe one day you'll be so fast that you'll make Usain Bolt look like a slowpoke.

Good luck, and may the terminal gods smile upon you!
Starting to learn DevOps
Tags: devops, challenge
Published: 2023-03-05 18:40:23

Hey everyone,

I am starting a 60-day challenge to learn DevOps technologies.

This might look like a very short time for many people, but I think this is going to work for me because I already know a lot of technologies and concepts that DevOps require.

Things that I already know:

- Computer Networking.
- Linux
- Git and GitHub
- Basic knowledge of docker and Kubernetes.

I will be following  this roadmap:  [https://roadmap.sh/devops](https://roadmap.sh/devops)

After every 5 days, I will be writing what I learned. So if you are also thinking of starting to learn DevOps, LETS GOO!! 💪

---

**Timeline**:
What is Profiler in ReactJS?
Tags: reacts, webdev, javascript, programming
Published: 2023-03-05 18:31:19

In ReactJS, a profiler is a built-in tool that allows developers to measure the performance of their components and identify areas for optimization.

React Profiler works by tracking the time it takes for each component to render, as well as the number of times a component renders. This information can help identify components that are causing performance issues and allow developers to optimize them for better performance.

To use the React Profiler, you need to import the profiler component from the 'react' library and wrap it around the component you want to profile. Here's an example:

```
import React, { Profiler } from 'react';


function MyComponent() {
  return (
    <Profiler id="my-component" onRender={(id, phase, actualDuration) => {
      console.log(`${id} took ${actualDuration} ms to render`);
    }}>
      {/* your component code here */}
    </Profiler>
  );
}
```
In this example, the Profiler component is wrapped around the MyComponent component, and the onRender prop is used to log the time it takes to render the component. The "id" prop is used to give a unique name to the profiler instance.


React Profiler can be used in development mode and is not recommended for use in production. It is a useful tool for identifying performance bottlenecks during development and optimizing the application accordingly.
Language Detection with Fastlangid
Tags: python, spacy, language, detection
Published: 2023-03-05 18:28:49

In this short post, I will show you an example of the module Spacy fastlangid. This module can detect the language of a text.

The module is based on the model lid.176.ftz based on fastText. 

# Usage
To use it, import the library and use it. Now, let's see an example:

```
from fastlangid.langid import LID
langid = LID()
```

Now, we have the langid object, and we can pass it to the predict:

```
result = langid.predict('This is a test')
print(f"The detected language is {result}")
```

The output is:

```
The detected language is en
```

For more details see [this](https://medium.com/@davide.gazze/language-detection-with-fastlangid-1d215d028640)
What is function in context of PHP?
Published: 2023-03-05 18:14:20

A function is a bunch of codes that solve a particular problem and solve perfectly. It is encapsulated such a way so that user can use the same code again and again without copy pasting. 

Or you can think a function is a kind of machine. It may or not take some input/inputs and may or not return some output. Think like a blender machine. It takes input such as some mixed fruits, sugar, salt, water and It blends perfectly and then it return a glass of fruit juice. Sometimes inputs are considered as parameters. But it is not necessary that a function must take input or it must return some data. Think like a calling bell. When you press or call it it just creates a sound. There is no return. 

A function name should be meaningful so that anybody can guess what it actually does. 

Suppose you need to list all prime numbers from a given range [a, b] frequently. To filter out prime numbers you have to first detect if the number is prime but you need to check it for each number. So you can write a function to check if the number is prime.

Here is a function that can solve this problem:

```php
<?php

function is_prime($n){
    if ($n < 2){
        return false;
    }
    if($n == 2){
        return true;
    }
    if($n % 2 == 0){
        return false;
    }
    for($i = 3; $i <= (int)sqrt($n); $i += 2){
        if ($n % $i == 0){
            return false;
        }
    }
    return true;
}

$prime_list = [];
$a = 1;
$b = 10;
for($i = $a; $i <= $b; $i++){
    if(is_prime($i)){
       $prime_list[] = $i;
    }
}
print_r($prime_list);


```
Now you can use this is_prime function for any range without copy pasting. Just call the function with necessary parameters.
Are Coursera Certificates Worth It? The Ultimate Guide
Tags: productivity, career, news, community
Published: 2023-03-05 18:11:10

Answering the question, a Coursera certificate can be useful depending on your objectives and how you use it. It can show employers that you have a specific ability or understanding in a particular field, and it may help you stand out among other applicants. It is critical to note, however, that a certificate alone may not be enough to acquire a job or develop your career.

A few techniques should be considered to get the most out of your Coursera degree. To begin, select courses that are related to your field or the abilities you wish to build. Also, make certain that you finish the course and acquire the certificate. This will show employers that you have put in the work and have a thorough understanding of the subject.

You can also include the certificate in your LinkedIn profile or CV to highlight your abilities and knowledge. Rather than simply stating the certificate, it is crucial to showcase the unique skills and knowledge you earned from the course in your profile or CV.

Another method to get the most out of a Coursera credential is to apply what you've learned to real-world tasks. This will not only help you consolidate your knowledge of the subject, but it will also present actual instances of your abilities to potential employers.

In conclusion, a Coursera certificate can be useful, but it’s important to choose relevant courses, complete them, and apply the skills and knowledge in real-world situations. Adding the certificate to your LinkedIn profile or resume can also help showcase your skills to potential employers. Keep in mind that a certificate alone may not be sufficient to secure a job or advance your career, but it can be a valuable addition to your skill set.
Here are some examples of using Apache Age with PostgreSQL:
Published: 2023-03-05 18:06:17

**Creating a graph schema:**

```
CREATE TABLE person (id int PRIMARY KEY, name text);
CREATE TABLE knows (src int REFERENCES person(id), dst int REFERENCES person(id));

```
**Adding nodes and edges to the graph:**

```
INSERT INTO person (id, name) VALUES (1, 'Alice');
INSERT INTO person (id, name) VALUES (2, 'Bob');
INSERT INTO knows (src, dst) VALUES (1, 2);
```
**Querying the graph using GSQL:**

```
SELECT p.name, k.dst FROM person p, knows k WHERE p.id=k.src;
```

This query returns the names of people who know each other.
**
Visualizing the Graph with GAdmin**

Once you have created your graph schema and added nodes and edges to the graph, you can use GAdmin to visualize the graph. GAdmin provides a visual representation of the graph, with nodes and edges displayed as circles and lines. You can use the visualization to explore the relationships between nodes and edges, and to identify patterns in the graph data.

**Conclusion**

These are just a few examples of how you can use Apache Age with PostgreSQL to model, query, and visualize graph data. The possibilities are endless, and you can use Apache Age to model and query any type of graph data.


[Apache-Age:-https://age.apache.org/](https://age.apache.org/)
[GitHub:-https://github.com/apache/age](https://github.com/apache/age)