teleren/devto huggingface dataset:
Navigating the Journey of Full Stack Development: A New Developer's Perspective
Published: 2023-01-12 15:49:38

Exploring the Exciting World of Full Stack Development

As a new full stack developer, I am constantly in awe of the endless possibilities that come with this field. From the front-end design to the back-end logic, full stack development allows us to bring ideas to life and create truly interactive and dynamic web experiences.

One of the things I love most about full stack development is the ability to work on both the client and server sides of a web application. This means that I get to be involved in every aspect of the development process, from the initial concept to the final product. It's incredibly satisfying to see a project come together, and it's even more rewarding when it's something that I've had a hand in creating.

Another aspect of full stack development that I find exciting is the constant evolution of technology. There are always new frameworks and tools being developed, which means that there's always something new to learn and explore. This can be challenging at times, but it also keeps the work interesting and keeps me on my toes.

One of the most important things for a full stack developer is to stay current with the latest technologies and trends. This is why I make a point to stay active in the developer community, attending meetups and conferences, and contributing to open-source projects. It's a great way to learn from others and to share knowledge with my peers.

In conclusion, being a full stack developer is an exciting and dynamic field that offers endless possibilities. It's a challenging and constantly evolving field, but it's also incredibly rewarding. I'm looking forward to continuing to learn and grow as a developer and to see where this journey takes me.
Day 1 of 100 - 2023
Tags: javascript, beginners, webdev, react
Published: 2023-01-12 15:45:54

Finally 🫡, Starting to learn the most hyped and talked about javascript library 🫧☁ <b>REACT</b> 🎇. To say a bit about myself, I'm a Frontend developer (The second most used JS framework - Angular). First time I will be posting my learning journey on the internet (because I rarely learn anything seriously !!!😂) , SOOOOO Let's start learning react ➡️

Day 1: 

Assuming you are completely new to web development (ofcourse you need to be knowing HTML, CSS, JS basics).

Done setting up react on local, basically involves installing NPM (Node Package Manager). So if you are wondering how can you install that, You first need to install node from 'https://nodejs.org/en/'.

Next, Install VS code, a text editor where we write react code. link:  'https://code.visualstudio.com/'

After doing all this if you are still excited:

create a folder in VScode, call it whatever you need.
Open terminal -> Navigate to the folder you just created -> run command "npx create-react-app <reactProjectName>" (replace <reactProjectName> with the name you want to give to your react project, I am too lazy so will usually give just 'app').

next, navigate within your project folder and run the command "npm run start".

Once done, Open browser and type "http://localhost:3000/" and your react app with default configurations starts running.


Congratulations you are a React developer now🎉😅.

So, that's it for DAY1 , let's see if I post Day2 of 100 - 2023.

Cheers🎉
Difference between toJSON() & { raw: true }
Published: 2023-01-12 15:45:12

Both of them are ways to get a plain object from Sequelize DAO.

Main difference is that if we pass a `{ raw: true }` option when using `findOne()` or `findAll()` we get a flattened data.

While we use `Dao.toJSON()` we get a nested object.

Let's see one example from Sequelize doc.

We gonna create 2 many to many tables.
And we use `raw: true` option to see the result.

``` javascript
const Foo = sequelize.define('Foo', { name: DataTypes.TEXT });
const Bar = sequelize.define('Bar', { name: DataTypes.TEXT });
Foo.belongsToMany(Bar, { through: 'Foo_Bar' });
Bar.belongsToMany(Foo, { through: 'Foo_Bar' });

await sequelize.sync();
const amy = await User.create({ name: 'Amy' });
const faveFood1 = await FavoriteFood.create({ name: 'pizza' });
const faveFood2 = await FavoriteFood.create({ name: 'Dacquoise' });
await amy.addFavoriteFood(faveFood1);
await amy.addFavoriteFood(faveFood2);
const amyFaveFood = await amy.findAll({ 
  include: FavoriteFood,
  raw: true,
});
console.log(amyFaveFood);
```

Basically it's nearly the direct result from raw SQL.
In query result we definitely get seperete rows.
```javascript
[
  {
    "id": 1,
    "name": "Amy",
    "FavoriteFood": {
      "id": 1,
      "name": "pizza",
      "User_FavoriteFood": {
        "UserId": 1,
        "FavoriteFoodId": 1
      }
    }
  },
  {
    "id": 1,
    "name": "Amy",
    "FavoriteFood": {
      "id": 2,
      "name": "Dacquoise",
      "User_FavoriteFood": {
        "UserId": 1,
        "FavoriteFoodId": 2
      }
    }
  }
]
```

However with that result we have more work handling data formatting.
We can simply use `toJSON()` to aggregate the parts that we want.

Take this as example, I want all `FavoriteFood` aggregated as an array under one key of the Dao.

``` javascript
const Foo = sequelize.define('Foo', { name: DataTypes.TEXT });
const Bar = sequelize.define('Bar', { name: DataTypes.TEXT });
Foo.belongsToMany(Bar, { through: 'Foo_Bar' });
Bar.belongsToMany(Foo, { through: 'Foo_Bar' });

await sequelize.sync();
const amy = await User.create({ name: 'Amy' });
const faveFood1 = await FavoriteFood.create({ name: 'pizza' });
const faveFood2 = await FavoriteFood.create({ name: 'Dacquoise' });
await amy.addFavoriteFood(faveFood1);
await amy.addFavoriteFood(faveFood2);
const amyFaveFood = await amy.findAll({ 
  include: FavoriteFood,
});
console.log(amyFaveFood.toJSON());
```

```javascript
[
  {
    "id": 1,
    "name": "amy",
    "FavoriteFood": [
      {
        "id": 1,
        "name": "pizza",
        "User_FavoriteFood": {
          "UserId": 1,
          "FavoriteFoodId": 1
        }
      },
      {
        "id": 2,
        "name": "Dacquoise",
        "User_FavoriteFood": {
          "UserId": 1,
          "FavoriteFoodId": 2
        }
      },
    ]
  }
]
```

easy come easy go
How to Add Ajax Search to WordPress Without Using a Plugin?
Tags: wordpress, ajax, webdev, javascript
Published: 2023-01-12 15:43:26

Hello guys! Today we are going to create a WordPress Ajax search without a plugin. I’ll also recommend the best free and paid WordPress Ajax search plugins. 

First, we need to create an HTML search box [input field] so users can search. Put it anywhere on the page `template—index.php`, `archive.php`, `page.php`, or anywhere you want to show the search box.

**Add the below code where you want to display an Ajax search box on the page.**

```html
<div class="search_box">
    <form action="/" method="get" autocomplete="off">
        <input type="text" name="s" placeholder="Search Code..." id="keyword" class="input_search" onkeyup="fetch()">
        <button>
            Search
        </button>
    </form>
    <div class="search_result" id="datafetch">
        <ul>
            <li>Please wait...</li>
        </ul>
    </div>
</div>```

Add the below code inside the function.php file, which is located at “wp-content/your-theme/function.php“.

```php
<?php 
/*
 ==================
 Simple Ajax Search
======================   
*/
// add the ajax fetch js
add_action( 'wp_footer', 'fetch_ajax' );
function fetch_ajax() {
?>
<script type="text/javascript">
function fetch(){

    jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'post',
        data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
        success: function(data) {
            jQuery('#datafetch').html( data );
        }
    });

}
</script>

<?php
}

// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('page','news') ) );
    if( $the_query->have_posts() ) :?>
      <ul>
      <?php while( $the_query->have_posts() ): $the_query->the_post(); ?>
            <li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>
        <?php endwhile; ?>
     </ul>
       <?php wp_reset_postdata();  
    endif;

    die();
}
```

## How to add simple search form in WordPress without plugin?

- Open the theme file where you want to display the search form. This is mostly in the header.php or sidebar.php file.
- Add the below code to the file where you want to display the search form:

```html
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <label for="search-field">Search</label>
  <input type="search" id="search-field" name="s" value="<?php echo get_search_query(); ?>">
  <input type="submit" value="Search">
</form>
```
- Save the file and refresh the page to see the custom search form.

## [WordPress jQuery Is Not Defined Error](https://blog.stackfindover.com/wordpress-ajax-search-without-plugin/)
Make a Simple Image Gallery Using Tkinter and Python
Tags: tkinter, python, beginners, programming
Published: 2023-01-12 15:23:55

Hi in this post I will be sharing with you how to make a image slide show using Tkinter and Python. I am slowly making progress into learning python and this project was kind of fun to work out. I am using the pillow (PIL) framework to show the images and resize them on the screen. 

Here is the youtube tutorial video
{% youtube olom5Ow7zbo %}

[Download Image Slide Show Images Here](https://www.mooict.com/make-a-image-slide-show-app-using-python-and-tkinter/)

Source code here 

```
from tkinter import *
from PIL import ImageTk, Image
# set up the tkinter window
root = Tk()
root.title("MOO ICT Python/Tkinter Image Viewer")
root.geometry("610x430")
root.iconbitmap("images/icon.ico")
 
# set up the images
image1 = ImageTk.PhotoImage(Image.open("images/01.jpg").resize((600, 350)))
image2 = ImageTk.PhotoImage(Image.open("images/02.jpg").resize((600, 350)))
image3 = ImageTk.PhotoImage(Image.open("images/03.jpg").resize((600, 350)))
image4 = ImageTk.PhotoImage(Image.open("images/04.jpg").resize((600, 350)))
image5 = ImageTk.PhotoImage(Image.open("images/05.jpg").resize((600, 350)))
# add them to the list
image_list = [image1, image2, image3, image4, image5]
# counter integer
counter = 0
# change image function
def ChangeImage():
    global counter
    if counter < len(image_list) - 1:
        counter += 1
    else:
        counter = 0
    imageLabel.config(image=image_list[counter])
    infoLabel.config(text="Image " + str(counter + 1) + " of " + str(len(image_list)))
# set up the components
imageLabel = Label(root, image=image1)
infoLabel = Label(root, text="Image 1 of 5", font="Helvetica, 20")
button = Button(root, text="Change", width=20, height=2, bg="purple", fg="white", command=ChangeImage)
# display the components
imageLabel.pack()
infoLabel.pack()
button.pack(side="bottom", pady=3)
# run the main loop
root.mainloop()
```
Shorts: Is there a difference between an Event and a Log?
Tags: observability, monitoring, logging
Published: 2023-01-12 15:20:29

This isn't a fully realized assertion, but a series of thoughts on two different things, one of which may be a 'log', another may be an 'event', would love some contributions:
  
* An event is globally significant, a log is locally significant.  Like stack trace vs distributed trace.  Logs are probably only important the for about a week.  Events are searched, logs are tailed.

* Loki manages logs, elasticsearch manages events(or logs and events)

* Logs are node level, events are system level.  Events are a higher abstraction.  Events may be made up of multiple log messages.  A node can exclusively generate its own logs, but may not be able to always generate its own events.  Logs are often looked at in isolation, Events are often looked at in context 

* Alerts are subsets of events, not logs.
	* Later thought -> This is wrong.  An alert is a state machine that is in the wrong state.  An event may indicate a change in state.

* Metrics, logs, traces, events, alerts (MEALT!)

* Single local debug level Loki/Prometheus server

What would be the implications of separating out logs from events?
1. Alerts and events would handled by different systems, with different features.
When you should choose WordPress?
Published: 2023-01-12 15:17:14

[WordPress](https://wordpress.org/) is a popular content management system (CMS) that is often used for developing websites. It is particularly well-suited for creating blogs, portfolios, and sites for small businesses and organizations. Some of the reasons why WordPress is a good choice for developing a website include:

**Ease of use:** WordPress is known for being user-friendly, making it easy for non-technical users to manage and update their own sites.
Flexibility: With a wide variety of themes and plugins available, WordPress can be used to create a wide range of different types of websites.

**Large community:** WordPress has a large and active community of users, which means that there is a wealth of resources available, including tutorials, forums, and support.

**SEO friendly:** WordPress have a lot of [SEO](https://searchengineland.com/guide/what-is-seo)plugins and features out of the box which helps to improve the SEO of your site.

**Scalability:** WordPress can be used for small sites, but it’s also powerful enough to handle large, high-traffic sites.
That being said, it’s not the only option and not always the best fit for all website development projects. It depends on the specific needs of your project. Before you decide to use WordPress, it’s a good idea to consider your project’s goals, budget, and timeline, and make sure that WordPress is the right choice for your needs.

If you have a simple website like a blog or landing page, or you are a small business that needs a website, then WordPress could be an excellent choice. But If your website needs a custom functionality not supported by any plugins or it’s an enterprise-level website that has a lot of visitors and high complexity, then WordPress could be not the best fit.

🚀 For web development content follow me on IG: [Rafi Kadir](https://www.instagram.com/i_am_rafikadir/)

🚀 For inquiry email me now: rafikadir2000@gmail.com
9 Effective ways to be productive as a developer?
Tags: webdev, productivity, career, javascript
Published: 2023-01-12 15:13:52

There are several ways to become more productive as a developer. Here are a few tips that might help:

**Prioritize your tasks:** Create a to-do list and prioritize your tasks based on importance and urgency. This will help you stay focused and ensure that you’re tackling the most important tasks first.

**Minimize distractions:** Eliminate anything that might distract you from your work, such as notifications on your phone or social media.

**Take breaks:** It’s important to take regular breaks to avoid burnout and stay fresh. Take a short walk, stretch, or do something completely unrelated to work.

**Use tools and techniques to improve focus and efficiency:** Try using tools like Pomodoro Technique or Focus Will to help you stay focused and increase your efficiency.

**Learn and master your tools:** The more proficient you are with the tools and technologies you use, the more efficiently you’ll be able to work. Take the time to learn new tools and techniques, as well as to improve your knowledge and skills.

**Keep your work environment organized:** A cluttered work environment can be distracting and make it harder to focus. Make sure your work area is clean and well-organized.

**Communicate effectively:** Good communication with your team members can lead to a better understanding of project goals and progress, and it can help you avoid misunderstandings and delays.

**Automate repetitive tasks:** Automating repetitive tasks can save you a lot of time and effort. Look for ways to use tools like scripts, macros, and task schedulers to automate repetitive tasks.

**Learn to say no:** it’s important to know your limits and say no to requests that will distract you from important work or lead to burnout.

Remember that productivity is not just about working harder or longer, it’s about working smarter and finding ways to be more efficient and effective in your work.
Top programming and tech videos of December 2022.
Tags: tutorial, webdev, programming, gamedev
Published: 2023-01-12 15:01:39

A bit late this month, but here we go. The best tech and programming related YouTube videos of December 2022!

## Game development and math

A gorgeously animated video explaining how splines work and the math behind them.

{% embed https://www.youtube.com/watch?v=jvPPXbo87ds %}

[More game development videos of December](https://wheatcha.com/videos/best/2022-12?tag=30e7b029-1e0b-40c2-9465-0e6c5cf5b991)

## AI

Everyone is talking about that ChatGPT thing. Want to know why? Watch this!

{% embed https://www.youtube.com/watch?v=yIZqIMNvqjg %}

[More AI videos of December](https://wheatcha.com/videos/best/2022-12?tag=c3a317d2-ca7b-4f3b-b369-4023f8bde188)

## Web development

An introduction to SvelteKit 1.0.

{% embed https://www.youtube.com/watch?v=uEJ-Rnm2yOE %}

[More web development videos of November](https://wheatcha.com/videos/best/2022-12?tag=49aa2c6c-acd9-4d0a-81f9-3f666971fa9d)

## Tutorial

From zero to a complete app pog fr fr.

{% embed https://www.youtube.com/watch?v=KjY94sAKLlw %}

[More tutorial videos of November](https://wheatcha.com/videos/best/2022-12?tag=c7fc22c3-2f9b-41bf-81ea-7f71dd6d83c8)

## More?

I'm developing a catalogue of programming and tech videos called [Wheatcha](https://wheatcha.com/). Feel free to come by if you want to find more cool stuff.

## Where is `{my_favourite_youtuber}`???!!!

Did I miss someone? Feel free to let me know in the comments and I'll fix it next month.
Generating TypeScript APIs with OpenAPI Generator and Keeping Attribute Names Unchanged
Tags: beginners, tooling, abotwrotethis
Published: 2023-01-12 14:56:29

To generate the API in TypeScript with the attribute name's first letter not capitalized, you can use the --model-name-prefix option in the openapi-generator-cli command. This will allow you to specify a prefix that will be added to the beginning of all generated model names. For example:

``` zsh
openapi-generator-cli generate -i /path/to/spec.yaml -g typescript-fetch -o /output/directory --model-name-prefix=''
```
This will generate the TypeScript API in the specified output directory, and the attribute names in the generated models will have the first letter not capitalized.
Boost Your Creativity With AI: A Guide to Content Creation Tools
Tags: productivity, ai, tooling, contentcreation
Published: 2023-01-12 14:38:06

AI Tools For Content Creation

There are several AI tools that can help content creators with their work. Some of these tools can help with writing, while others can help with design or even video production.

1. Dream By wambo - High-quality artwork in seconds

2. Durable - build a website using ai 
AI Tools For Content Creation

3. Magic Eraser - erase unwanted things

4. Namelix - Business name generator

5. Lovo - the perfect voice cover

6. Rytr. me - A better 10x faster way to write

7. Jasper - content writing tool

8. Writesonic - AI writer

9. Quillbot - paraphrasing tool

10. Questgen - generate quizzes

11. picso - text to ai art

12. LuciaAI - writing assistant

13. Play. ht - text to voice

14. writerly - content creation 

15. Songtell - song meaning teller

16. Picwish - ai powered photo editing platform

17. Enterpix - photo searching platform

18. Let's Enhance - enhance digital art 

19. Copy ai - copywriter

20. Hypotenuse AI - High-quality content writing tool

21. Big Speak - AI Audio transformation

22. Supreme - text into a meme

23. Erase. bg - Erase background generator 

24. Aipoly - object and color identifier

25. Make8bitart - 8bit art maker

26. AI Gahaku - generate portraits from photos

27. Doodles.bot - turn doodles into art

28. Phrase. it - design amazing social media posts

29. Canva - online design platform

30. Adobe Photoshop - photo editing software

Common Pitfalls to Avoid When Using AI Content Creation ToolWhen using AI content creation tools, there are a few common pitfalls to avoid. First, make sure that the tool you're using is compatible with the type of content you're creating. For example, if you're creating a video, you'll want to make sure the tool you're using can export video files. Secondly, be sure to proofread your content before you publish it. While AI content creation tools can help you create high-quality content, they're not perfect. Finally, be careful not to overuse AI content creation tools. If you use them too much, your content may start to sound robotic or artificial.
How to Implement Full-Text Search in a Text Editor
Tags: java, tutorial
Published: 2023-01-12 14:54:24

Let's continue building our Java based, command-line text editor that we started here @ https://youtu.be/kT4JYQi9w4w .

[This is Part 4](https://youtu.be/RDFogWPnkOM) and we will cover: 

* How to implement full-text search
* including instant search and
* being able to search forwards and backwards!

You're going to be in for a ride!

{% embed https://youtu.be/RDFogWPnkOM %}
Make a Clicking App in Tkinter and Python
Tags: tkinter, python, pythongui, beginners
Published: 2023-01-12 14:36:02

HI Lets make a simple Clicking App using Python and Tkinter. I am starting to learn more about Python and the more I learn the more interesting its becoming. To start I want to follow the same way I have learned all the .Net programs I have done before and I want to make small tutorials which will help others learn the same way I have. So here is the small Clicking app I have made using tkinter and Python. I have done a video tutorial of this on youtube if you want to check it out there. 

YouTube Video Tutorial - 
{% youtube vvZ3yiEMjDg %}

Source Code is here - 

```
from tkinter import *
 
root = Tk()
root.geometry("300x300")
root.title("MOO ICT Button Clicker")
 
number = 0
 
def ClickButton():
    global number
    number += 1
    ShowInfo["text"] = "You Clicked " + str(number) + " times."
 
ClickingButton = Button(root,text="Click Me!", padx=50, pady=50, bg="gold", font=("Arial, 22"), command=ClickButton)
ShowInfo = Label(root, text="message", font=("Arial, 20"), fg="purple", pady=20)
 
ClickingButton.pack()
ShowInfo.pack()
 
root.mainloop()
```
HashiCorp Vault
Published: 2023-01-12 14:33:10

There are many reasons why you might want to use Hashicorp Vault. It is a great tool for managing secrets, and can help you keep your infrastructure secure. Here are just a few reasons why you should consider using Vault:

1. Vault can help you manage secrets more securely.

If you are looking for a tool to help you manage secrets more securely, then Vault is a great option. It can help you encrypt and store secrets, and also provides a number of other security features.

2. Vault can help you automate secret management.

If you are looking for a tool to help you automate secret management, then Vault is a great option. It can help you generate and rotate secrets, and also provides a number of other automation features.

3. Vault can help you meet compliance requirements.

If you need to meet compliance requirements, then Vault is a great option. It can help you generate reports on secret usage, and also provides a number of other compliance-related features.