teleren/devto huggingface dataset:
TW Elements - Dark Mode. Free UI/UX design course
Tags: beginners, webdev, ux, uxdesign
Published: 2024-02-19 17:00:00

**Dark mode**

_Psst! On [TWE website](https://tw-elements.com) you can press shift + D to toggle dark/light mode._

For some time now, dark mode has ceased to be just a fashionable novelty, and has become a mandatory functionality of good design.

Thanks to Tailwind, the implementation of dark mode in our project is child's play.

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

All we have to do is, as with Hover or other states, use the appropriate modifier and then specify the condition.

The modifier for dark mode is keyword dark; HTML:

```
<div class="bg-white dark:bg-neutral-700">[...]</div>
```
So if we want our standard, light card with dark text to have a dark mode variant, we need to define the condition that when dark mode is turned on, the background of the card changes to dark (dark:bg-neutral-700) and the text of the card to light (dark:text-neutral-50).

```
<div class="block rounded-lg bg-white p-6 shadow-md dark:bg-neutral-700">
  <h5
    class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
    Light mode
  </h5>
  <p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
    Dark mode reduces eye strain in low-light conditions, saves energy on
    OLED screens, and offers a visually refreshing aesthetic.
  </p>
</div>
```

**System preferences**

Dark mode in Tailwind supports (in most cases) the preferences of your operating system.

This means that Tailwind can detect whether you are using a dark or light theme on your computer and adapt to it.

Therefore, depending on whether you used dark mode or light mode on your computer, our site should be displayed in your preferred mode from the beginning.

That's just yet another cool feature of Tailwind CSS 😉

**Dark mode in the Navbar**

Take another look at the Navbar in our project.

All the components of TW Elements support dark mode by default. So if you press shift + D on this website, you will notice that also the Navbar below switches the mode.

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

If you look at Navbar's code, you'll notice the dark: modifier in many places. Now you know how it works.

```
<!-- Navbar -->
<nav
  class="flex-no-wrap relative flex w-full items-center justify-between bg-white py-2 shadow-md shadow-black/5 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-4"
  data-te-navbar-ref>
  [...]
</nav>
<!-- Navbar -->
```

**[Demo and source code for this lesson](https://tw-elements.com/snippets/tailwind/ascensus/5284786)**
Portfolio website - Devlog #2
Tags: webdev, react, frontend, beginners
Published: 2024-02-19 16:51:07

Back after a day's break. 
Inspired by a Navbar seen on YT [here](https://www.youtube.com/watch?v=HbBMp6yUXO0&t=2268s)

The first section is done, it is responsive in an OK way and styling is almost done
For a Responsive Navbar > Used @media in CSS and click listeners in JS in Navbar Component, which on a desktop is centred, but on mobile will show a hamburger icon and when clicked will reveal the navbar as a side panel.

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


Navbar in mobile
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jpj1zy4g9oozwxg8ecb.png)

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

Things to work on:
1. Design and Code the Next sections:
a) Expertise
b) Work / Projects
c) Contact me page...

Planning to return Work / Projects section dynamically from backend Springboot server.
Also maybe do a little form handling with the above server in the Contact me page.
Would like to integrate my other unfinished project - Bible Memorization webapp and deploy it, to make it easier for me quiz myself on verses on the fly.
مزایای طراحی سایت با asp.net core
Tags: aspnet, aspdotnet, webdev, iran
Published: 2024-02-19 16:50:13

مزایای طراحی سایت با ASP.NET Core
ASP.NET Core یک فریم‌ورک متن‌باز و چند سکویی برای توسعه برنامه‌های وب مدرن است که توسط مایکروسافت ارائه شده است. این فریم‌ورک مزایای متعددی را برای طراحی سایت ارائه می‌دهد، از جمله:

عملکرد بالا: ASP.NET Core به گونه‌ای طراحی شده است که از نظر عملکرد بسیار کارآمد باشد. این فریم‌ورک از .NET Core استفاده می‌کند که یک پلتفرم متن‌باز و چند سکویی با عملکرد بالا است.

قابلیت توسعه: ASP.NET Core یک فریم‌ورک بسیار انعطاف‌پذیر و قابل توسعه است. این فریم‌ورک از معماری ماژولار استفاده می‌کند که به شما امکان می‌دهد برنامه‌های خود را به راحتی توسعه دهید و نگهداری کنید.

پشتیبانی از چند سکویی: ASP.NET Core می‌تواند برای توسعه برنامه‌های وب برای ویندوز، macOS و لینوکس استفاده شود. این فریم‌ورک از .NET Core استفاده می‌کند که یک پلتفرم چند سکویی است.

متن‌باز: ASP.NET Core یک فریم‌ورک متن‌باز است. این به این معنی است که کد منبع فریم‌ورک به صورت عمومی در دسترس است و هر کسی می‌تواند به آن کمک کند.

جامعه بزرگ: ASP.NET Core دارای یک جامعه بزرگ و فعال از توسعه‌دهندگان است. این به این معنی است که شما می‌توانید به راحتی به کمک و پشتیبانی از جامعه دسترسی داشته باشید.

امنیت: ASP.NET Core یک فریم‌ورک امن است. این فریم‌ورک از ویژگی‌های امنیتی متعددی مانند احراز هویت و مجوز استفاده می‌کند.

ابزارهای قدرتمند: ASP.NET Core دارای مجموعه ابزارهای قدرتمندی برای توسعه برنامه‌های وب است. این ابزارها شامل Visual Studio، Visual Studio Code و .NET CLI هستند.

یادگیری آسان: [اموزش asp.net core](https://elecomco.com/product/dotnet-core-expert/) برای یادگیری آسان است. این فریم‌ورک از #C استفاده می‌کند که یک زبان برنامه‌نویسی محبوب و آسان برای یادگیری است.

طرفداران زیاد: افرادی که کار [سفارش طراحی سایت](https://digitalii.ir/web-design/) انجام می دهند خیلی زیاد هستند و هر کسی می تواند از ایتن راه درامد خوبی داشته باشد. 

همچنین بخوانید: [المان های شهری](https://www.idehrastak.com/what-is-an-urban-element/) چه کاربردی در شهرها دارند؟
Photogram GUI (graphical user interface)
Published: 2024-02-19 16:34:47

###**Difference in `redirect_to` in contrast to `render`**

- `render()` is only very beneficial in terms of when you are using it to display one piece of information per page. this means that everything in your action of your controller is really all the information that you need for the page. 

- in contrast to `redirect_to()`, this specific type of page rendering allows you to sort of `push` all the information you acquired in within your action and allow it to be placed into another page, with other info from other actions. This helps in very dynamic and info packed pages where you want multiple different sections doing different things but don't want it to all be in one controller. for example, when you are editing and adding new photos to a users page, but also want to display and post comments on the photos. You would have those 3 different actions, all redirecting to the same page. 
 
###**Understanding what `.where` returns**

when searching for a specific user within an action, you need to search within all the Users model, and then pick that id. ``` 
def show
    username = params.fetch("username")
    matching_users = User.where({ :username => username })
    @user = matching_users.at(0)

    render({ :template => "user_templates/user_details"})
  end 
```
the specific line to note here is `@user = matching_users.at(0)`this is because we are returned a hash, and need to select the first position of for the specific user we want.
Sallet Al Sayad Seafood Restaurant
Tags: chef
Published: 2024-02-19 16:21:12

Craving for a seafood feast? Dive into the ocean of flavors at [Sallet Al Sayad](https://salletalsayad.com/), the best seafood restaurant in Dubai, serving the city’s most succulent and delectable seafood dishes since 2008. Embark on an unforgettable culinary journey, captivated by the allure of fresh, premium seafood masterfully infused with authentic Arabian flavors. Our unwavering dedication to quality and the freshest ingredients sets the stage for a dining experience that’s nothing short of extraordinary. Elevate your taste buds and discover why we’re the seafood sensation that’s capturing the town’s imagination. Don’t just take our word for it—come savor the extraordinary experience at the best sea food restaurant in Dubai!!
Quick Guide to Leveraging Read the Docs for Your GitHub Projects
Tags: readthedocs, github, documentation, opensource
Published: 2024-02-19 16:18:59

Hey there! If you're knee-deep in the world of open-source or managing projects on GitHub, you've likely sought ways to streamline your documentation process. Let's dive into something that might just be the missing puzzle piece in your workflow: Read the Docs. This quick guide is your "2-minute primer" on why and how to integrate Read the Docs with your GitHub repositories.

## Why Read the Docs?

Read the Docs is a free documentation hosting platform that magically simplifies the life of developers. Here's why it's a game-changer:

- **Automatic Documentation Building**: Push your docs, sit back, and watch them build automatically.
- **Version Control Made Easy**: Maintain documentation for different versions of your project without breaking a sweat.
- **Seamless GitHub Integration**: Linking your GitHub project to Read the Docs takes mere moments.
- **Focus on Writing**: Spend more time on improving your project and less on managing documentation infrastructure.

## Setting Up Read the Docs with GitHub

### Step 1: Sign Up and Connect

First things first, sign up on [Read the Docs](https://readthedocs.org/) and connect your GitHub account. This allows Read the Docs to access your repositories.

### Step 2: Import Your Project

Once connected, you can import your project into Read the Docs. Choose the repository you want to document, and Read the Docs will do the rest, setting up a documentation site based on your repo's contents.

### Step 3: Configure Your Docs

If you're using Sphinx or MkDocs, ensure your configuration file (`readthedocs.yml`) is set up in your repository. This file controls how Read the Docs builds your documentation.

### Step 4: Enjoy Your Docs

After pushing your documentation to your GitHub repo, Read the Docs will automatically update your documentation site. It's that simple!

## Tips for Effective Documentation

- **Keep It Updated**: Regularly update your documentation to reflect changes in your project.
- **Engage Your Community**: Encourage contributions by making your documentation open for feedback and improvements.
- **Use Markdown**: Markdown is simple, and Read the Docs supports it beautifully, making your docs easy to write and maintain.

## Conclusion

Integrating Read the Docs with your GitHub projects not only streamlines your workflow but also ensures your documentation is always up-to-date and accessible. It's a small step that can make a big difference in how you manage your project's documentation and engage with your community. So why not give it a try and see how it transforms your project documentation experience?

Remember, great documentation is the hallmark of a great project. With Read the Docs and GitHub, you're well on your way to achieving that. Happy documenting!
Antipattern: We'll buy it when we come back
Tags: startup, antipatterns, development, opinion
Published: 2024-02-19 16:06:51

A fun comparison between a common behavior and a persistent negative reality in the startup development environment!

https://www.innervision.dev/2024-02-09/antipattern-we-ll-buy-it-when-we-come-back

Portuguese [pt-BR] version: https://www.innervision.dev/pt/2024-02-09/antipattern-na-volta-a-gente-compra
Cyber Asset Recovery helped me recovered my lost cryptocurrency fortune
Published: 2024-02-19 16:06:20

Wholeheartedly I decided to let the world know about what I had past through in The hands of scammers investing into cryptocurrency with a wrong crypto platform which took my funds away from me which turned my life upside down in shambles which I don't wish for anybody out there to ever experience and how I really got back my $400,000 which I really couldn't believe it when Cyber Asset Recovery sent me an email requesting I send my wallet that my funds had been retrieved back from the fake crypto company I invested with which is a decision I took that really thought me lessons of life leaving a scare on me which I will never forget in a hurry. Cyber Asset Recovery are a recommendable crypto recovery firm which their organizational operations are top-notch owing to the remarkable results they have achieved over the years, their forensic expertise and their knowledge of the crypto landscape puts them in good steed for the recovery job which was pivotal in the retrieval of my lost investment funds. I wish any victim of scam who happens to come across this my testimony to hurry and give them a shot at working on their case because they are the real deal when it comes to the recovery of lost cryptocurrency funds, Cyber Asset Recovery were truly amazing and trustworthy hacking firm which puts their clients first which was evident in their operation showing their will to fight for their customers which is unparalleled. Hurry and let them know you need their assistance with their recovery services in retrieving back your lost investment funds. 

Email:  Cyberassetrecovery(@)protonmail.com 

Telegram: @CyberAssetRecovery

Website:  cyberassetrecovery.pro/
Magic is no longer Open Source
Tags: lowcode, productivity, opensource, ai
Published: 2024-02-19 15:42:42

Starting from today Magic's [open source GitHub repository](https://github.com/polterguy/magic) will no longer be actively maintained. Due to recent events, we've unfortunately been forced to exclusively continuing maintenance of Magic Cloud as a close source project.

Magic Cloud has roughly 10 million downloads from NuGet, and unfortunately zero of our users have contributed to the project - Neither with code nor with monetary means. To put that number into perspective realise that 10 million downloads is 20 times as much as [SupaBase](https://supabase.com/). SupaBase is evaluated at 1 billion dollars.

In addition Magic Cloud has now become a real business model, with a quite substantial amount of revenue, through our [AI and Low-Code hosting provider](https://ainiro.io/). So to avoid having leeches exploiting our work for free without contributing in any ways, it's therefor with heavy heart we announce that all future releases of Magic will be in the form of closed source distributions.

## Professional license

However, the good news is that we will be selling professional licenses. These comes in two categories.

* Single Server License $5,000 per month
* Kubernetes Cluster License at $20,000 per month

A single server license allows you to install Magic Cloud on one single server. A Kubernetes Cluster License allows you to install Magic Cloud in one Kubernetes cluster. Both versions comes with support and setup help, and we provide. Docker images, [extensive documentation](https://docs.ainiro.io/), etc.

Both of the above plans also comes with all source code for usage within one single legal entity (one company).

If the above is too expensive, you can of course just [purchase a cloudlet](https://ainiro.io), which at the time of this writing has a starting cost of $300 per month.
What are your goals for week 8 of 2024?
Tags: discuss, motivation
Published: 2024-02-19 15:06:00

It's week 8 of 2024. 

## What are your goals for this week? 

- What are you building? 
- What will be a good result by week's end?
- What events are happening this week? 
  * any suggestions for in person or virtual events?
- Any special goals for the quarter?


### Last Week's Goals
 

- [:white_check_mark:] Continue Job Search. Applied for many roles.
- Project work [:white_check_mark:] Content update.
- [:white_check_mark:] Blog Played with CSS.  
- Events 
   * [:white_check_mark:] Thursday Virtual Coffee (VC).
- [:white_check_mark:] Run a weekly motivational Virtual Coffee (VC) Slack thread similar to this post.
- [:white_check_mark:] The Bad Batch Season 3 starts on Feb 21. I'm rewatching season 2 before it starts. * Two to go but I waiting till the right before the season starts for those.


{% embed https://dev.to/jarvisscript/valentine-colored-hearts-3ng9 %}

 
### This Week's Goals

It's Presidents Day which just means schools, banks, and government offices are closed. 

- Continue Job Search. 
- Project work 
   * research some content.
- Blog 
- Events 
  * Axe-Con is Tues-Thursday, with a pre-con session Monday.
  * Thursday Virtual Coffee (overlap with Axe-Con. Still need to read the sessions.)
  * Dallas Software User Group (Virtual) Night of Java.
- Run a weekly motivational Virtual Coffee (VC) Slack thread similar to this post.
- Vote we have local elections for some city offices. Need to do early voting.



### Your Goals for the week 

Your turn what do you plan to do this week? 

- What are you building? 
- What will be a good result by week's end?
- What events are happening any week? 
  * in person or virtual?


```html
-$JarvisScript git push
```
Top 4 Programming Languages for Game Development in 2024
Tags: webdev, gamedev, programming
Published: 2024-02-19 15:25:35

What programming language would you choose for your game development project? Despite the plenty of options, businesses prefer the good old stack based on C++, Java, Python, and JavaScript. Read [our latest article](https://devler.io/blog/top-4-programming-languages-for-game-development-in-2024) to explore why they are still relevant in 2024.

And don't forget to share your thoughts on whether there are other programming languages you would add to the list.
ServiceNow KB #1
Tags: servicenow, programming, webdev, javascript
Published: 2024-02-19 15:23:58

Greetings, my fellow code warriors. I have been a DevOps engineer for little over 2 years. 
Oneday my manager came to and said there is a POC (Proof of Concept) requirement for one of our customers. We need to develop some features in his ServiceNow environment. I was wondering what the heck is ServiceNow? 
I did my homework and get to know little bit about the platform. It is a SaaS based ticketing platform (correct me if I'm wrong) and we can create tables, forms, customer facing portal workflows and many more. 
I accepted the challenge and delivered the POC tasks. After delivering I realized Snow (servicenow) is a really great platform. So I thought it would be great to share my knowledge and experince with my fellow code warriors.  
I value your feedback for future articles of Snow KB. Cheers!
Unveiling the World of Web Development: A Comprehensive Overview and Essential Insights 🌐 - Part 2
Tags: webdev, frontend, backend, fullstack
Published: 2024-02-19 15:00:35

### **Let's proceed with our exploration of the key concepts to grasp a thorough understanding of the web development process.**

---

## 📌 Hosting

Web hosting is an online service that lets you publish your website files online. So, anyone with access to the internet has access to your website.

---

⚡️ What Is Web Hosting? https://youtu.be/htbY9-yggB0

⚡️ Different Types of Web Hosting https://youtu.be/AXVZYzw8geg

⚡️ Where to Host a Fullstack Project on a Budget https://youtu.be/Kx_1NYYJS7Q

---
---

## 📌 DNS

🔰 The Domain Name System (DNS) is the Internet's phonebook. 

🔰 Humans access information online through domain names, such as nytimes.com or espn.com. 

🔰 Web browsers interact through Internet Protocol (IP) addresses. 

🔰 DNS translates domain names to IP addresses so browsers can load Internet resources.

---

⚡️ What is DNS? https://www.cloudflare.com/en-gb/learning/dns/what-is-dns

⚡️ Mess with DNS - DNS Playground https://messwithdns.net

⚡️ How DNS works https://howdns.works

⚡️ DNS and How does it Work? https://youtu.be/Wj0od2ag5sk

⚡️ DNS Records https://youtu.be/7lxgpKh_fRY

⚡️ When to add glue records to DNS settings https://youtu.be/e48AyJOA9W8

⚡️ DNS Records for Newbies - How To Manage Website Records https://youtu.be/YV5tkQYcvfg

---
---

## 📌 Browsers

A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface.

---

⚡️ How Browsers Work https://web.dev/articles/howbrowserswork

⚡️ Role of Rendering Engine in Browsers https://www.browserstack.com/guide/browser-rendering-engine

⚡️ Populating the Page: How Browsers Work https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

⚡️ How Do Web Browsers Work? https://youtu.be/WjDrMKZWCt0

---
---

⭐ During our discussion, we covered some of the crucial concepts in web development that are fundamental to understand, without going into details about any specific technology.

⭐ These core concepts will serve as a useful reference for everyone, whether you are new to this field or an experienced developer refining your skills, in navigating the constantly changing web environment.

I hope you found our discussion informative and enjoyable! 😊
Built my First Side Project
Tags: webdev, react, learning, development
Published: 2024-02-19 14:53:26

Hello, I'm Rayid, a frontend web developer with a passion for creating tools that solve real-world problems. Today, I'm very excited to introduce my first side project – an Image Color Picker web app.

**The Problem:** Ever stumbled upon an eye-catching website and wished you could capture and use those captivating colors in your own projects? I certainly have, and that's what led me to develop this tool. I wanted a tool that could efficiently extract colors from images and save them for later use.

**The Solution:** To overcome the above problem I built Color Picker – a web app built with React and Tailwind, powered by Firebase on the backend. This tool allows users to extract colors from images using an eyedropper, offering multiple formats for easy use. Users can effortlessly save, share, and export their colors. Moreover, this tool automatically names color codes so you can easily implement them into your code.

You can checkout my webapp here: [https://imgcolorpicker.vercel.app](https://imgcolorpicker.vercel.app/)

I'd love to hear your thoughts and experiences with the tool. Happy coloring!