teleren/devto huggingface dataset:
Episode 23/03: Service Patterns, tRPC in Angular, and much more...
Tags: angular, webdev, javascript, programming
Published: 2023-01-23 21:05:27

Manfred Steyer took a deep dive into Angular Services.

A bunch of excellent articles from Enea Jahollari (pure pipes), Thomas Laforge (functional router guards), and Robin Götz (structural directives series) were released.

And Kevin Kreuzer shows tRPC for Angular.

{% embed https://youtu.be/lWqFFv_vnTE %}

## Patterns for Custom Standalone APIs in Angular

Manfred Steyer, known for his work on Micro Frontends, wrote a deep-dive article about providing services and design patterns. The focus lies on library developers.

He showcases how to make sure developers can only provide services on the root scope. Also, how services provided in lazy-loaded scopes can interact with their root-scoped services or even delegate to them.

Although application developers will need them rarely, it is still good to know what is possible.

{% embed https://www.angulararchitects.io/aktuelles/patterns-for-custom-standalone-apis-in-angular/ %}

## Advanced Articles

### Async pipe is not pure

Enea Jahollair explained the inner workings of the async pipe by implementing a prototype.

{% embed https://dev.to/this-is-angular/async-pipe-is-not-pure-5h6p %}

### Everything you need to know about route Guard in Angular

Thomas Laforge wrote about the different router guards and that you should start to move to the functional types because the services will be deprecated in 15.2.

{% embed https://dev.to/this-is-angular/everything-you-need-to-know-about-route-guard-in-angular-2hkn %}

### Mastering Angular Structural Directives - It’s all about the context

Robin Götz published his second article in his series about structural directives.

{% embed https://dev.to/this-is-angular/mastering-angular-structural-directives-its-all-about-the-context-5hai %}

## Kevin Kreuzer: tRPC & Angular

If your stack runs entirely on TypeScript, you should definitely take a look into tRPC. It gives you type safety for your backend calls. Very similar to OpenAPI or GraphQL but without a code generator.

Kevin Kreutzer showed on Twitch how to integrate tRPC in Angular. A summarized version is available on YouTube.

{% embed https://youtu.be/gp1db5xKqck %}

## Miscellaneous

The Angular Developer Survey is open. So please provide feedback. 

{% embed https://google.qualtrics.com/jfe/form/SV_czN8BZO9GHXnJJ4 %}

The CfP for the Angular Tiny is also open. That's a free, remote conference lasting one day. You can apply until the 5th of February.

{% embed https://twitter.com/adyngom/status/1617145182993924096 %}

## New Releases

Ionic had a minor version upgrade to 6.5.

[Release Notes](https://github.com/ionic-team/ionic-framework/releases/tag/v6.5.0)

---

Spectator, a testing library, had a major upgrade to 14. 

[Release Notes](https://github.com/ngneat/spectator/blob/master/CHANGELOG.md)
Final Project walkthrough P.1
Tags: react, ruby, javascript
Published: 2023-01-24 19:58:25

At the end of the bootcamp we are to create an app as our capstone project. With the ability to pick whatever topic you want to work on, it gives the students a chance to really explore coding with a something they have a connection to. This has a similar feel to our previous group project but this time working solo. However no matter how much time you are given it will never feel like enough. 

Armed with the knowledge of a ruby backend and react as the face, it is a challenge nonetheless. Working with visible milestones helped pace out the completion of the project. This blog will talk about the set up of the backend of ruby and the implementation of a log-in function. 

The backend was fairly simple as the vision for this application is a blog with the flair of Instagram/Pinterest. The app is to be centered around interior design and decor and allowing users to post and share photos they found on the internet or of their own design/curation. The unique feature is to be that users are encourage to highlight pieces in the photo so that others who are curious can identify and look for the piece if they want to it. 

So the app will have Users, Posts, Likes, Comments, and Descriptions on the back end. Utilizing a template to set up the app made it fairly simple. While an error did occur early on with no resolution requiring a hard restart, it did lead to a learning that while copy and pasting of code is not bad, it can easily lead to a domino effect of issues down the line. 

Another learning was understanding how your tables talk to each other. How does an user interact with a post via their likes or their comments. how does it look in the back end. what belongs to what or what only has one of? understanding this concept will lead to a strong foundation that will not need to be modified, leading to potential issues. 

After triple or quadruple checking your tables, you can then finally run the following commands: 

`rails db:create
rails db:migrate
rails db:seed`

Seeing no errors means that you have a working database and now is onto connecting the tables together and giving them functionality. This will be for the next part of the final project walkthrough.
Flutter(IOS) app concern in the External Link Account API
Tags: flutter, ios, xcode
Published: 2023-01-24 12:06:34

0


I've submitted my app for review on App Store. It got rejected and they replied me with this explanation.

Your "reader" app uses the External Link Account entitlement to link out for account creation and management but does not meet all requirements for using this entitlement.

Specifically, we found that your app does not meet the following requirement(s):

Your app does not use the External Link Account API to populate the modal sheet before every instance of linking out for account creation and management.
These requirements help protect user privacy and security, prevent scams and fraudulent activity, and maintain the overall quality of the experience when leaving the app to create or manage accounts.

Next Steps

It would be appropriate to revise your app to address the issues identified above. Make sure it meets all other requirements for apps using the External Link Account entitlement before resubmitting for review.

Resources

Learn more about the StoreKit External Link Account entitlement on Apple Developer.

Learn more about requirements for "reader" apps in App Store Review Guideline 3.1.3(a).

Requesting help in understanding and resolving this.

I tried every solution and configuration which they have recommended, I resubmitted the app and again got rejected.

On their official website there are two methods: canOpen(popup model for confirmation that you're about leave the app) and open(to open the link in the browser). What they are saying that if your app is redirecting to some link, it should open a confirmation popup model and then on confirmation, it should move forward.

But I didn't understand where these methods are defined or where can I get any sample or demo app.
Optimizing Angular Unit Tests for Faster Execution ⏳⏰
Tags: angular, jasmine, testing, karma
Published: 2023-01-25 05:41:22

In this Medium article, I share my experience and tips on how to optimize Angular unit tests for faster execution. I  present different strategies for optimizing unit tests, such as reducing the number of dependencies, mocking services and using the TestBed utility. 
This article is a must-read for developers working with Angular and looking to improve the performance of their unit tests.

Medium link: https://levelup.gitconnected.com/optimizing-angular-unit-tests-for-faster-execution-70c7adda6b21
State management thoughts...
Tags: react, discuss
Published: 2023-01-25 09:57:31

Every now and then when I'm thinking about managing state in react applications I end up, asking myself the same questions over and over again:

- Is there missing something or am I just using it wrong?
- How do I reuse reducer-logic?
- Is there a way to apply a reducer on the fly to new objects?
- How do I manage relationships (1:n) between objects without putting all of them into the same bucket/reducer ending up with crazy, unreadable update logic?
- How to deal with objects, associated with more than one object (n:m)?

To be more precise let's assume the following data-model:

> task-lists → tasks → comments → quick-reactions
> threads → comments → quick-reactions
> activities → (task-list|task|thread|comment)

A naive approach would end up having three deeply nested objects with a different reducer managing updates each.

The reducers will operate on the data in an immutable way of course, so when I add a task the task-list can properly re-render. With a new comment, a task or thread is able to reflect the changes immediately an so on. So everything is fine here!

Drawbacks:

1. Update logic is ugly as hell: Just adding a quick-reaction to a comment would lead to apply updates all the way up to task-lists. **→ breaks readable/maintainable code (to me)**
2. Due to this "update-issue" it's difficult to extract and reuse reducer logic like the quick-reaction, or even the comments-logic at all. **→ breaks DRY**
3. Assuming to have a (totally decoupled) list of activities rendered besides the tasks: It's nearly impossible to for example a change on a task made here, being reflected in the "original" task-list (in a nice way without "hacking" it...). **→ breaks single-source-of-truth**

On the other hand: When thinking about having a reducer for every single entity each and somehow managing their relationships by hand this feels very much like reinventing the wheel and implementing a lightweight client-side RDBMS.

Always thinking of a way to somehow apply different reducers to several parts of an object. Combined with the option to just subscribe to specific parts. This would solve 1. + 2. at least...

How do you cope with these problems? Am I missing something? Do I over-complicate things?

✌🏻
What NOT to do as a developer
Tags: programming, discuss, community, motivation
Published: 2023-01-25 10:40:00

_The following views were expressed by a member of our [Codacy Community](https://community.codacy.com/)_

Before I came to the industry side of the world, I was an academic. I was focused on computer science research (with a special love for software quality) and on teaching students at the university.

From my years in academia, I was able to determine patterns in students when they were writing code. I saw the same patterns from junior to senior developers at different companies. Some of those patterns might be hindering your performance, so let’s take a look at what not to do as a developer:

- 
**Jumping into programming right away.** Before writing your first lines of code, think about the problem and the proper solution. It might help brainstorm on a piece of paper!


- 
**Not updating your knowledge.** Programming languages, frameworks, technologies, and techniques change every day. So you need to keep yourself updated and never stop learning.


- 
**Forgetting edge cases.** Even if your code seems to be working and you added some tests, don’t forget to check for edge cases. It depends on the solution you are working on, but it might be negative numbers, empty strings, different input types, and everything else in between.


- 
**Not checking performance and complexity.** Most of the time, there are better and simpler ways to go about a particular solution and piece of code. So always check the complexity of your code and if you can improve it. I discussed the Big-O notation in a previous post, so give it a read.


- 
**Not reviewing your code.** Always review your code, both manually and automatically. With code reviews, your team can find issues early on, share knowledge, distribute ownership, and standardize development practices, among many other benefits. Plus, static code analysis tools like Codacy Quality can effectively reduce heavy lifting and tedious parts of the code review process.


Free to share other things developers should not do 👇
How to toonify yourself
Published: 2023-01-25 21:58:41



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

Artificial intelligence is rapidly advancing, and it is now possible to utilize it to create a cartoon version of oneself. One can visit the website https://huggingface.co/spaces/PKUWilliamYang/VToonify to experiment with this technology. However, it should be noted that the server may be overwhelmed, leading to difficulties in accessing the video feature.

To overcome this issue, one can use the colab link and should first convert the video to the .mov format using the following command, which requires the installation of ffmpeg on one's computer:

`ffmpeg -i <YOURVIDEO> -c:v libx264 -profile:v main -pix_fmt yuv420p -s 1280x720 -b:v 9710k -r 30 -g 30 -keyint_min 30 -c:a aac -ac 1 -ar 48000 -b:a 242k -strict -2 <OUTPUTNAME>.mov`

Here is the link to the google colab page: https://colab.research.google.com/github/williamyang1991/VToonify/blob/master/notebooks/inference_playground.ipynb

You should execute the necessary steps, including uploading the video and rescaling it.

To download the resulting video, the traditional right-click method may not work. Instead, one must use the Chrome Developer Console by pressing cmd+shift+c and clicking on the video element to find the path, which will be in the format of "temp/output9f832f8huh". 

Go to sidebar on the left with files
click .. to go to parent folder, and then open folder temp and the output file, click the dots to open menu to download it

Now mix it with original audio
`ffmpeg -i <originalvideo>.mov -i <toonify-video>.mov -c:a copy -c:v copy -map 0:a -map 1:v -y <outputfile>.mov`
Routing with Rails
Tags: ruby, rails, codenewbie, webdev
Published: 2023-01-26 07:02:00

**Routing:**
When you go out to a restaurant you place an order with your waiter, your waiter then puts that order in, and the kitchen prepares your order. Once the kitchen is done preparing your order, the waiter brings your order to you. This concept applies similarly when a client utilizes the internet. A client makes a request to the server(backend) and the server returns data back to the client(frontend).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykzn040e3sr01kj6i9cl.PNG)  
**Routing with Rails:**
Ruby on rails allows programmers to use the 7 different routes to execute the different action methods mapped to the object within the app>controllers.rb. Custom routing are created in config>routes.rb where resources also are used.

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

- Custom Routing:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il33k5sbf2ltszpzzbrp.PNG)
 When a client puts a request into the application for '/lawyers/:id', the request fetches the custom method of lawyer in the app>controller>users_controller.rb. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ew5vxq811f9xg9u60chw.PNG)
Here, user is set to a variable and active record rescue_from is used as our error handling when .find is used. To check if the routing was successfully created use Postman to test route:

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

Custom Route Works!!!
Claim 2 AWS Certifications for free
Tags: aws
Published: 2023-02-06 18:49:24

Only for women in tech, AWS offers 2 vouchers each year.

One is for the AWS Solution Architect Associate certification exam and the other is for the Cloud Practitioner one.

Feel free to apply sisters and claim these vouchers.

AWS Solution Architect Associate: https://awscloudupforher-saa.splashthat.com/

AWS Cloud Practitioner: https://awsshebuildscloudupcpe.splashthat.com/

Feel free to share this with your peers too.

-Mitul
(AWS Community Builder in Machine learning)
Shrink your Rails 7 application.js files
Tags: rails, stimulus, esbuild
Published: 2023-02-06 19:30:15

I discovered that my rails app was bundling a few too many stimulus controllers. Whoa! Slow down there buddy, save some of those controllers for individual pages! Here's my browser trying to download the deferred file...

<img width="100%" style="width:100%" src="https://media4.giphy.com/media/kaZdqgKC2Dg0XoRzgD/giphy.gif">

Maybe you're like me and you thought... "you can choose which stimulus controllers to import?"

Yes. Obvs.

I followed the upgrade tutorials and my application.js using `esbuild` and `js-bundling_rails` loaded my new stimulus controllers like this:

```ruby
import '@hotwired/turbo-rails';
import './controllers';
```

I added a few more controllers and then BAM! I had a massive 4.5MB application.js file!

Turns out I had a couple pages that used a third party UI component and for reasons I couldn't stop using those components. So I loaded them into my controllers.

<img width="100%" style="width:100%" src="https://media2.giphy.com/media/Td2ohS6FcoSGjyyyf3/giphy.gif">

I didn't want to stop using the controllers in the same way, but I wanted to use them when I needed them. So I load my controllers dynamically now. But I still register them to the `{ Application }`

Here is my current setup:


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

Anything in my `controllers` directory goes to application.js. I use active admin...(I know, I know, zip it.) 

So I load `jquery` to the window when I'm on active admin pages.

I then bring in my other controllers individually and use `<%= javascript_include_tag 'preview(or upload)' %> where needed.

Here's what the preview directory looks like:


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

Here is what the index.js file looks like.

```javascript
import { application } from "../controllers/application"

import PreviewController from "./preview_controller"
application.register("preview", PreviewController)
```

So now my application.js file is 13x smaller. Maybe there is a better way to do it. I'm not entirely sure. But here I am putting out a way where it works for me. Lighthouse Performance score went from 33 to 93. I really don't need that much javascript globally so I'll be trying to deliver almost 0 javascript to the page over time. I'll have ChatGPT research the best admin, or roll my own for me 😂.
How JavaScript Can Enhance Your Web Development Skills
Tags: javascript, webdev, career, indtechverse
Published: 2023-02-07 07:07:01

**JavaScript** is a high-level, dynamic and interpreted programming language used to create interactive and dynamic web pages. It's a fundamental tool for web developers to bring life to websites and provide users with an engaging and interactive experience.

Here are a few ways that JavaScript can help you enhance your web development skills:

1. Dynamic Content: JavaScript allows you to add dynamic elements to your website, such as animations, real-time data updates, and user interaction.

2. Cross-Platform Development: With JavaScript, you can develop applications for multiple platforms, including web, desktop, and mobile, making it a versatile tool for developers.

3. Interactivity: JavaScript enables you to create interactive forms, quizzes, and games that engage users and keep them coming back to your site.

4. Improved User Experience: By using JavaScript, you can improve the overall user experience of your website, such as making it more responsive, easy to navigate, and visually appealing.

5. Faster Loading Times: JavaScript is often used to create asynchronous loading, allowing you to load elements of a web page faster, improving the overall load time of the site.

In conclusion, if you're looking to enhance your web development skills, JavaScript is a tool you definitely want to master. Whether you're looking to create dynamic content, cross-platform applications, or improve the user experience, JavaScript can help you achieve your goals.
Generate requirements.txt file using pipreqs
Tags: git, cloud, opensource, programming
Published: 2023-02-07 10:21:28

In this article, I will explain how to Generate a `requirements.txt` file for any project based on imports libraries using pipreqs

First, install pipreqs : `pip install pipreqs`

after that you can use any of these commands :

```
Usage:
    pipreqs [options] [<path>]

Arguments:
    <path>                The path to the directory containing the application files for which a requirements file
                          should be generated (defaults to the current working directory)

Options:
    --use-local           Use ONLY local package info instead of querying PyPI
    --pypi-server <url>   Use custom PyPi server
    --proxy <url>         Use Proxy, parameter will be passed to requests library. You can also just set the
                          environments parameter in your terminal:
                          $ export HTTP_PROXY="http://10.10.1.10:3128"
                          $ export HTTPS_PROXY="https://10.10.1.10:1080"
    --debug               Print debug information
    --ignore <dirs>...    Ignore extra directories, each separated by a comma
    --no-follow-links     Do not follow symbolic links in the project
    --encoding <charset>  Use encoding parameter for file open
    --savepath <file>     Save the list of requirements in the given file
    --print               Output the list of requirements in the standard output
    --force               Overwrite existing requirements.txt
    --diff <file>         Compare modules in requirements.txt to project imports
    --clean <file>        Clean up requirements.txt by removing modules that are not imported in project
    --mode <scheme>       Enables dynamic versioning with <compat>, <gt> or <non-pin> schemes
                          <compat> | e.g. Flask~=1.1.2
                          <gt>     | e.g. Flask>=1.1.2
                          <no-pin> | e.g. Flask
```
Example
`$ pipreqs /home/project/location
Successfully saved requirements file in /home/project/location/requirements.txt`
after that, you will find the requirement.txt was added to the folder path


**Note: I copied this post from my classmate @kareemnegm who passed away this year. So please, pray to him. God’s mercy for you, Kareem❤💚🤍💔💔**


<br>
[GitHub](https://github.com/a00ayad00)
[LinkedIn](https://www.linkedin.com/in/a00ayad00)
[Facebook](https://m.facebook.com/a00ayad00)
[Medium](https://a00ayad00.medium.com/)