teleren/devto huggingface dataset:
Django Context Processor
Tags: django, contextprocessor, python
Published: 2023-01-02 09:57:41

**today we will take about the django context processor** 
first lets imagine that we are building an Ecommerce Website, so our website will have products where clients can add to the cart then move to the checkout page and complete the process by adding their location and payment information or complete shopping and add more products to the cart


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

so in every page of the site the client can see the cart with the product that he added before and their quantity and price

so when developing this, we need to include the cart with all of it’s information in every view in our project, and this a really a bad solution, because Django uses DRY concept which means Do Not Repeat Yourself, here the context processor comes to fix this issue, 

the context processor is a way to include something in all the site 

or what if we want to add the site footer , so the footer we be in all the pages so we need to include it the footer information in all the views or create a context processor for the site footer

so now we should create a context processor for get footer or cart information instead of including that information in all the views in our project, but how can we create a context processor


 Creating Context Processor 
1 — I will create a new folder in the main project folder with the name of utils I always do this to add all the utils files in this folder (you can name it any name you want) or you can create the file in the app directory 

2 — create a new python file with a meaningful name so I will call it settings_context.py for getting footer information then start adding the context processor code in it 


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

so here i imported the footer model then I added a function to get the footer information, it is just a normal Django view that retrieves only one context ‘footer’

in the screenshot I also added another view to get the site logo now we need to include this view in our context processor in our settings.py

3 - so we will open settings.py then move to the templates part then add our context processors for footer and the other for the logo

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

and if you created a context for cart you will include it also

so now the footer and the logo from our context will be available in all the project templates and we can use it like any context we will include it in {footer.anyinfo} like any template context

now you do not have to include those information in any view

you should use the Django context processor any time you found 
yourself need something in all the project pages 

if you have any questions leave it below , follow me for more content related to Django , python , data science , machine learning and vuejs
OAuth 2.0 - Scope-based Access Control
Published: 2023-01-02 09:55:28


The control is done via Scope. The whitepaper said it enough:

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

To do this, all 3 components in OAuth are involed in play:
**1. Security layer in Resource server**
the code will need to use additional layer of spring web security, to make sure the client user of token has the right authority(profile) or role, before accessing the resource (path). 

```
@EnableWebSecurity
public class WebSecurity extends WebSecurityConfigurerAdapter {
	
	@Override
	protected void configure(HttpSecurity http) throws Exception {
	 
		http
			.authorizeRequests()
					.antMatchers(HttpMethod.GET, "/users/status/check")
					.hasAuthority("SCOPE_profile")
				.anyRequest().authenticated()
				.and()
			.oauth2ResourceServer()
			.jwt();
	}
	
}
```

**2. Define scopes in Authorization Server**
The Authorization Server will need to have the corresponding scopes for the fine-grained access control.
E.g. make sure the scope "profile" will not be granted by default.

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

**3. Client requests for the right scope in token**
If the client did not request for scope "profile", when they use the token to access "/user/status/check", an error 403 Forbidden will occur:

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


But if they did request for scope "profile", 

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

200 OK:

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





Now wrapping up the notes by the source code:

Resource Server
Repository: https://github.com/simplyi/ResourceServer

Zip: https://github.com/simplyi/ResourceServer/archive/master.zip

Reference for the notes:
https://www.appsdeveloperblog.com/creating-oauth-2-scope-in-keycloak/
10x developer myth in 2023
Tags: discuss, webdev
Published: 2023-01-02 09:52:40

My hope for 2023 is that this 10x developer myth will change from how many commits are made, to how well-put-together our code is!

> _We are not bakers who are paid for the amount of loafs they can bake. We are engineers who get paid for how sturdy our constructions are._

ps.: nothing wrong with bakers. :bread:

pss.: if you want to bake code, ask ChatGPT :stuck_out_tongue_closed_eyes:

<center>Happy new year everyone!</center>![Happy New Year](https://media.giphy.com/media/s2qXK8wAvkHTO/giphy.gif)
Handle concurrency in Cloud Firestore with a single boolean
Tags: firebase, angular, serverless, tutorial
Published: 2023-01-02 09:19:41

Working with Cloud Firestore really feels amazing, realtime, scalability, easy to use, nice SDKs !

Then you stumble on concurrency, and it hurts. Cuncurrency has always been a big issue in many online apps, and there's a lot of ways to handle it, today i'm going to present to you one of the easiest ways I've ever seen, using a boolean that's quite hard to find when you just google "firestore concurrency" stuff.

## First of all, the problem with concurrency

Let's imagine this flow of actions, with two users: A and B, both observing the same document (`{ "name": "bar", "size": 10}`) and editing it.

 - A edits field "name" to set it to "foo".
 - B edits field "size" to set it to 25.
These actions happen with less than a second between each other.

Because of the Firestore restriction that limits write ops to 1/s/doc (a given document can only be edited once per second), this is what B will see, in sequence:

 -  `{ "name": "bar", "size": 10}` // First read
 -  `{ "name": "bar", "size": 25}` // Optimistic local write
 -  `{ "name": "foo", "size": 10}` // Result from A's edit
 -  `{ "name": "foo", "size": 25}` // Server result from B's edit

As you can see here, the user will see the data flicker from previous to new state, and this is because we don't filter on "wait until all operations are done".

## The hasPendingWrites boolean

Firebase Web JS SDK has a nice tool to handle this kind of issues: `hasPendingWrites` ([see more details in docs](https://firebase.google.com/docs/reference/js/firestore_.snapshotmetadata.md#snapshotmetadatahaspendingwrites)). What this does it tell us if the snapshot we're getting can be considered as stable or not for current client, as it won't be stable if it has pending writes.

_This is even available in other Firebase SDKs but we're not going to cover them here._

### How to use it

Here I'm going to give an example with `@angular/fire`'s approach, using rxjs, but you can use it from any JS SDK library, or the SDK itself if you want to, as it's a SDK-level property.

With RxJS, you can simply use the `filter` operator on your snapshot listener:

```ts
docSnapshots(doc(firestore, 'exampleCollection', 'exampleKey'))
.pipe(
    filter(snap => !snap.metadata.hasPendingWrites),
    map(snap => snap.data())
)
```

Et voilà ! You now have a document data observable that will only emit data once all your write operations have been resolved :tada:
Frontend Backend - December release
Tags: frontend, backend, tshirt, swag
Published: 2023-01-02 09:45:23

Hi All 👋🏻

We've just released our Decembers edition of developer's T-shirts.

This t-shirt come in 3 variants: front-end, back-end, and full-stack

Hope that you'll enjoy them 😊


![Frontend backend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmrrfld2rpdzv6yl71jb.png)


Read more, or order our developer shirt:
[Frontend backend Developer t-shirt](https://www.devshirt.club/developer-shirt/frontend-backend)

## Developer t-shirt release summary
Question was:
```
Frontend or backend?
```
Inspirational quote
```
First, solve the problem. Then, write the code.
```

## About design
We have levled up a classical joke, frontend on front side of t-shirt and back-end on back side of t-shirt. With bored ape yacht club gaining popularity not so long ago, and with monkeys being as cool as ever we've decided to pick tech monkeys from future for our fronted backend t-shirt. Frontend monkey is cheerful, using light and happy colors, he even has a banana. While backend monkey is a bit more dreadful, has open brain, is a bit darker and more twisted. This is our first double sided t-shirt, but we think it is perfect theme for exploring 2 sides.
How to Develop an Effective Web Application?
Tags: webapp, webdev, android, ios
Published: 2023-01-02 09:38:15

The web and mobile app development company which consists of top-edge IT professionals who have years of experience can develop such highly responsive and beneficial mobile applications. You can develop a custom web application for your business, with tailored features to support your business flow and increase sales, by approaching the best app development company. The solution from the firm will have the following features.

**Responsive**

The web applications should be responsive to mobile. It’ll help your customers to access your web app without any barriers. 

**API Integration** 

That should be able to be interrogated with any other third-party web services and service provider’s products. For example, login with the customer’s social account. 

**Reporting and Analytics**

The web applications will provide a complete report and analysis of customer behaviors on the platform.

**Notifications**

The web application has the potential to send notifications to users to get instant attention.

**Security Features**

Ensure the security of your users with multiple security practices and solutions like Server management, Server hardening, DB security, and others.

**In-app Chat and Chatbots**

The web application which contains automated chatbots can seek the attention of the visitors easily. 

**Multiple Payments**

Customers can do payments through the web applications in multiple ways online for their purchases. 

**SEO**

Friendly- Besides all of these features, the web applications are SEO-friendly. So, your customers can reach your web applications by searching the relevant keywords. 

So, check if your app development company is providing these features with the web application. However, it is advisable to ensure the experience and expertise of the [custom web app development company](https://www.uplogictech.com/web-app-development-company) to get a fine outcome.
My questions in the process of migrating to Flutter after React Native
Tags: flutter
Published: 2023-01-02 08:53:11

Hello friends, I have some questions about Flutter and I thought I would get the most accurate information from here. I've been developing with React Native for about 2 years, but some points really started to tire me. I will be glad if I can get answers to my questions below.

1. Can I write backend directly with Dart language?
2. React Native, as you know, gives different views for IOS and Android, I don't want that. I want it to look the same everywhere. Is this possible with Flutter?
3. As you know, React Native is mostly CSS, can I use CSS while using Flutter? Or is there an equivalent technology?
4. Flutter can also be packaged for IOS with Codemagic, is there a more tiring alternative to React Native Expo?
5. Most importantly, I wanted to ask before I start Flutter application hierarchy structure seems a bit more complicated than React Native hierarchy. And I don't want to lie it makes it hard for me to understand.
6. Vs Code is really great, but Gazi teacher uses Android Studio in Google Digital Workshop trainings. Which IDE should you use and what would you recommend?
7. Can it be printed as Flutter Website and the site we print out looks like a Website? So mobile gives air?
8. What does Flutter do better than React Native? What are the pros? For example, the Navigation event or changing the theme color is successful in accessing Native elements?
9. And most importantly, without connecting what I do as a website with Flutter with the application, will the changes I make on the site be reflected in the application? If there is such a thing, great.
Thank you from now.
ChatARKit: ChatGPT programs AR app using natural language alone
Tags: programming, ai, chatgp
Published: 2023-01-02 08:50:17

OpenAI’s ChatGPT dialog AI is optimized for generating texts and answering questions. But initial tests from early December quickly showed that there’s more to the system than just a few neatly worded sentences. Programming code, for example.

ChatARKit – AR app generated by ChatGPT
Developer Bart Trzynadlowski wanted to find out if he could use ChatGPT to develop an AR app that autonomously places digital 3D objects in the environment using only voice commands. He also recognizes the voice commands using an AI model – OpenAI’s Whipser – and then brings them into the JavaScript environment of the ChatARKit app as an AI prompt.

As a result, ChatGPT selects 3D objects from Sketchfab that match the voice command and places them on the desktop or floor as prompted. If you prompt it, ChatGPT even scales and rotates the 3D models. The AI system generates the code for this on its own.

These are some working sample prompts according to Trzynadlowski:

“Place a cube on the nearest plane.”
“Place a spinning cube on the floor.”
“Place a sports car on the table and rotate it 90 degrees.”
“Place a school bus on the nearest plane and make it drive back and forth along the surface.”

According to Trzynadlowski, ChatGPT does not work reliably. For identical commands, the AI model generates very different output and places incorrect JavaScript code lines in the app. Occasionally, ChatGPT turns object descriptions into code identifiers, which means that the 3D models can no longer be retrieved from Sketchfab.

Trzynadlowski makes his ChatGPT AR app available for free as open source on Github.

Generate 3D objects in VR with natural language

For VR, developer Jasmine Roberts recently demonstrated an implementation of OpenAI’s new 3D AI Point-E: like the image AI DALL-E 2, it can generate content based solely on text input. Instead of images, however, Point-E generates 3D point clouds that represent a 3D model. Per generation, Point-E takes only about one to two minutes on a single Nvidia V100 GPU. Roberts’ demo runs in real time.

Point-E is a starting point for OpenAI for further work in text-to-3D synthesis. Google with Dreamfusion or Nvidia with Magic3D also recently introduced text-to-3D systems, which could play an important role in the further spread of 3D content – a fundamental assumption of the metaverse thesis – in the future.
Top 10 resource for mobile development beginner
Tags: mobile, android, ios, flutter
Published: 2023-01-02 08:48:34

   

## 1.  [Coursera](https://www.coursera.org/): 
Coursera offers a wide range of online courses and degree programs in mobile development, including courses on Android app development, iOS app development, and cross-platform development with tools such as React Native and Flutter.
## 2.     [edX](https://www.edx.org/): 
edX is another online learning platform that offers courses on mobile development, including courses on Android app development, iOS app development, and mobile app design.
## 3.     [Udemy](https://www.udemy.com/courses/free/): 
Udemy is a popular online learning platform that offers a wide range of courses on mobile development, including courses on Android app development, iOS app development, and cross-platform development.
## 4.     [Codeacademy](https://www.codecademy.com/): 
Codeacademy is an online platform that offers interactive courses on various programming languages and technologies, including mobile development.
## 5.     [Treehouse](https://teamtreehouse.com): 
Treehouse is an online learning platform that offers courses on mobile development, including courses on Android app development, iOS app development, and cross-platform development.
## 6.     [LinkedIn Learning](https://www.linkedin.com/learning/): 
LinkedIn Learning (formerly known as Lynda.com) is an online learning platform that offers courses on mobile development, including courses on Android app development, iOS app development, and cross-platform development.
## 7.     [SoloLearn](https://www.sololearn.com/): 
SoloLearn is a free mobile app that offers interactive lessons on various programming languages, including Java, C++, and Python, which are commonly used in mobile development.
## 8.     [Pluralsight](https://www.pluralsight.com/): 
Pluralsight is an online learning platform that offers courses on mobile development, including courses on Android app development, iOS app development, and cross-platform development.
## 9.     [YouTube](https://www.youtube.com/): 
YouTube is a great resource for learning mobile development, as there are many educational channels that offer tutorials and lessons on various aspects of mobile app development.
## 10.     Official documentation and resources: 
Finally, don't forget to check out the official documentation and resources provided by the mobile platform or framework you are using. These resources often contain valuable information and guidance on how to get started with mobile development and how to use specific tools and technologies.

### 11. [If you want mobile design to practice better check this one.](https://ahmedonour.gumroad.com/l/FigmaAndroidDesign)

## Follow me for more @ahmed_onour
RSA ile Encryption & Decryption İşlemleri
Published: 2023-01-02 08:39:58

Kısaca RSA bir açık anahtarlı şifreleme algoritmasıdır. 1978’de **Ron Rivest**, **Adi Shamir** ve **Leonard Adleman** tarafından ortaya çıkarılmıştır. İsmini de bu kişilerin baş harflerinden almıştır.

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

RSA üretmek için **public** ve **private** olmak üzere iki tane key kullanılır. Herkes tarafından bilinen public key ile mesaj şifrelenir. Şifreli mesajı ancak private key’e sahip olan kullanıcı açabilmektedir.


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

Öncelikle Bob bir adet private ve public key üretir ve public key’i Alice’e gönderir. Alice elinde bulunan public key ile **“Hello Bob!”** mesajını şifreleyerek Bob’a gönderir. Bob ise elinde bulunan private key ile bu mesajı çözerek okur. Böylece Bob, mesajın Alice’den hiçbir değişikliğe uğramadan geldiğine emin olur.


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

##Simetrik Şifreleme

> Kriptografi teknikleri ve şifreleme algoritmaları arasında en eski ve en bilinen yöntemlerden biridir. Mesajları şifrelemek için sadece bir gizli anahtar (private key) ‘ın yeterli olduğu şifreleme yöntemidir. Şifreleme yapan taraf ile şifreyi çözecek tarafın aynı private key’i bilmesi yeterlidir. İşlem süresinin hızlı olması avantajları arasındadır.


![Asymmetric](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vvfvno85lc9k89f96cf.png)

##Asimetrik Şifreleme
Şifreleme ve çözme işlemlerinde farklı key’lerin kullanıldığı bir algoritmadır. Key’lerden biri ile (public) şifreleme yapılır ve diğeri ile (private) şifre çözme işlemi yapılmaktadır. Web sitelerinin kullanmış olduğu TLS (SSL’in gelişmiş hali) güvenli mail alış verişini sağlayan PGP (Pretty Good Privacy) protokolü bu şifreleme türünü kullanmaktadır.

##Dijital İmza (Digital Signature Algorithm)
RSA kullanım alanlarından biri de imzalama işlemidir.

![rsa-sign](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/em9lf5ftpeaqayvvb8fi.png)

Alice elinde bulunan data ve **private key** ile bir imza oluşturur. Daha sonra oluşturduğu bu imza ve data’yı Bob’a gönderir.

![rsa-verify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wl9pzm03ze5xvnk5dty.png)

Bob ise kendisine gelen data ve imza ile birlikte elinde bulunan **public key**’i de kullanarak gelen mesajı doğrulama **(verify)** işlemi yapar. Ve mesajın hiçbir değişime uğramadan Alice’den geldiğine emin olur.

![rsa-reject](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq6wt4ndh3lhfgvpsyzo.png)

Mesaj network veya taşındığı diğer katmanda herhangi bir değişikliğe uğrarsa imza bozulacağı için mesaj Bob tarafından doğrulanmaz ve şüpheli durum (saldırı) ortaya çıkar.

Daha sonra bu konu ile ilgili kod örnekleri paylaşacağım. Lütfen takipte kalın.

Hoşçakalın..