teleren/devto huggingface dataset:
Post-Django Girls @ EuroPython 2022
Tags: djangogirls, europython
Published: 2022-07-25 11:07:00

Wow, I can't believe Django Girls workshop @ EuroPython 2022 was this time two weeks ago!

![wait, waat!](https://media.giphy.com/media/rN2EZm3CSXHY1QoGrq/giphy.gif)

We didn't take any pictures as the day actually flew, plus I didn't want to make anyone uncomfortable. But EuroPython had an official photographer, and if they did take some photos of the workshop, I'll share them here with you all.
![person click picture](https://media.giphy.com/media/BxdZAwZcdHmySPLTpX/giphy-downsized-large.gif)

---

We accepted 20 applicants, and 16 RSVP'd to join us in-person. We didn't do a head-count, but around that number showed up.

On the Friday before the workshop, we had an open hour for anyone who may have had problems installing Python or Django. Few of the coaches showed up and a participant who just wanted to hang and have a chat. 💖

On the Monday, after registration, folks got settled at the room where the workshop is held, which was at the main conference venue, [The Convention Centre Dublin](https://www.theccd.ie/).

An additional surprise coach appeared, the wonderful [Nicholas Tollervey](https://ntoll.org/article/europython-2022/)!

I put my hand up that my zombie brain was not functioning (even with all the coffee), but I had a lot of amazing help from coaches and folks attending. It was certainly very interactive.
![need more coffee - fox pouring coffee](https://media.giphy.com/media/13USqh5fJ2XnIk/giphy.gif)


I requested coaches to jump up on stage to go through a section of the tutorial, and with live-coding certainly comes with live-debugging. It was a great way to show how we all make mistakes and how we can trace back and find what went wrong and where.

Alas. we didn't finish the tutorial, we got as far as "[CSS – make it pretty!](https://tutorial.djangogirls.org/en/css/)".

Also note that we left out anything to do with github as most of the tutorial's content can be done and tested locally on own laptop.

![cat taking glasses off](https://media.giphy.com/media/1HKaikaFqDt7i/giphy.gif)

But... we have set up a Discord server for Django Girls Dublin, so folks can connect with the coaches and ask for help. Or drop in and say "hello!".

{% embed https://discord.gg/sQthAkAT %}

![what are we waiting for!](https://media.giphy.com/media/POHPrPKGwCAFDkVpvY/giphy.gif)

👉 Don't forget there's an official Django Girls (global) chat channel: [https://gitter.im/DjangoGirls/tutorial](https://gitter.im/DjangoGirls/tutorial).

---

So thank you to all the coaches, everyone who were interested, and were able to come along on the day. You were all so patient and so helpful to each other. 

Huge thanks to EuroPython for working with me to host the workshop with the tea/coffee breaks and yummy lunch.

And to big 💖 to [Zalando](https://www.zalandodublin.com/) for sponsoring the workshop.

![sending virtual cat love](https://media.giphy.com/media/PcEHGN6WvTO2ekGICI/giphy.gif)
Vuemastery
Tags: programming, vuemaster, webdev
Published: 2022-07-25 11:06:24

Hi Everyone ! 
Vuemastery changed their Design and I am a bit confused because I don't which course is going in the Intermediate path and advanced also becquse I would like to learn step by step. Is there anyone who can have a list of path with their course so that it become easier for me to learn ?
Thanks in advance
best resources for practicing data structures and algorithms
Tags: algorithms, programming, discuss
Published: 2022-07-25 10:57:06

today ill be sharing my favorite sites and places to practice dsa for FREE!

## why even need dsa?
practicing dsa will help you improve the way you write code and can be differentiating factor between a good developer and a great developer. alongside getting you 6 figure jobs, it will also help to optimize your code and make it more readable!

## on to the resources!

- [project euler](https://projecteuler.net/) contains a series of challenging mathematical and programming language. this requires a balanced need of both math and programming. the problems range in difficulty from easy to hard and are aimed at people who are keen to practice their problem solving skills

- [codeforces](https://codeforces.com/) has various contests and problem sets. you can solve problems and get rated on the basis of how you perform in these competitions. it also has a large and growing community of around 600K people

- [codewars.com](https://www.codewars.com/dashboard) is one of my personal favorites. over here you level up based on Kyu/Dan Ranks. This rank system has borrowed from a system in Japanese martial arts. one can level up by completing katas(problem sets) which are at or above their level. harder the kata, the faster you level up

- [boot.dev](https://boot.dev/) has a collection of 17 tracks on python, JavaScript and go. it includes an environment where the user can learn the required concepts and then immediately implement in a code playground integrated into the website. it also  makes it really easy to track your progress and keeps you engaged as it has a ton of badges and achievements to collect as you code!
-[hacerrank](https://www.hackerrank.com/)
has kits and problem sets based around questions which are to be asked to asked in job interviews. companies like Amplify, Quora, and Capital One use hackerrank in their technical recruiting process

## conclusion
if you want to master dsa, all it takes is practice. so just pick a couple of places and consistently practice problems! if you have any other resources, feel free to share them in the comments below!!
Social Media Backend API in NodeJS
Published: 2022-07-25 10:49:17


Created: June 29, 2022 10:20 PM
Published: Yes
Tags: APIs

# **Social Media Application Backend**

This [repository](https://github.com/YoofiBP/mern-backend) contains code for the backend of a social media application. Features include:

- Creating and Authenticating Users
- Allowing users to update their profile with pictures and basic information
- Allowing users to create posts with dynamic media content
- Allowing users to follow other users to obtain a feed of their posts
- Commenting and liking on post

## **Install instructions in order**

- `npm install`: Install Dependencies
- `npx prisma generate`: Generate Prisma Client for managing database queries
- `npm run build`: Build minified and bundled code
- `npm run start`: Start server

## **Technical Specifications:**

The application uses:

- Babel and webpack for bundling and minification
- Express for serving requests and delivering responses
- Typescript for type-safe development
- MongoDB as the NoSQL database to manage resources as documents
- Prisma as the database client for building query abstractions on top of the database
- Cookie parsing for authentication
- Server response body compression
- Basic security headers to prevent malicious attacks such as Cross-Site-Scripting attacks
- JSON Schema validation

## **Code Architecture Summary**

The main application logic can be found in the `server` directory. `server.ts` is the main server file that starts the server. `express.ts` is where the main server application is created and exported to be started in server.ts. In this way we decouple our choice of server module from the server starting process. `express.ts` is where we add all middleware and routes necessary to receive requests and send back requests. `config/config.ts` is holds necessary configuration information for setting up our Mongo database, jwt secret, server port etc. `models` contains the blueprint for our resource objects i.e. users, posts, comments. These contain the business logic for performing operations on a model such as creating a new user, following a user etc. This allows us to ensure changes to business logic around these operations are localised to the model. Our request handlers are encapsulated in controllers in the `controllers` directory. Controllers are essentially responsible for receiving requests, performing schema validations where necessary, and returning responses with appropriate status codes and response bodies. Controllers are also responsible for calling appropriate model operations on their path to returning a response. All non-error controllers pass their errors to the error controller as a default action where the appropriate response may be sent based on the error `routes` marry route uris to controller handler methods as well as middleware in between. Routers found in routes are exported and hooked up to the express application.

The application can be built into a docker image by running `docker-compose up` in the root of the directory
Logging Headers with Serilog into Sumo
Tags: blog
Published: 2022-07-25 10:48:42

A quick post showing subtle changes to how request headers were being logged and the significant improvement on the end result.

## Version 1
`Log.Logger.Information("Request {headers}");`

manifests like this in Sumo:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4yvga07hvgori192i8d.png)

Ugly and larger than required.

## Version 2
`Log.Logger.Information("Request {@headers}");`

Simply using the destructuring operator produces this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnvmdb4u4mu8apnlljij.png)

Overall probably better but there's alot of expanding required to see all of the header values. Particularly annoying is the need to expand Value.

## Version 3
Create a simple class
`    internal class Header
    {
        public string Key { get; set; }
        public string Value { get; set; }
    }`

Extract the keyvalue pairs into a list of Headers:
`var headerList = httpRequest.Headers.Select(kvp => new Header {Key = kvp.Key , Value = kvp.Value.FirstOrDefault()}).ToList();`

Then log that list:
`Log.Logger.Information("Request {@headersList}");`

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

Marginally better, at least we don't need to expand Value.

## Version 4
Still use the Header class and headerList from Version 3, but change the way we log it to:
`Log.Logger.ForContext("Headers", headerList).Information("request")` 

The key difference being the use of ForContext, produces:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a28lr6pdhehd47bmwyo5.png)

Which to my eye is perfect, all the headers, tightly grouped, one click to see them all.
Notes from Uncle Bob’s Clean Code
Published: 2022-07-25 10:48:42


Created: June 18, 2022 1:55 AM
Published: Yes

I recently read Clean Code authored by Bob Martin and absolutely loved it. I felt so empowered learning how to right better code. Better here meaning more maintainable, extensible, easy to change and easy to test. There are many chapters which advise around how to structure classes, create functions, approach error handling, naming variables and testing among others. I have linked below some summary notes from those and hope they are useful to anyone who stumbles upon. If any these summary notes push you to get your hands on the book then this post is a success

[Clean Code Recall Notes](https://www.notion.so/Clean-Code-Recall-Notes-3895a0b28e5846daa62d1a758694af2b)
Custom Dimensions HOOK for your React projects.
Published: 2022-07-25 10:25:00

while working on a certain project, i needed to ensure that it was fully adapted to mobile, without any issue, and since i wanted to take 100% ownership of the application processes, i needed to in-my-own-way track certain changes per time, since this was key to the application. 

I found several solutions online, most of which had its downside and i wasn't too impressed, so i decided it would be best to carve mine. Below is my code snippets that did the magic, which led me to building a custom-hook, i like the idea of Hooks(useState, useRef, useReducer, useContext++).. the simplicity in its implementation led me to utilizing its power in my best ability. 

So, i went ahead to break my solution down as simple as possible in such a way as can be replicated to do solve other problems. 

**useWindowDimensions.jsx**

```js
import React, { useEffect, useState } from "react";

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions()
  );

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowDimensions;
}
```

**How you use it. in a custom component 'MyComponent' **


```js
import React from 'react';
import useWindowDimensions from './hooks/useWindowDimensions';

const MyComponent = () => {
  ...... 
    const { width:w, height:h} = useWindowDimensions();
  ...... 
 return (
       <>
            <AnotherComponent width={w} height={h} />
       </>
  );
}

export default MyComponent

```

i hope this was really helpful.. 
let me know what you guys think.
What exactly Just in time (JIT) compilation is in JavaScript?
Tags: javascript, programming, webdev, tutorial
Published: 2022-07-25 10:20:00

---
canonical_url: https://blog.aamchora.space/what-exactly-just-in-time-jit-compilation-is-in-javascript
---

Is JavaScript compiled language or interpreted language or a mix of both?

Don't worry! Take a chill pill 😎

I'll break it down for you, bit by bit.

But first thing first...

Take a deep breath, and follow along.


JavaScript engines use the JIT(just in time) compiler to execute the code.

I know you must be wondering what the hell is JIT and how it works?


![Tired](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqzgpiikwnmvnfatw06c.gif)
 
 
**Let me demystify it for you**


But before understanding JIT, let's change the topic for a while, and try to understand what compiler and interpreter are and how they work?


**Compiler**

The source code is converted into machine code once and then gets executed. 

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

 - Pros
 
  - Suppose we have a loop that runs 40 times, we do not need to translate the same code again and again. The time it saves is huge.
  - The converted code will be more efficient cause we have more time for optimization.

 - Cons
   - It takes a little bit more time to start up because it has to go through that compilation step at the beginning.
 

**Interpreter**

Interpreters are quick. We don’t have to go through that whole compilation step before execution. It just starts translating the first line and then executes it.

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

 - Pros
 
  - Fast start-up times are characteristic of interpreters. That's why browsers used JavaScript interpreters in the beginning.

 - Cons
   - When you’re running the same code more than once. For example, if you’re in a loop. Then you have to do the same translation over and over and over again.
   - The code will be less efficient than the compiler cause we have less time for optimization.

**Just In Time(JIT) compiler**

To get rid of the interpreter's inefficiency, "_the interpreter keeps retranslating the same code every time it goes through the loop_".
 
In the JIT compiler we have a new component called a monitor (aka a profiler). That monitor watches the code as it runs and

- Identify the hot or warm components of the code eg: repetitive code.
- Transform those components into machine code during run time.
- Optimize the generated machine code.
- Hot swap the previous implementation of the code.


![Just In Time(JIT) compiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgraj0a2gpd55xgc9whm.png)
 

In short **Just in time compiler** is nothing but a combination of an interpreter and a compiler.

I hope you found it helpful, and if you have any questions, please let me know.

---


_Feel proud to correct me if I'm wrong:)_

[Twitter](https://twitter.com/AamChora) || [Linkedin](https://www.linkedin.com/in/hemendrakhatik/)
Lifecycle of a React component 🔄
Tags: react, javascript, webdev, programming
Published: 2022-07-25 10:09:58


how lifecycle of each component looks like:- 
 
![Lifecycle_creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnoqussomrs83fkie2c5.png)
  
First, a component is initialized and mounted in the component tree

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

Next, its internal data might change hence State Changes causing the component to update or re-render

![Lifecycle_unmount](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jwlocawczf5pa4d3psy.png)
 
Finally, the component might be destroyed or unmounted from the component tree

When using **Class based components** in React, there are different ways to tap into the lifecycle:-

```js
class Lifecycle extends React.component{
componentDidMount(){           **FETCH DATA HERE**
    // Intialize
}
componentDidUpdate(){
    // Update
}
componentWillUnmount(){        **UNSUBSCRIBE HERE**
    // Remove
}
```
for example, you may listen to real time stream of data from a database and unsubscribe from that stream when its destroyed

**Functional compnents** don't have access to these methods instead everything is managed by a single hook useEffects()

```js
function Lifecycle{
  const [count] = useState(0);
  useEffect(() => {
      return () => console.log('destroyed')  
},[count]);
}
```

When you run code in response of a lifecycle event, its considered a side-effect
useEffect is the single API to handle 3 different lifecycle events of mount, upadte and unmount

It takes function as its first argument ,the array as the second argument (here [count]), that determines when that function should run . Array contains any data DEPENDENCIES like data described in useState, and run whenever that data changes, RUN ON ANY UPDATE. If the array is empty it will run when the array is first initialized, equivalent to componentDidMount.

Normally there's no return value to the function used in useEffect() but returning another function it'll run when the component is destroyed which allows to implement tear down logic when component is unmounted.

**धन्यवाद**
Need help on creating a mobile-first website with quiz-like presentation (HTML CSS & Javascript)
Tags: help, webdev, javascript, beginners
Published: 2022-07-25 10:09:05

I need some help with creating a mobile-first website with quiz-like presentation. The idea is to create a website layout similar to this: [https://ig.ft.com/climate-game/](https://ig.ft.com/climate-game/)

- One-page application where all the content is loaded up when first opening the page.
- There will be no score or logic behind it, the idea is to display text and images in very bite-size manner. 

I am basically trying to find a **javascript** trick to display content on a page one at a time and with a press of a button it would display the next page **or** smoothly scroll down the page to the desired part (scrolling would have to be disabled). The main issue I am having is that the way the content is displayed and loaded (like when the button is pressed how the page will load and from where).

I cannot share any of the code or more context about it, sorry!

Any tips, articles or videos with tutorials or explanations on how to create a website like this is all welcome.

Thank you for the help!
How to Run PHP Code in Visual Studio Code Terminal | PHP Executable Path VSCODE
Tags: vscode, webdev, beginners, php
Published: 2022-07-25 09:44:00


In this post I will show you How to Run PHP code in visual studio code terminal console window and how to run php code directly in the visual studio code console terminal.

**[Can we run PHP code in Visual Studio Code?](https://www.hmablogs.com/how-to-run-php-code-in-vscode-terminal-console/)
[How do I run a PHP script in terminal](https://www.hmablogs.com/how-to-run-php-code-in-vscode-terminal-console/)?
How do I run code in Visual Studio Code in terminal?**

Follow these steps to [run code PHP in Visual Studio Code](https://www.hmablogs.com/how-to-run-php-code-in-vscode-terminal-console/), no configuration needed:
1. Install the Code Runner Extension.
2. Install PHP or XAMP on your computer.
3. Add the PHP executable file path (C:\\xampp\\php\\php.exe) in Code Runner JSON configuration settings.
4. Also add same PHP executable path in windows environment variables.
5. Open the PHP code file in VS Code Text Editor.
6. Use shortcut (Ctrl + Alt + N), or right click the Text Editor and then click Run Code in editor context menu.

**Full Video Tutorial!**

{% youtube NZ2PtObTtpo %}



****************************
𝗛𝗲𝘆, 𝗜𝗳 𝗧𝗵𝗶𝘀 𝗩𝗶𝗱𝗲𝗼 𝗶𝘀 𝗛𝗲𝗹𝗽𝗳𝘂𝗹 𝗳𝗼𝗿 𝗬𝗼𝘂, 𝗣𝗹𝗲𝗮𝘀𝗲 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗖𝗼𝗳𝗳𝗲𝗲. 𝗧𝗵𝗮𝗻𝗸 𝗬𝗼𝘂!😇

𝗟𝗶𝗻𝗸:   https://www.buymeacoffee.com/hmaweb

**- Read Articles!**

{% embed https://www.hmablogs.com/how-to-run-php-code-in-vscode-terminal-console/ %}
     

****************************


## Suggested Videos:

**Complete User Registration &  Login System with PHP and MySQL Database | PHP Login System**

{% youtube m50q5_RQFB4 %}



**How to Create Responsive Sign Up Form with HTML5 CSS3 | How to create a signup page**

{% youtube TuznhDaF3rw %}



**Top 10 VSCODE Extensions For Web Developers | Best VSCODE Extensions 2022**

{% youtube klL5DZePXEc %}


**How to Change Website Content in JavaScript | How to Append Text in JavaScript 2022**

{% youtube -rphTk2Vwwc %}


**How to Build Vertical Tabs in HTML and CSS | Animated Vertical Tabs in HTML and JavaScript**

{% youtube 4fzLRXUbkcM %}

Hoverable Responsive Dropdown HTML CSS | Hover Over Dropdown Menu HTML CSS

{% youtube m18hothdz7Y %}


10 Ways How to Center a Div Vertically in Another div | CSS Align Center

{% youtube BibKN_xbQ1U %}
-----------------------------------------
Military mass warning systems
Published: 2022-07-25 09:36:34

What do you know about military mass warning systems? I recently started looking for information about this, and I managed to find a website [https://www.atisystems.com/solutions/campus-safety/](https://www.atisystems.com/solutions/campus-safety/) with detailed information about military mass warning systems, found out prices and read reviews. I was basically satisfied with everything.
INSPECTING ELEMENT
Published: 2022-07-25 09:33:52

In any modern browser when you click on  any CSS element, if you scroll down you will see an inspect button. Then you click on it you will then see control of your website page. Then you can change the setting of the website  like the color, style and the size.

This are the roles when inspecting element.
1} Tracking down where properties are coming from.
2} Experimenting or troubleshooting.
3} Inspiration from other websites.
How to Run PHP on VSCODE | How to Run PHP Code on Chrome | PHP Code Not Running in xampp
Tags: xampp, php, vscode, webdev
Published: 2022-07-25 09:25:00

In this post I will show you How to Run PHP on VSCODE and how to run PHP code directly in the Chrome browser. The post will provide you a detailed solution if you are facing PHP Code Not Running in xampp.

Follow these [**steps to Run PHP on vscode**](https://youtu.be/9JCAk4yQ1Lo) on your Chrome browser!
1. Open your Visual Studio Code editor
2. Install and run XAMPP localhost control pannel on your computer
3.  Go to xampp folder and create new folder and an index.php file inside "htdocs" folder
4. Open the file inside vscode editor
5. Open up any Web browser on your desktop and search "localhost". The browser will open a list of files stored under the "HTDocs" folder on your computer. 
6. Click on the link to a PHP file and open it to run a PHP script.

## Full Video Tutorial:

{% youtube 9JCAk4yQ1Lo %}

****************************
𝗛𝗲𝘆, 𝗜𝗳 𝗧𝗵𝗶𝘀 𝗩𝗶𝗱𝗲𝗼 𝗶𝘀 𝗛𝗲𝗹𝗽𝗳𝘂𝗹 𝗳𝗼𝗿 𝗬𝗼𝘂, 𝗣𝗹𝗲𝗮𝘀𝗲 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗖𝗼𝗳𝗳𝗲𝗲. 𝗧𝗵𝗮𝗻𝗸 𝗬𝗼𝘂!😇
𝗟𝗶𝗻𝗸:   https://www.buymeacoffee.com/hmaweb
****************************

**- Read Article!**
 {% embed https://www.hmablogs.com/how-to-run-php-code-in-vscode-terminal-console/ %}