teleren/devto huggingface dataset:
CSS Grid is a powerful tool to create layouts
Tags: css, cssgrid, layout, frontend
Published: 2024-01-05 18:31:52

In this post I will show you how you can make entire interfaces with a property of the CSS Grid.

---


### CSS Grid Terminology
First let's take a look quickly about CSS Grid terminology.

- **Grid Container** : The element on which grid is applied. The grid container is the parent of grid items.

- **Grid Item** : All directly nested elements of a grid container.

- **Grid Cell** : Every column in every row is a grid cell.CSS Grid can handle columns and rows, it is a 2-dimensional system.

#### The Grid container property
`grid-template-areas:` With this property we define the names of the grid areas and reference them with the `grid-area` property.
#### The Grid item property
`grid-area:` With this property you give a name to an item so that it can be referenced in the `grid-template-areas` template.

---


### Creating a template.
In the body of the HTML file, we have a `div` element with `class` container. This is the parent element.
Inside of the container we created four children elements `(header, section, aside and footer)` each with `class` grid-item.

![html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1im06begna85t01x35p1.jpg)

With the CSS file we set layout with Grid.
First, we define the `div` with `class` container as a grid container.
After, using the property `grid-template-areas` we make the grid template by referencing the names of each `grid-area` property.
Repeating the name of a grid-area causes the content to span those cells. A period `(.)` makes a empty grid cell. And `none` signifies no grid areas are defined.

![css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osmq5a86ofaaany9059k.jpg)

This is a template with four columns and four rows.
The `header` spans all four columns in the first row.
The `footer` spans all four columns in the last row.
The `main` spans the first three columns in the second and third rows.
And the `aside` spans the last column of lines two and three.

We also define a `gap: 5px`; and the `height: 100vh`;
The result is shown in the figure below:


![layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwhcwcpek2xh5vz2ctpu.jpg)

Its possible to change the size of each grid-item with the properties of the grid container: `grid-template-columns` and `grid-template-rows`.

The CSS grid is a powerful tool to create entire layouts in a simple and effective way.

---

**Thank you for reading.
If you liked this article shared it!
I appreciate your feedback.**
Underestimating rust for my Project.
Tags: rust, tauri, neovim, programming
Published: 2024-01-05 18:27:50



Starting to notice a shift in my coding journey a few months back when I began following Theprimeagen. Rust and Vim became regulars in every video he made, and I started feeling a bit left behind.

Initially, I underestimated Rust, thinking I could learn it quickly and start a project within a week, assuming all languages share similar concepts with just syntax differences. 

I was wrong. The borrow checker, lifetimes, and various data types, some of which I still grapple with, made it a challenging but ultimately worthwhile experience because now I can actually understand what is happening, unlike JavaScript, which I still think I am not good at or don't understand what is happening even if I have coded more in JS.

## Breaking the Habit
I was from a JS and Python background, so when writing code, it was second nature to me to run that code every 5 minutes to check if it's working right. But now, I just need to satisfy Rust Analyzer, and it feels good when I type cargo run because I know it will work, even if it's not always the case.


## Not everything is good about Rust,
for example, its compile time. For a language that promotes itself as the fastest, having so much time to compile was actually a surprise/frustrating to me. 

Another thing was the memory usage of Rust Analyzer; because of this, I started using Vim as an editor (or actually, Primeagen was the reason), and I faced the same problem on how to exit Vim (which was actually written Front of Neovim).




## About my Project: [MechType](https://github.com/SurajRaika/MechType)

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



My objective was to develop a Tauri version of RustyVibes, a CLI designed for playing mechanical sounds during typing.

Initially, I assumed that merging Tauri and RustyVibes would be a straightforward task, but reality proved me wrong. 

It became apparent that comprehending mutex and mpsc for facilitating communication between threads was essential. 

Undoubtedly, RustBook was the first resource  that truly captivated my interest. In my opinion, it stands out as one of the most underrated yet invaluable resources for beginners venturing into the realm of Rust.


## Best Part of Rust:
The most thrilling aspect has been the joy of writing the backend. It's like every struct, enum, and method in Rust forms this **interconnected Multiverse of code** , which you can see in [crates.io](https://crates.io/) which is best Documentation experience I Ever Had.


Rust is Given me Best Experience of writing code 
but need to go back to reality as still it's not very popular but still very impressive for a 9-year-old language to achieve what it achieved. 
And it was Good Thing that I Underestimated Rust and Overestimated My self, otherwise , I may not have learned it.
Enclave Games Monthly Report: December 2023
Tags: gamedev, monthlyreport, monthlyupdate, enclavegames
Published: 2024-01-05 17:44:15

---
title: Enclave Games Monthly Report: December 2023
published: true
date: 2024-01-05 17:39:39 UTC
tags: gamedev,monthlyreport,monthlyupdate,enclavegames
canonical_url: https://end3r.medium.com/enclave-games-monthly-report-december-2023-3a8638681466
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/si7ny6e8is7uvfqaujvx.png
---

December is traditionally rather slow, but we’ve managed to [conduct](https://gamedevjs.com/survey/gamedev-js-survey-2023-is-open/) (a shortened) [Gamedev.js Survey 2023](https://gamedevjs.com/survey/2023/), even including a warm-up week, so that’s a [second](https://enclavegames.com/blog/monthly-report-november-2023/) _pretty decent_ month in a row.

### Games

I hope I won’t be needing to remove this section soon due to inactivity.

### Writing

The usual amount of blog posts.

### Design

[Ewa](https://mypoint.pl) completed [shipping js13kGames t-shirts](https://medium.com/js13kgames/swag-shipped-early-share-your-selfies-fc8c696ee914) in the first days of the month.

![js13kGames selfies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hqgcgqpu2okwbxrfemi.jpg)

The [photo gallery on Facebook](https://www.facebook.com/media/set/?set=a.887320740060687&type=3) is starting to receive pictures from happy folks getting their packages already.

### Events

No, nothing.

### Other

The [Gamedev.js Survey 2023](https://gamedevjs.com/survey/2023/) was prepared, [launched](https://gamedevjs.com/survey/gamedev-js-survey-2023-is-open/), and conducted all in December, even including a week for getting feedback about questions and answers [on GitHub](https://github.com/GamedevJS/Gamedev.js-Survey/issues/14).

![Gamedev.js Survey 2023](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irvyggsn7x3iybgtreaa.png)

The Survey this year was shortened from a whole month to only two weeks in an effort to squeeze it in before Christmas, but we still managed to get a record number of surveys. This year’s effort was supported by [Poki](https://poki.com/).

![Grid Studio frames](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgx9869fv1sends0zj2k.jpg)

I’ve published [Sentimental blast from the past with Grid](https://end3r.com/blog/sentimental-grid/) going through the history of a framed iPhone 4, NES controller, and A5X chip dipped in resin.

Our [Gamedev.js Discord](https://gamedevjs.com/discord), usually almost empty outside of the time [Gamedev.js Jam](https://gamedevjs.com/jam/2024/) happens, had three channels created recently:

- `sizecoding` for code-golfing folks, managed by **Frank Force**
- `excalibur` handled by **Erik Onarheim** who is the author of this game engine
- `moddio` multiplayer game platform, with **Jaeyun Noh** and their community joining

### Plans for the next month

Announce a cool freelance thing I will be doing around  **Phaser**.

Start reaching out to potential partners and sponsors of the upcoming [Gamedev.js Jam 2024](https://gamedevjs.com/jam/2024/) in April.

Try doing something about that empty **Games**  section.
Phase-1 FlatIron
Published: 2024-01-05 17:36:33


The reason why phase-1 was important to me is that a couple of weeks ago I could have never imagine creating a simple page application.

I did struggle in the beginning trying to understand all the new information I was starting to learn now. Throughout my first 3 weeks into the program I was able to learn basic variables, functions, arrow functions, anonymous function, arrays, objects, filters, scope and blocked scope. 

Within the first week we went over the basic getting the foundation setup before learning DOM. While learning DOM in the second week we were learning how to incorporate everything together. Being able to create a function With the DOM opened my eye to how from scratch you can create everything from the index.js. 

What really fascinated me was getting the Array(data) being able to filter through the data and create functions, addeventlisteners to the page so we can manipulate what we can see.    

Throughout my time prepping ourself to the third week being able to create a project from scratch is really helpful. Being able to test myself and build a single page application is an eye opener because to me its only the beginning. I'm excited to see what I can learn throughout my time in the bootcamp.
Welcome to PhD Prime: Your Pathway to Academic Excellence
Tags: phd
Published: 2024-01-05 17:35:33


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpabb75dcyy42iftnedn.png)
Introduction:
Embarking on a doctoral journey demands skill and guidance. PhD Prime is a leading platform offering specialized services and resources tailored to assist scholars in their academic pursuits.

Understanding '[How to Write a PhD](https://phdprime.com/)':
The foundation of academic writing lies in structuring a PhD. This involves formulating hypotheses, conducting literature reviews, and establishing robust methodologies. PhD Prime provides invaluable guidance on these essential steps, nurturing the skills required for a comprehensive dissertation.

Thesis Writing Services at PhD Prime:
PhD Prime prides itself on its comprehensive suite of services catering to thesis writing. These services encompass every aspect of the thesis journey, from initial conceptualization to final submission. Scholars benefit from meticulous editing, proofreading, and formatting services.

Personalized Thesis Writing Assistance:
At PhD Prime, personalized guidance is paramount. The platform offers one-on-one mentorship, tailored feedback, and assistance that aligns with individual research needs. This approach ensures that scholars receive expert advice specific to their research objectives.

The Role of Research Paper Writers:
The platform boasts a team of adept "Research Paper Writers" equipped with expertise in aiding scholars through the process of crafting research papers. These professionals provide invaluable support, ensuring the quality and credibility of scholarly publications.

Academic Excellence with Essay Writing Services:
PhD Prime's "Essay Writing Service" stands as a testament to its commitment to academic excellence. By delivering meticulously crafted, academically sound essays, the platform aids scholars in articulating their ideas effectively.

Conclusion:
In conclusion, PhD Prime is a comprehensive platform tailored to meet the diverse needs of scholars navigating the academic landscape. Offering guidance on 'How to Write a PhD,' providing specialized 'Thesis Writing Services,' professional 'Research Paper Writers,' and a dependable 'Essay Writing Service,' PhD Prime stands as an indispensable resource for scholars striving for academic excellence.
Keindahan dan Dinamika Harga Emas Semasa
Published: 2024-01-05 17:32:49

Emas, selain menjadi barang kemas yang indah, juga merupakan pelaburan yang popular di kalangan pelabur-pelabur bijak. Kekalannya sebagai lambang kekayaan dan nilai intrinsik yang tinggi menjadikannya tarikan utama di pasaran kewangan. Dalam artikel ini, kita akan meneroka ke dalam dunia harga emas semasa dengan panduan terkini dari EmasMy.Com.

Mengapa Harga Emas Penting?

Harga emas tidak hanya mempengaruhi pasaran kewangan global, tetapi juga memberikan petunjuk kepada kestabilan ekonomi dunia. Pelabur sering merujuk kepada harga emas semasa untuk membuat keputusan pelaburan yang bijak, dan itulah sebabnya mengapa pemantauan harga emas menjadi penting dalam dunia kewangan.

Kekuatan EmasMy.Com

EmasMy.Com adalah platform terkemuka yang menyediakan maklumat terkini mengenai harga emas. Dengan menggunakan teknologi terkini, laman web ini memberikan data [harga emas semasa](https://www.emasmy.com) dengan tepat dan efisien. Pelbagai alat analisis dan carta interaktif turut disediakan untuk membantu pelabur membuat keputusan yang lebih baik.

Pemahaman Terhadap Harga Emas Semasa

Faktor-faktor yang Mempengaruhi Harga Emas

Harga emas dipengaruhi oleh pelbagai faktor termasuk keadaan ekonomi global, ketidakstabilan politik, dan permintaan fizikal. Dalam artikel ini, kita akan meneroka setiap faktor ini dengan lebih mendalam.

Analisis Graf Harga Emas

EmasMy.Com tidak hanya menyediakan harga emas semasa, tetapi juga menyajikan carta dan analisis graf yang membantu pelabur membaca corak pergerakan harga. Pemahaman terhadap carta ini membolehkan pelabur membuat keputusan pelaburan yang lebih berinformasi.

Perbandingan Harga Emas dengan Mata Wang Lain

Bagi mereka yang aktif dalam perdagangan mata wang, EmasMy.Com menyediakan perbandingan harga emas dengan mata wang utama. Ini memberikan pandangan menyeluruh terhadap hubungan antara emas dan pasaran mata wang global.

Cara Mengakses Maklumat Terkini

Untuk mendapatkan pemahaman yang lebih baik mengenai harga emas semasa, anda boleh melawati laman web [EmasMy.Com](https://www.emasmy.com) di sini. Di samping menyediakan harga emas terkini, laman web ini juga menawarkan sumber maklumat yang berguna untuk membantu pelabur membuat keputusan yang bijak.

Kesimpulan

Harga emas semasa adalah satu lagi dimensi dalam dunia kewangan yang memerlukan perhatian yang serius. Dengan menggunakan EmasMy.Com sebagai panduan, pelabur dapat mengakses maklumat terkini, analisis graf, dan perbandingan harga dengan mudah. Ingatlah, dalam dunia kewangan yang dinamik, pengetahuan adalah kunci kepada kejayaan pelaburan yang berjaya.
A User Friendly Java Decompiler
Published: 2024-01-05 17:30:43

Recently, I was working on a implementation where I needed to look at how the existing Java code was written. I used a tool called _JD-GUI_ to decompile the .class files. When I was trying to save the decompiled class _JD-GUI_ added extra comments that I didn't need. It was easy to delete these comments for small parts of the code, but for large java class or on batch selection, it became really hard. Additionally, I noticed that it's skipping the Java code, and there's no guarantee of achieving a 100% decompilation.

So, I decided to make my own tool that decompiles **.class** to **.java** form without unnecessary comments.


I have designed this tool to simplify the process of decompiling Java classes. This tool provides a user-friendly graphical interface for easy navigation and utilization.

Java Decompiler By Khalil
The decompiler is created using Java Swings, and it performs decompilation using procyon-compilertools.

Download the application from [here](https://khalilganiga.in/blog/unveiling-the-power-of-java-bytecode-a-userfriendly-decompiler-tool-by-khalil)

originally posted here [https://khalilganiga.in/blog/unveiling-the-power-of-java-bytecode-a-userfriendly-decompiler-tool-by-khalil](https://khalilganiga.in/blog/unveiling-the-power-of-java-bytecode-a-userfriendly-decompiler-tool-by-khalil)
Implementing Notifications to your system
Tags: webdev, programming, newbie, hasanaelsherbiny
Published: 2024-01-05 17:02:11

When Creating a web application most of times you come to specific scenarios in which you need to send your users notifications but you start wandering how to do it?

## Notifications Types/Methods
we can categorize notifications into types based on how notifications are being send to users

1. Push Notifications / Realtime Notifications
this is when a specific action occurs a notification is created and sent directly to user (in real-time) 

![How To Implement Notifications in your system](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2zs7v5072v0zk6wix36.gif)



2. Pull Notifications
unlike the first type the notification is not sent to user but it's being saved into a store and wait for user to ask for it

most systems use a combination of two types ,facebook for example, when someone react or add comment to your post you immediately get a notification (push notification) but also you still able to click on your notifications icon and list all your notifications (pull notifications)

## How To Implement notifications?
for the pull notification it's straight forward by adding a table into your database where you can store your notification for each user, then user select from it by current user id.

on the hand ,push notifications are littlie bit tricky as you need to have an open connection with your user so that you can send notification to him directly, to implement this kind of notifications you can make a good use of sockets or long polling , or you can simply use a library specialized in real-time communications like firebase or SignalR if you are using .net stack, but don't forget to also store your notifications in the database as user can currently be offline or can get history of old notifications later.
Protect Your Home with ADT Security
Tags: security, productivity, serverless, sql
Published: 2024-01-05 16:57:30

Secure your home with ADT Security: Choose peace of mind by installing ADT's advanced security solutions. Safeguard your home with state-of-the-art technology, professional monitoring, and reliable protection, ensuring a safe environment for you and your loved ones.
**Click Here>> https://shrinkme.org/F7QT**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l9rqtxal2cjdkooctyu.PNG)``
Free tools for developers to build their apps
Tags: webdev, api, programming, learning
Published: 2024-01-05 16:27:03

In the dynamic and competitive landscape of app development, startups and developers often find themselves navigating tight budgets and limited resources. Building a successful app requires a blend of creativity, dedication, and, most importantly, the right tools. In the early stages of my startup journey, I quickly realized the immense value of leveraging free resources to kickstart app development without breaking the bank.

Server costs, software licenses, and development tools can quickly add up, potentially hindering the progress of a promising project. However, in today's tech-driven era, a wealth of free resources is available, offering developers a lifeline to overcome financial barriers and transform their ideas into reality.

So, today I will share some free resources that developers can utilize in their projects. The tools are divided into multiple categories like API, Cloud, BugTracking etc.

[Free resources list](https://free-for.dev) 👈🏻

Go ahead and explore the free resources and it might give some ideas.

Some of my favorites:

1- [Upstash](https://upstash.com/)

Serverless redis, no need to spin up your own instance. Free 10k Requests per day.

2- [fly.io](https://fly.io)

Fly is a platform for applications that must run globally. It runs your code close to users and scales compute in cities where your app is busiest. Write your code, package it into a Docker image, deploy it to Fly's platform, and let that do all the work to keep your app snappy. Free allowances include up to 3 shared-CPU-1x 256mb VMs, 3GB persistent volume storage (total), and 160GB outbound data transfer.

3- [IPinfo](https://ipinfo.io/)

Fast, accurate, and free (up to 50k/month) IP address data API.

4- [Zoho](https://zoho.com)

Started as an e-mail provider but now provides a suite of services, some of which have free plans. I use their email services for all my startups. Free upto 5 users.

5- [ConfigCat](https://configcat.com/)

ConfigCat is a developer-centric feature flag service with unlimited team size, excellent support, and a reasonable price tag. Free plan up to 10 flags, two environments, 1 product, and 5 Million requests per month.

6- [PostHog](https://posthog.com/)

Full Product Analytics suite free for up to 1m tracked events per month.


There are hundreds of these tools for you to use. Go check it out.

---


My name is Zain and I am building [devtree](https://devtree.app?utm_source=devto) where developers can get hired without any job search.

I post about my journey, lessons learned and success on [twitter](https://twitter.com/zainnazirbutt) and [linkedin](https://linkedin.com/in/zainnazirbutt). You will also find other things on my devtree profile as well.

If you want to learn about working on Startups, Rails and general life advice follow me.