teleren/devto huggingface dataset:
Jak zoptymalizować React Context?
Tags: react, context, typescript, javascript
Published: 2022-02-20 13:28:01

Przetłumaczona wersja [artykułu](https://kentcdodds.com/blog/how-to-optimize-your-context-value) [Kenta C. Doddsa] (https://kentcdodds.com/about)

> NOTKA: Zanim zaczniemy, chciałbym mieć pewność, że wiesz, kiedy Twój kontekst wymaga optymalizacji:

> 1. Wartości często się zmieniają.
> 2. Twój kontekst ma wielu konsumentów.
> 3. Zawracasz sobie głowę używaniem `React.memo`.
> 4. Po zmierzeniu wydajności, dochodzisz do wniosku, że potrzebujesz optymalizacji.

> Jeśli te punkty opisują Twoją sytuację, czytaj dalej (nie przegap alternatywnego rozwiązania, które prawdopodobnie jest lepsze). W rzeczywistości jest ono znacznie lepsze, przerobiłem nawet ten post, by to pokazać. Jeśli chcesz zobaczyć moją poprzednią rekomendację, zajrzyj [tutaj](https://github.com/kentcdodds/kentcdodds.com/blob/319db97260078ea4c263e75166f05e2cea21ccd1/content/blog/how-to-optimize-your-context-value/index.md).

> Uwierz mi, jeśli zamierzasz to zrobić tylko dlatego, że uważasz swój kod za zbyt wolny, nie przejmuj się. Nie żartuję. React jest naprawdę szybki, a dodanie złożoności w imię wydajności, gdy ta nie jest taka zła, po prostu marnuje Twój "budżet złożoności".

Najprostszym rozwiązaniem, by zoptymalizować kontekst jest użycie hooka `useReducer` zamiast `useState` oraz umieszczenie stanu w jednym dostawcy, a funkcji `dispatch` w drugim:

{% codesandbox ynn88nx9x %}

Nie tylko nie musisz używać w tym przypadku `useMemo`, ale również unikasz ponownego renderowania komponentów używających kontekstu:

![kliknięcie "force render" trzy razy i "Increment count" dwa](	https://res.cloudinary.com/kentcdodds-com/image/upload/f_auto,q_auto,dpr_2.0/v1625032869/kentcdodds.com/content/blog/how-to-optimize-your-context-value/split-contexts.gif)

Działa to tak samo, jak w przypadku mojego oryginalnego rozwiązania z `useMemo`, z wyjątkiem tego, że kontekst komponentu `<Counter />` nie jest aktualizowany, przez co unikamy całkowicie ponownego renderowania.

Osobiście uważam, że jest to bardziej skomplikowane API, niż mogłoby być, dlatego w większości przypadków nie przejmowałbym się optymalizacją kontekstu. Ale jeśli naprawdę tego potrzebujesz, zrób to tak, by jak najprościej obejść problem.

## Rozdzielenie stanu i `dispatch` bywa irytujące

Niektórzy uważają to za denerwujące:

```js
const state = useCountState()
const dispatch = useCountDispatch()
```

Mówią: "nie można tego zrobić po prostu tak?"

```js
const [state, dispatch] = useCount()
```

Oczywiście, że można:

```js
function useCount() {
  return [useCountState(), useCountDispatch()]
}
```

Pamiętaj tylko, że każdy komponent używający tego, traci korzyści związane z wydajnością, jeśli tak naprawdę potrzebuje jednej z tych rzeczy. 

Sprawdź również: [React Context - jak efektywnie go używać?](https://dev.to/bartek532/react-context-jak-efektywnie-go-uzywac-41l)
How to Create a Small Web App with SSI Web Service
Tags: interpreter, prolog, web, apps
Published: 2022-02-20 13:21:50

---
title: How to Create a Small Web App with SSI Web Service
published: true
description: State Saving Interpreter is a Prolog interpreter that can run web apps
tags: Interpreter, Prolog, web, apps
//cover_image: <img width="333" alt="Screen Shot 2022-02-21 at 12 12 57 am" src="https://user-images.githubusercontent.com/15845542/154844325-dfdd305f-e1c9-4077-86fe-c167562c4062.png">

---

I will break down the steps to create a web app with State Saving Interpreter Web Service, an interpreter written in Prolog that runs List Prolog.

1. Convert the Prolog algorithm to List Prolog

I installed Prolog-to-List-Prolog from https://github.com/luciangreen/Prolog-to-List-Prolog.

In a new file, test1.pl in the Prolog-to-List-Prolog folder, I entered:

cultivate_person(A,B).
cultivate_person(A,B):-writeln("Do you create the person?"),read_string(A),writeln("Do you switch them on to existing for the rest of their life?"),read_string(B).

Then:
['p2lpconverter.pl'].
['../listprologinterpreter/listprolog'].
p2lpconverter(A),pp0(A,B),writeln1(B).

The output is:

"[
[[n,cultivate_person],[[v,a],[v,b]]],
[[n,cultivate_person],[[v,a],[v,b]],"":-"",
[
	[[n,writeln],[""Do you create the person?""]],
	[[n,read_string],[[v,a]]],
	[[n,writeln],[""Do you switch them on to existing for the rest of their life?""]],
	[[n,read_string],[[v,b]]]
]]
]"

2. Modify ssi-api.pl and Run Application

I installed SSI from https://github.com/luciangreen/SSI.

In a new file test1.pl in SSI I entered:

test1([[n,cultivate_person],[[v,a],[v,b]]],

        [[[n,cultivate_person],[[t,string],[t,string]]]],
        [[[n,cultivate_person],[output,output]]],


[[[n,cultivate_person],[[v,a],[v,b]],":-",
[
	[[n,writeln],["Do you create the person?"]],
	[[n,read_string],[[v,a]]],
	[[n,writeln],["Do you switch them on to existing for the rest of their life?"]],
	[[n,read_string],[[v,b]]]
]]]).

This includes the output from the first step and optional type and mode statements.  Note: two double quotes have been replaced with one.  Also, the query was cut from within the brackets as you can see.

In ssi-api.pl, I changed:

test_open_types_cases(4,Query,Types,Modes,Functions),
international_lucianpl([lang,"en"],Debug,Query,Functions,Result1),

to:
test1(Query,Types,Modes,Functions),
international_lucianpl([lang,"en"],Debug,Query,Types,Modes,Functions,_Result),


Then:
[ssi].
[test1].
ssi_server(8000).

In my web browser, I visited my localhost at http://127.0.0.1:8000/.

And here is an image of the first page of the web app in the browser:
(It reads:
http://127.0.0.1:8000/
Do you create the person?
[Text Box]
Submit Button)

<img width="333" alt="Screen Shot 2022-02-21 at 12 12 57 am" src="https://user-images.githubusercontent.com/15845542/154844325-dfdd305f-e1c9-4077-86fe-c167562c4062.png">

Author: Lucian Green
SSI: https://github.com/luciangreen/SSI
RIPTIDE HACKERHOUSE BERLIN
Tags: hackathon, solana, berlin, eventdriven
Published: 2022-02-20 13:16:21

Hello developers!🦄 

Next week-end in Berlin there will be an event resembling a SOLANA RIPTIDE hackerhouse. It is free to join, maybe having online participation. 

Here I attach the link [](https://solana.com/events/riptide-berlin). 

Thank you a lot for the support and hope you all have a nice Sunday.
Gold Price Today in Amritsar
Published: 2022-02-20 13:10:01

Today Gold Price in Amritsar: Goldenpricetoday is the best portal of India where you’ll get live updates & gold rate in Amritsar. We update Today Gold Price in Amritsar every hour of 1 gram as well as 10 gram. Here you’ll also get detailed 22K and 24K Gold prices of the last 10 days with proper charts which are verified & updated.

There are five different variants of gold but the people are interested only in three variants which are 22K, 24K, and 18K. So let’s see the live today gold price in Amritsar with the help of different charts & graphs.

So, the below-mentioned table is of 22 Carat Gold Price in Amritsar. Actually, 22 Carat gold is nothing but it’s 916 KDM gold.

[Continue Reading...](https://goldenpricetoday.com/today-gold-price-in-amritsar/)
Managing service accounts with Terraform for GCP
Tags: terraform, gcp, security, devops
Published: 2022-02-20 12:37:31

[Terraform](https://www.terraform.io/) is currently the go-to tool for managing infrastructure through version control. There is somewhat of a learning curve but then it is fairly straightforward to provision new infrastructure. Being able to create a dependency graph and provide details about various components involved is a great way for explaining the nuances of an existing infrastructure to new engineers. Being able to express the infrastructure via code also helps with dissemination of information across multiple engineering teams and avoids having to over document things.

One of the challenges that I have come across when working with Google Cloud Platform (GCP) is managing service accounts. Creation of service accounts is straightforward but managing keys is a different matter altogether especially for cases where you use the keys in different services. 

When you create a new JSON key for service accounts, you can download the key directly from the UI and you can also manage it via Terraform (TF). If you go with the former approach, you will have to manage the keys yourself especially around who has access. With TF, the keys are re-generated every time you run `terraform apply` and you would not have access to them to share with services.

```terraform
resource "google_service_account" "service_account" {
  account_id   = "service-account-id"
  display_name = "Service Account"
}
```

To deal with this problem of re-generation and to have access, I went with a hybrid approach of using TF to [manage service accounts](https://registry.terraform.io/providers/hashicorp/google/latest/docs/resources/google_service_account) and then manage the keys myself. After the accounts are created, I use the Google IAM section to generate JSON key files for the service accounts that were just generated. These keys are then stored in the same TF state bucket which is private (by default) but at a location that is not mapped in the TF files. The location would be at a path something like `/keys/sa/svc-microservice1.json` and the hierarchy can be of any classification that makes sense for the team.

A potential classification can take the form of service names and then each folder with have all of the service account keys used by that service. There could also be a separate folder for shared keys. The folder hierarchy does not actually matter as the storage bucket does not have a concept of folder. The path is actually the name of the file.

```bash
+/
+--keys
   +--sa
      +--microservice1
         +--svc-db.json
         +--svc-storage.json
      +--microservice2
         +--svc-tasks.json
         +--svc-storage.json
      +--shared
         +--svc-build.json
```

As the access to the TF state bucket is limited (private) and an automatic audit log is maintained by GCP about who accessed the files, it is relatively safe to maintain the service account key files in the bucket. It also makes it easier for anyone else apart from you to find the keys when needed especially when you are not around.
Using Flutter Custom Painter for creating Logos
Tags: flutter, fluttercustompainter, flutterui, flutterdesign
Published: 2022-02-20 12:30:24

**For beginners...**
Flutter is well known for giving developers the control over each pixel. It can be used to create amazing shapes and pretty much any UI design from our imagination.
Flutter provides us with the `CustomPaint` widget, to give us this capability to draw anything in its canvas.

**Now coming back to the post,**
_I replicated LG's famous logo using Custom Painter._ In my free time I like to tinker with Flutter's Custom Painter. Sharing one such creation of mine:

```dart
import 'package:flutter/material.dart';
import 'dart:math' as math;

class LG extends StatelessWidget {
  const LG({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: Logo(context),
      size: const Size(150.0, 150.0),
    );
  }
}

class Logo extends CustomPainter {
  BuildContext context;
  Logo(this.context);
  @override
  void paint(Canvas canvas, Size size) {
    final red = Paint()..color = const Color(0xFF990033);
    final whiteFilled = Paint()..color = Colors.white;
    final white = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 12;

    //the circle
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 125, red);

    //the G and L in the logo
    final path = Path()
      ..moveTo((size.width / 1.25), (size.height / 2))
      ..arcTo(
          Offset((size.width / 2 - 100), (size.height / 2 - 100)) &
              const Size(200, 200),
          0,
          math.pi * 1.5,
          true)
      ..moveTo(size.width / 2 + 106, size.height / 2)
      ..lineTo(size.width / 2 + 30, size.height / 2)
      ..moveTo(size.width / 2, size.height / 2 - 50)
      ..lineTo(size.width / 2, size.height / 2 + 50)
      ..moveTo(size.width / 2 - 6, size.height / 2 + 50)
      ..lineTo(size.width / 2 + 25, size.height / 2 + 50)
      ..close();
    canvas.drawPath(path, white);

    //the white circle in the logo
    final circle = Path()
      ..arcTo(
          Offset(size.width / 2 - 60, size.height / 2 - 45) &
              const Size(30, 30),
          0,
          math.pi * 1.9999999,
          true)
      ..close();
    canvas.drawPath(circle, whiteFilled);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}
```
The output will be this:
![LG Logo using Flutter CustomPainter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dah6yz089zs7ok0793qb.png)
You can visit this [site](https://fluttercustompainterlogos.netlify.app/#/) for viewing such creations of mine 😂.
You can also visit this [GitHub repo](https://github.com/danger-ahead/flutter_custom_painter_logos) for the source code. Do give the repo a ✨ if you like my work.
Flutter Ecommerce app 🛒
Tags: flutterdev, ecommerceapp, mobileapp, androidapp
Published: 2022-02-20 12:28:24

---
title: Flutter Ecommerce app 🛒
published: true
description: Shoppr is an e-commerce app build in Flutter. This app contains 20 screens for a production ready e-commerce applications.
tags: #flutterdev #ecommerceapp #mobileapp #androidapp
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te2eqdw4p1yhx3q9xpde.png
---

#Shoppr eCommerce App in Flutter

Shoppr is an e-commerce app build in Flutter (an open source framework by Google). This app contains many screens (listed below) for a production ready e-commerce applications.

##App Features

- Build with latest version of Flutter and Dart
- Compatible with Android and iOS
- Easy to use UI and beautiful design
- Internationalization support (with 5 languages, you can also add your own)
- Dark and Light theme support
- Login and Registration screens
- Used Riverpod (state management) features
- Free icons

## Screens Included

1. Splash Screen
2. Login Screen
3. Registration Screen
4. Home tab
5. Catalogue tab
6. Profile tab
7. Cart tab
8. Filter Page
9. Custom Filter List Page
10. Product Details Page
11. Reviews page
12. Add Review page
13. Order History Page
14. Order Details Page
15. Address List Page
16. Add New Address Page
17. Personal Info Page
18. Cart Page

## Used Frameworks & Libraries

- Flutter - >=2.15.1 <3.0.0
- cupertino_icons: ^1.0.2
- flex_color_scheme: ^4.2.0
- flutter_hooks: ^0.18.2
- flutter_rating_bar: ^4.0.0
- gap: ^2.0.0
- getwidget: ^2.0.4
- go_router: ^3.0.1
- hooks_riverpod: ^1.0.3
- image_picker: ^0.8.4+6
- shared_preferences: ^2.0.13
- timelines: ^0.1.0

## Source code

Get the full source code of this app at [Gumroad](https://vigowebs.gumroad.com/l/shoppr-flutter)
20/2 - software birthday week
Published: 2022-02-20 12:21:08

Lots of (nerdy) birthdays this week. 

---

[.net is 20 years old](https://devblogs.microsoft.com/dotnet/happy-20th-anniversary-net/) :cake: 

20 years ago I was working in a University, we picked up .net fairly quickly and due to the nature of my workload (i.e.. it was a bit light at the time) I picked up and ran with c#, it was a lovely freedom from all the scary pointers and memory management of my c++ work. 

We used c# quite heavily in system code to manage student accounts, in multiple systems, I have a fondness for Microsoft Message Queuing and all serialization we where doing (maybe this is where the uSync seed was born).

I also wrote an FTP server in early .net (1.1 I think) - Occasionally I look back and think how much easier that would be now with proper sockets and net libraries ! 

---

[Umbraco is 17 years old](https://umbraco.com/about-us/umbraco-s-birthday/). :tada:

I've probably only been using Umbraco for about 11 years now. We just missed out on using it for the Liverpool.gov.uk major site redesign we did, but we started using it for all the other projects. and then we moved liverpool.gov.uk over to it. 

My first package was the [local gov starter kit](https://our.umbraco.com/packages/starter-kits/localgov-starter-kit/).

--- 

I wrote up the little 'hack' if you want to [add your package to the list of installed packages in Umbraco 9](https://dev.to/kevinjump/put-your-package-in-the-installed-package-list-in-umbraco-9-11cg)

---

This week I've been putting finishing touches to some uSync releases, because next week is uSync's 9th birthday it seemed better to leave the release till then. (nothing super major, just a nice anniversary). 

--- 

Its been quite windy in the UK this week, but its a good time to take a look at the [energy stats for the UK National grid](https://grid.iamkate.com/), We are making quite a bit of power from renewables
Put your package in the installed package list in Umbraco 9
Tags: umbraco
Published: 2022-02-20 12:15:57

In Umbraco v8 if you installed your package via the package manager it would appear in the list of installed packages in the packages dashboard. 

in v9 all packages are installed via nuget. but wait some packages still appear in the installed package list ? 

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

how do they do that ? 

well the short answer is package migrations. 

## Package Migration

if your package has a package migration it will appear in the list. So even if you don't have anything you need to do in a migration you can put a blank one in to get into the list 

### uSync's basic package migration 

```cs
public class uSyncMigrationPlan : PackageMigrationPlan
{
    public uSyncMigrationPlan() :
        base(uSync.PackageName)
    { }

    protected override void DefinePlan()
    {
        To<SetupuSync>(new Guid("dd231cf5-5560-4f42-85a0-0ff8d8f37eb3"));
    }
}

public class SetupuSync : PackageMigrationBase
{
    public SetupuSync(
        IPackagingService packagingService, 
        IMediaService mediaService, 
        MediaFileManager mediaFileManager, 
        MediaUrlGeneratorCollection mediaUrlGenerators, 
        IShortStringHelper shortStringHelper, 
        IContentTypeBaseServiceProvider contentTypeBaseServiceProvider,
        IMigrationContext context) 
        : base(packagingService, mediaService, mediaFileManager, mediaUrlGenerators, shortStringHelper, contentTypeBaseServiceProvider, context)
    {
    }

    protected override void Migrate()
    {
        // we don't actually need to do anything, but this means we end up
        // on the list of installed packages. 
    }
}
```

here you just need a unique GUid value for your package 
and a package name _(uSync already had the name in a constant uSync.PackageName)_

## That's it
you don't need to register your package migration, it is auto discovered by Umbraco and the name will mean your package will appear in the backoffice
How to use Jsonp in your  project.
Tags: webdev, javascript, jsonp, json
Published: 2022-02-20 11:45:24

The first time I heard about JSONP was when I recieved a technical assessment for a high end company. 
When I saw it, I immediately thought: what is it? why we use it? how does it work? and how do I use JSONP in my project.
So here I will share the answer to all those questions in one place!


## What is JSONP?


JSONP (JSON with Padding) is a **javascript object notation** it´s used to load data from the server using a script tag `<script>` rather than XMLHttpRequest. 


## Why we use it?

The short answer is that it´s used to avoid Cross-Origin-Resource-Policy issues.
While corss-domain policy blocks accesssing files, it allows accessing scripts from another domain. JSONP uses this to access data through a script tag.

To achieve that, JSONP objects come wrapped in a callback function.

```js

//JSON Example
{"Name": "Foo", "Id": 1234, "Rank": 7};

//JSONP Example - In this you can call a function
functionCall({"Name": "Foo", "Id": 1234, "Rank": 7});

```

## How does it work?


1. The client (typically JavaScript) must provide a callback function to which the data is later transferred, along with any other data the client wants to send.

2. The data transfer is called up on the client by formulating a script call. The URL of the web service on the server is specified, supplemented by the name of the callback function. The finished "script" tag must then be injected into the DOM (Domain Object Model). This process is called "script tag injection" and triggers the data transfer.

3. The web service on the server side takes the data, extracts the name of the callback function and uses it to bracket the server data with an appropriate function call when it is sent back .

4. The browser receives the server response back in the form of a script and immediately begins executing the script. Since the script consists of a function call, the "callback" function is called and this receives the data as a parameter.

## How do I use JSONP in my project?

Javascript:

```ts

async () => {
    const jsonpCallback = "<CALLBACK_FUNCTION_NAME>";
    const response = await fetchJsonp(`<API_URL>`, {
      jsonpCallback,
    });
    const data = await response.json();
    return data;
  }

```

##  Finally, 

I hope you found this article helpful,
قیمت بیت کوین به کمتر از ۳۹۰۰۰ دلار کاهش یافت [بازنشر، میهن بلاکچین]

Tags: bitcoin, cryptocurrency
Published: 2022-02-20 11:40:01

قیمت بیت کوین بزرگ‌ترین رمز ارز بازار اکنون با حدود ۴٪ کاهش قیمت نسبت به روز گذشته به محدوده ۳۸٬۶۰۰ دلار وارد شده است.

به گزارش میهن بلاکچین، بازار رمز ارزها در صبح یکشنبه شاهد نوسان قیمت بیت کوین و آلتکوین‌ها است. قیمت ارز دیجیتال BTC اکنون به سطح ۱۷ روز گذشته خود بازگشته است. قیمت اتریوم نیز با ۶.۳۵٪ کاهش نسبت به روز قبل به سطح ۲،۶۴۲ دلار رسیده است.

رمز ارزهای برتر مانند BNB و کاردانو نیز هر کدام با ۶٪ و ۷٪ کاهش قیمت به سطوح ۳۸۰ دلار و ۰.۹۴ دلار کاهش یافته‌اند. این در حالیست که قیمت ریپل، تقریبا بدون تغییر در سطح ۰.۷۹ دلار باقی مانده است.
رقبای بزرگ اتریوم مانند سولانا، آوالانچ، لونا و پولکادات نیز با کاهش قیمت شدید همراه بوده‌اند. قیمت سولانا با ۶.۴٪ کاهش به ۸۶ دلار رسیده است. رمز ارز AVAX در زمان نگارش این خبر به قیمت ۸۰.۹ دلار خرید و فروش می‌شود. لونا رمز ارز بومی شبکه ترا با ۹٪ افت قیمت به ۴۷.۸ دلار رسیده است و ارز دیجیتال DOT نیز با ۶.۷٪ افت ارزش به قیمت ۱۶.۹۵ دلار خرید و فروش می‌شود.

اطلاعات سایت کوین‌گلس نشان می‌دهد در ۴ ساعت گذشته در مجموع ۹۷ میلیون دلار قرارداد آتی لیکویید شده است که از این مقدار ۹۳.۲۱٪ آن متعلق به قراردادهای خرید استقراضی (Long) بوده است. ارزش بازار رمز ارزها اکنون با ۴.۵٪ کاهش به ۱.۸۲۷ تریلیون دلار رسیده است و همچنین سلطه بیت کوین بر بازار بر اساس اطلاعات سایت کوین‌گکو ۴۰.۳٪ گزارش شده است.

دوج کوین و شیبا اینو دو میم کوین محبوب در بازار رمزارزها نیز با کاهش ارزش مواجه شده‌اند. قیمت دوج کوین با ۵.۶٪ کاهش به ۰.۱۴ دلار رسیده است. ارز دیجیتال شیبا با ریزش شدید ۱۱.۸٪ نسبت به روز گذشته به قیمت ۰.۰۰۰۰۲۵ دلار معامله می‌شود.
[https://khabarpoof.ir/btc-bitcoin-slipped-below-39500/](https://khabarpoof.ir/btc-bitcoin-slipped-below-39500/)
How To Use *ngIf else In Angular 2+
Tags: angular, typescript
Published: 2022-02-20 10:52:03

## Use `*ngIf` Directive with `ng-template` associated with reference `#refernece_name` 

```
<section *ngIf="isAllowed else otherSection">
   Allowed Section
</section>
<ng-template #otherSection>
  <section>
    Other Section 
  </section>
</ng-template> 
```
Happy Birthday Python
Tags: python, webdev
Published: 2022-02-20 10:50:10


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

🎊🎂 PYTHON 🎂🎉

Celebrate 31th birthday of the most popular programming language with us! Grab Python Flashcards Game 10% OFF!

Order your deck now: https://summonthejson.com/products/summon-the-json-python-deck