teleren/devto huggingface dataset:
Hello Friends!
Tags: webdev, beginners, productivity, hello
Published: 2024-06-05 14:20:42

**

## Hello coders, developers, and all amazing people!
**

- First of all, I am a marketer (please don't kick me out, yet) and not a coder by profession or by birth :)
- I recently started working on my WordPress website and it is FUN and HARD! I know I should hire someone but my job doesn't pay me that much yet :(
- So now that I know how hard you folks work, RESPECT 🫡

I am here to ask questions. I am here to learn. And as I go on this development adventure, I am here to just have a conversation. 

All tips, and hacks (except about asking me to quit) are welcome.
Mermaid preview using xwidget browser
Tags: emacs, mermaidjs
Published: 2024-06-07 06:38:45

---
title: Mermaid preview using xwidget browser
published: true
date: 2024-06-05 14:19:05 UTC
tags: emacs,mermaidjs
canonical_url: https://erick.navarro.io/blog/mermaid-preview-using-xwidget-browser/
---

[Mermaid.js](https://mermaid.js.org) is a great tool to make diagrams in plain text, I use it a lot and I wanted to have a way to see previews of the code I was writing.
There are some options to do that but they require to have a [mermaid-cli](https://github.com/mermaid-js/mermaid-cli) installed, which requires `nodejs` as well.

Emacs has a built-in webkit browser, in case it was compiled with `--with-xwidgets` flag, and mermaid run on js so it should be possible to just run the code I want in the browser and see it there.

This function makes the magic, it just take a region previously selected, which have the mermaid code, create a temp file and write some `HTML` there(including our mermaid code).

```emacs-lisp
(defun my/preview-mermaid ()
  "Render region inside a webit embebed browser."
  (interactive)
  (unless (region-active-p)
    (user-error "Select a region first"))
  (let* ((path (concat (make-temp-file (temporary-file-directory)) ".html"))
         (mermaid-code (buffer-substring-no-properties (region-beginning) (region-end))))
    (save-excursion
      (with-temp-buffer
        (insert "<body>
  <pre class=\"mermaid\">")
        (insert mermaid-code)
        ;; js script copied from mermaid documentation
        (insert "</pre>
  <script type=\"module\">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
</body>")
        (write-file path)))
    (xwidget-webkit-browse-url (format "file://%s" path))))
```

# Demo

![img](https://erick.navarro.io/images/blog/mermaid-preview-using-xwidget-browser/mermaid-preview.gif)
Back to the basic - Have you mastered all the Google search techniques?
Published: 2024-06-05 14:18:34

Improve search, the skill you use everyday by reviewing advanced search techniques in below link (and of course, many other guides on the Internet):

https://www.pcmag.com/how-to/google-search-tips-youll-want-to-learn

![21 Google Search Tips You'll Want to Learn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqxwx878encpwp3j6fe9.png)
Insta Pro
Published: 2024-06-05 14:09:02

Insta Pro is 100% safe and secure.<a href="https://instapromanager.com/">Insta Pro</a>is verified through multiple malwareand virus protection platforms like TotalAV, Norton 360 Antivirus, Bitdefender Antivirus Plus,Surfshark Antivirus, and Malwarebytes.If you are still worrying about the safety feel free to cross-check.Every update you will get from Instapro will be safe and you can enjoy Instapro without any worry.
Nullable value Types | C#
Tags: dotnet, csharp, nullable, uzbek
Published: 2024-06-05 14:07:44

**Bugun biza o'rganishimiz shart bo'lgan narsalar quyidagicha 👇**
- _Declaretion va Assigment_
- _Null bo'ladigan misollar qiymatlarini tekshirish_ 
- _Null qiymatni primative typega o'tqazish _
- _Vahokazolar_

**Null bu Value type**! Odatda null qiymat biriktirish uchun asosan 1 ta belgidan foydalaniladi. Bu `?` belgisi. Biz ko'pincha ishlatadigan Ma'lumot turlari o'z o'zidan null qiymat olishi mumkin emas. **Misol uchun**: `bool?` >> `True`, `False`, `Null`. Har qanday Null qiymat `System.Nullable<T>` Structurasiga tegishlidir. 
Quyidagi almashtirilgan shakllardan birida `T` asosiy turga ega null qiymat turiga murojaat qilishingiz mumkin. Asosiy malumot turining aniqlanmagan qiymatini ko'rsatish uchun `null` dan foydalanish kerak.

**Declaretion & Assigment**

**Declaretion** - bu C# dasturlash tilida o'zgaruvchi e'lon qilib, unga qiymat berish. **Assigment** esa xuddi shu qiymat berish jarayonidagi `=` belgisi!
Practice
```
double? pi = 3.14;
char? letter = 'A';

int? son = 10; 
int? son2 = son;

bool? test = null;

// Ushbu ko'rsatilgan array Value type va Uning qiymati Null

int?[] sonlar = new int?[10];
```

**Null bo'lishi mumkin bo'lgan misol tekshiramiz!**

```
int? a = 43; 
if (a is int valueOfA)
{
    Console.WriteLine($"a is {valueOfA}");
}
else
{
    Console.WriteLine("a does not have a value");
}
// Output:
// a is 42
```



Davomi bor...
Fetch images and Display Flex
Published: 2024-06-05 14:07:13

```CSS
.App {
  font-family: sans-serif;
  text-align: center;
}

.image-container {
  display: flex;
}

.image-box {
  width: 30px;
  height: 30px;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
}
```

```JS
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
```

```JS
import React, { useState } from "react";
import { useEffect } from "react";
import "./styles.css";

const App = () => {
  const URL = `https://jsonplaceholder.typicode.com/photos`;
  const [imageList, setImageList] = useState([]);
  useEffect(() => {
    fetch(URL)
      .then((res) => {
        // console.log(res);
        return res.json();
      })
      .then((data) => {
        console.log(data);
        setImageList(data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  return (
    <div className="image-container">
      {imageList.map((image) => {
        return (
          <div key={image.id}>
            {/* <div>{image.title}</div> */}
            <img className="image-box" src={image.url}></img>
          </div>
        );
      })}
    </div>
  );
};

export default App;

```
Thrive as a Junior Engineer: Embrace Deliberate Progress
Tags: webdev, beginners, javascript, devops
Published: 2024-06-05 13:46:40

In the fast-paced world of software engineering, the pressure to deliver results quickly can be overwhelming, especially for junior engineers. However, the key to long-term growth and success may lie in taking a more deliberate approach. The idea of "working slower to grow faster" is about focusing on understanding and quality, rather than speed.

Understanding the Importance of Deliberate Progress

As a junior engineer, it’s easy to get caught up in the race to deliver features rapidly. While quick results can be satisfying in the short term, they often come at the expense of deeper understanding and long-term growth. By slowing down and taking the time to fully understand the problems you're solving, you build a stronger foundation for your future work.

Key Strategies for Deliberate Progress

Deep Learning: Take the time to thoroughly understand the technologies and concepts you're working with.
Don’t just skim through documentation or tutorials – delve deeply and ask questions.

Quality Over Quantity: Focus on writing clean, maintainable code. Prioritize quality in your work to avoid technical debt and future rework.

Seek Feedback: Regularly ask for feedback from more experienced colleagues. Constructive criticism can highlight areas for improvement and help you grow faster.

Reflect and Iterate: After completing tasks, reflect on what you learned and how you can improve. Iterative learning is key to becoming a proficient engineer.

Balance Speed with Thoughtfulness: While meeting deadlines is important, balancing speed with a thoughtful approach ensures sustainable progress and prevents burnout.


Benefits of a Deliberate Approach

Stronger Foundation: By thoroughly understanding concepts, you create a solid foundation for tackling more complex problems in the future.
Better Problem-Solving Skills: Taking the time to deeply understand issues enhances your problem-solving abilities.
Higher Quality Work: Focusing on quality reduces the likelihood of bugs and technical debt, leading to more reliable and maintainable code.
Sustainable Growth: A deliberate pace helps prevent burnout and promotes steady, continuous improvement.

Conclusion
As a junior engineer, adopting a deliberate approach to your work can set you apart. By focusing on deep learning, quality, and reflection, you lay the groundwork for rapid growth in your career. Remember, sometimes you need to slow down to ultimately move faster.
Roadmap Backend Tahun 2024
Tags: webdev, javascript, beginners, backenddevelopment
Published: 2024-06-05 13:46:01

Gimana menurut kalian? ada yg kurang gak hehe😁
src: @code.clash

Yuk belajar bareng serta diskusi dikolom komentar, serta di save biar ga lupa💬😝

📬DM for Business
🌱Follow : @appardana🎍
💭Stay Young, Be Innovative and Keep Learning

#coding #programmer #code #Content #Tips #Trick #Knwoledge #Management #CSS #React #ReactJS #Frontend #JustifyContent #Javascript #Phyton #C #Web #Skills #IT #Backend #Developer #Roadmap #SelfImprovement #Growth #Aditria #Pardana #AditriaPardana #appardana #iAppTech ⚛️


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

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

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

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

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhoxgexrwrh8n1n5qsnp.png)
🚀 Exciting News for React Native Developers! 🚀
Published: 2024-06-05 13:42:14




 <img width="100%" style="width:100%" src=https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExOXJyazd2N2F4emdkY2E3NHlobzBpYTV4cW9yaHF1aHVxem5nODNtNCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/CKOCV8dKimlmmS41kE/giphy.gif>

Recently i have discovered the "React Native IDE" extension for Visual Studio Code by Software Mansion! If you're working with React Native, this extension is a game-changer. Right now this extension is a beta version and only available for MacOs. Here are some of the incredible features that make it a must-have:

![ide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6726txkcmuimrq5y1rn.png)

🔧 Integrated Experience : Enjoy a seamless development experience with all the tools you need right within VS Code. No more switching between multiple applications!

🔍 Click to Inspect : Debugging has never been easier. Simply click to inspect elements and see the properties and styles applied to them.

⛔ Use Breakpoints Right in VS Code : Set breakpoints and debug your React Native applications directly in VS Code. Step through your code and fix issues faster than ever.

🧭 Navigation Made Easier : Jump to definitions, references, and related files with ease. Spend less time searching and more time coding.

🔎 Search Through the Logs Easily : Quickly search and filter through logs to find the information you need. No more scrolling through endless console outputs!

🧩 Develop Components in Isolation : Work on individual components in isolation to ensure they work perfectly before integrating them into your main project.

📱 Adjust Device Settings on the Fly : Change device settings and configurations on the fly without leaving your development environment. [Test your app under different conditions effortlessly](https://ide.swmansion.com/#:~:text=What%20is%20React%20Native%20IDE,Native%20IDE%20only%20supports%20macOS.).

Happy Coding 🙌
Diamante Net Hackathon 2024
Tags: hackathon, coders, developers, blockchain
Published: 2024-06-05 13:40:16

Welcome to the **Diamante Net Hackathon 2024!** Join us as we unlock new possibilities in blockchain technology and foster innovation across multiple sectors. Whether you're a developer, or blockchain enthusiast, this is your platform to showcase your skills, connect with industry leaders, and transform your ideas into reality.

Click here to apply: https://diamante-net-hackathon.devfolio.co/


![The attached image is a promotional banner for the "Diamante Net Hackathon 2024," organized by Diamante Blockchain. The event is scheduled to take place from June 17 to July 19, with a prize pool exceeding $100,000. The registration deadline is June 15. The banner features a visually appealing design with a dark background and vibrant purple accents, highlighting key details such as the event dates, prize pool, and registration closing date. The image also includes logos of Diamante Blockchain and its associated platforms, indicating a strong community and ecosystem. A "Apply Here" button encourages users to register for the hackathon.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4lgfl0iugdkeqrkyvd2.jpg)
The Perfect Guide on Recovering your USDC, USDT by CybergoatTechie!
Published: 2024-06-05 13:35:21

I'd really urge anybody who needs help with recovery to reach [thecybergoat techie](https://cybergoattechie.com/) as they're one of the most talent group you'll come across on the internet!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oczjc9ptct332o8q8prk.jpeg)
"Unlock Success: Digital Marketing Consultant in Pune"
Tags: swapnilmajgaonkar, consultant, digitalmarketing
Published: 2024-06-05 13:35:09

Are you a business owner in Pune striving to make a mark in the digital world? Look no further! In today's competitive landscape, having a robust online presence is crucial for business growth. That's where a [Digital Marketing Consultant in Pune ](https://www.swapnilmajgaonkar.in/
)steps in to unlock your success.

What exactly does a Digital Marketing Consultant do? Think of them as your personal guide through the digital maze. They understand the ins and outs of online marketing and help businesses like yours navigate the complexities to achieve their goals.

In Pune, where innovation thrives and entrepreneurship flourishes, standing out in the digital realm can be challenging. But with the expertise of a Digital Marketing Consultant, you can transform your online presence and unlock new opportunities for success.

From search engine optimization (SEO) to social media marketing and everything in between, a Digital Marketing Consultant offers a wide range of services tailored to suit your business needs. They work closely with you to understand your objectives, identify areas for improvement, and develop strategies that deliver results.

Imagine your website ranking higher on search engine results pages (SERPs), attracting more organic traffic and potential customers. Picture your social media profiles engaging with your audience, building brand loyalty, and driving conversions. With the help of a [Digital Marketing Consultant in Pune](https://www.swapnilmajgaonkar.in/), these dreams can become a reality.
But it's not just about implementing strategies – it's about understanding your unique business challenges and finding solutions that work for you. That's where the human touch comes in.

 A Digital Marketing Consultant takes the time to listen to your concerns, answer your questions, and provide personalized recommendations that align with your goals.

So why wait? If you're ready to unlock success for your Pune business, it's time to partner with a Digital Marketing Consultant. Let them be your trusted advisor on the journey to digital greatness.
Rusty RAG Quiz Creator
Tags: llm, rust, rag
Published: 2024-06-05 13:32:16

I wanted to get started with Rust after being a Scala developer for several years. I have little to no experience with bare metal languages after working with Java, Python and Javascript, so thought it would help solidify my understanding of how languages work under the hood, something I've not touched on since I did my Computer Science bachelors in 2015.

I'm taking a somewhat messy and unconventional approach, in that I've devised a project that touches on several areas I'm interested in, and I'm going to hammer at it with the help of LLMs like chatGPT and Groq, which will pump out code until a snag is hit which is sufficiently complex enough to warrant learning the material in depth.

The project is a "quiz creator", which will take exported chat history from one's interactions with chatGPT, can identify where questions have been asked, and take both question and answers to create quizzes from as a revision aid. Because, who else forgets information quickly when there's a lack of prompts to recall it?

The interesting areas the project shall touch on are Large Language Models (LLMs) for identifying a question along with it's context, Agentic Systems ([see introduction here](https://www-marktechpost-com.cdn.ampproject.org/v/s/www.marktechpost.com/2024/05/29/what-are-ai-agents-how-do-you-make-one-understand-the-basics/?amp=&amp_gsa=1&amp_js_v=a9&usqp=mq331AQGsAEggAID#amp_tf=From%20%251%24s&aoh=17170931005165&csi=0&referrer=https%3A%2F%2Fwww.google.com&ampshare=https%3A%2F%2Fwww.marktechpost.com%2F2024%2F05%2F29%2Fwhat-are-ai-agents-how-do-you-make-one-understand-the-basics%2F)) for delegating another LLM to generate the quizzes in preconfigured ways, and Retrieval Augmented Generation architecture (RAG - [see here for more](https://www.qwak.com/post/utilizing-llms-with-embedding-stores)) to store the conversations in a vector database for greater semantic search capabilities.

To make sure I cover the full stack I'm going to be using Tokio for async I/O processing, LLM library for grabbing models, Docker to containerize my application, Github Actions along with Terraform and Ansible to set up CI/CD pipelines so that pull requests with the main/master branch automate the delivery of the service to the cloud.

Code can be found here for the [Rust API](https://github.com/Kieran-Sears/RAG-API).

And here for the [Terraform / Ansible Infrastructure](https://github.com/Kieran-Sears/RAG-INFRA).

I'll be posting my trials and tribulations on here as I go, more a collection of thoughts and reflections as opposed to a detailed guide for others to follow, but that said it may well still be of use to read!
Are Custom Cotton Bags Versatile And Eco-Friendly?
Tags: customcottonbags
Published: 2024-06-05 13:31:06




Rapidly increasing awareness and sustainability impact the environment. Hence, the demand for cotton drawstring pouches is increasing rapidly in today's time. You can use these pouches in many ways as they are versatile. People are more attracted towards versatile things, so this pouch can be the best choice for all of you.

Yes, absolutely; **[cotton jewellery pouches](url)** are eco-friendly as they are made from 100% cotton fabric, and cotton has a good impact on the environment. The drawstring pouches offered by Tulinii are made from cotton fabric and are versatile to use. You can use these bags to store your precious jewellery, package wedding gifts, and promote your business. Today's blog can be very beneficial for you because we will introduce you to the versatility and friendliness of custom asks here.

**Eco Friendliness**: The pouches offered by Tulinii are Eco Friendly; let's know some factors about it –

•	Cotton is a renewable and natural resource, and the bags we offer are made from cotton, which is a sustainable option for you.
•	Cotton pouches do not last long and decompose quickly, hence reducing environmental impact and pollution.
•	Cotton bags are eco-friendly as well as durable; hence, they can be used again and again. They are long-lasting, so you can store your jewellery for a long time.
•	Cotton bags are durable and customizable; hence, the demand for plastic bags is decreasing.
 
**Versatility**: Yes, the personalized wedding favour bags we offer are versatile. Let’s find out more about them –
•	You can use these bags to organize, store and keep your essential jewellery. We have bags available in many varieties, including shape, design, size, and colour. You can purchase bags according to your preference and choice.
•	These pouches are best for gifting jewellery at weddings, functions, or any special occasion. You can use them as packaging as they provide luxurious packaging.
•	You can customize pouches with your company and brand logo and use them for brand promotion. This will help identify and promote both your product and your brand.
•	[**Drawstring cotton bags**](**url**) are mostly used in Ayurveda and cosmetic stores, and you can also keep herbals or cosmetics in them.
"Frontend Challenge"
Tags: webdev, frontend, devops, news
Published: 2024-06-05 13:26:40

The world of frontend development is ever-evolving, presenting new and exciting challenges to developers every day. Whether you're a seasoned professional or a novice eager to learn, a "Frontend Challenge" is an excellent way to hone your skills and stay ahead of the curve in this dynamic field.

Understanding the Frontend Challenge

Frontend development involves creating the user interface and experience for websites and applications. This encompasses everything from designing the layout, ensuring responsiveness across devices, to optimizing performance. The "Frontend Challenge" is essentially a series of tasks or projects designed to test and improve your capabilities in these areas.

Key Components of a Frontend Challenge

Responsive Design: Ensuring that the website looks and functions well on all devices, from desktops to smartphones.

Performance Optimization: Techniques to enhance loading speeds and ensure smooth interactions.

Cross-Browser Compatibility: Making sure the website works seamlessly across different browsers.

Accessibility: Ensuring that the site is usable by people with various disabilities.

Advanced JavaScript: Implementing complex functionalities using JavaScript frameworks and libraries like React, Angular, or Vue.js.

CSS Preprocessing: Utilizing tools like Sass or Less to write cleaner and more maintainable CSS.

Version Control: Managing and collaborating on code using systems like Git.


Benefits of Participating in a Frontend Challenge

- Skill Enhancement: Sharpen your existing skills and learn new ones.
- Portfolio Building: Create projects that you can showcase to potential employers.
- Community Engagement: Connect with other developers, share knowledge, and receive feedback.
- Problem-Solving: Develop better problem-solving skills by tackling real-world issues.

Popular Frontend Challenges

- FreeCodeCamp: Offers a variety of projects and challenges to help you learn and practice.
- Frontend Mentor: Provides real-world projects that you can work on and get feedback.
- CSS Battle: A fun way to improve your CSS skills by trying to replicate designs as closely as possible.

Regularly engaging in these challenges will keep your skills sharp and make you a more versatile and proficient frontend developer.