teleren/devto huggingface dataset:
The React Way
Tags: webdev, reactnative, react, typescript
Published: 2023-01-02 23:19:40

The world of react can be amazing and completely bizarre sometimes. After spending a year on react-native, the following issues continue to plague me. I plan to post follow up parts that answer each of the following issues. 

1. **Breaking react hooks rule**
What is the best way to share functionality across different components? For example, a data filter functionality?  
2. **Performant Sort**
Flatlist sorting is done by changing the data object to one that is sorted. That requirement combined with immutability means that a new array needs to be created and set.
3. **Persisting Data**
Lack of binary support and lack of a proper background global loader turns persisting and loading data  into a landmine. 
4. **16.67 ms for everything**
How to make sure your long running work doesn't freeze your UI. Found solutions like InteractionManager.runAfterInteractions, tried throwing await everywhere and making async handlers. 
5. **Node vs React Shims** How to properly handle crypto getRandomBytes, etc. Especially in react-native
6. **Chained logic** Conditional rendering, conditional routing and other stage gating techniques

TLDR; The flexibility of react is a sword with two edges where you cut development time on one side but can also cut yourself by not following norms (which are hard to find btw). 

Feel free to comment if you have write ups for the above or just want to pile on.
Boost Retention and Loyalty with These Simple Tips for a Killer Thank You Page
Published: 2023-01-16 09:29:28

---
title: Boost Retention and Loyalty with These Simple Tips for a Killer Thank You Page
published: true
date: 2023-01-02 23:18:59 UTC
tags: 
canonical_url: 
---

 ![Boost Retention and Loyalty with These Simple Tips for a Killer Thank You Page](https://codesphere.ghost.io/content/images/2023/01/DALL-E-2023-01-03-00.13.05---an-astronaut-shaking-hands-with-an-alien-on-mars-pencil-drawing.png)

Looking to increase e-commerce retention post-checkout? A thank you page is a simple yet powerful tool to convert one-time buyers to a loyal brand ambassadors.  
  
### Here's what's important in a thank you page 🙏
  
1. Clearly state that the user has completed their purchase and congratulate them  
  
2. Summarize what was included in the order  
  
3. Clearly state when the package will arrive and with which courier or delivery service  
  
4. Offer an easy way for the user to get in touch with the store owner (e.g., live chat, email, phone number)  
  
5. Explain to the user how they can track their package  
  
6. Offer the user the chance to buy additional items or quantities of the same product at a lower price or to buy a complementary product, with a clear explanation that these items will be combined with their recently placed order  
  
7. Offer the user a coupon code that they can use for their next purchase or give to their friends  
  
8. Include a summary of all information in the confirmation email (product summary, upsells, coupon code, etc.)  
  
### 🎯 A/B Testing  
  
To determine which of these tips is most effective at improving the e-commerce conversion on your add-to-cart page, it is crucial to conduct A/B testing. A/B testing involves creating two versions of your cart page, with one version (the "A" version) serving as the control and the other (the "B" version) featuring a specific change or variation. You can then compare these two versions' performance to see which leads to higher conversion rates. This can help you identify which elements of your cart page are most impactful and guide your optimization efforts. It is recommended to test one change at a time to determine its impact on conversions accurately. 
Learn more about how easy it is to do A/B testing on Codesphere [here](https://welcome.codesphere.com/?utm_source=thankyoupageblog&utm_campaign=devto).
![A/b Testing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ek52xt06msqdpgt8z1t.png)
How To Reverse A String
Tags: codepen, javascript
Published: 2023-01-02 23:12:32

This is amazing. The more I tinker, the better I pick a great understanding that makes up for all the troubles of reading, listening, writing and trying to make a sense of it all. Last night before I called in for the night, late as it was, I had an ahuuh experience of understanding about what I was actually doing. I was writing codes in JavaScript and I wasn't copying somebody else's tutorial or blog. 

I am happy to say that I am satisfied. Alhamdulillah, and thanks to all involved. I am pushing forward and I won't stop till I get enough. And some more...!

Now this will reverse engineer whatever you write inside the input field and then saves it inside function update, and when you click on the button, you should be able to see it on the display field above what you wrote turned backward. A simple application, yet powerful capabilities. 

Thanks for reading and have fun coding...!   

{% codepen https://codepen.io/djeylani/pen/GRBqGjo %}
SPVM 0.9676 is released
Tags: perl, spvm, beginners, programming
Published: 2023-01-02 23:12:13

<a href="https://metacpan.org/pod/SPVM">SPVM</a> 0.9676 is released.

## New Features and Enhancement

<a href="https://github.com/yuki-kimoto/SPVM/blob/master/Changes">Changes</a>

```
0.9676 2022-01-03
  [New Features]
    * Added the following constant values of Native API.
    
      1 SPVM_NATIVE_C_TYPE_FLAG_REF
      2 SPVM_NATIVE_C_TYPE_FLAG_MUTABLE
    * Added the following Native APIs.
      void* (*get_compile_type_name_raw)(SPVM_ENV* env, SPVM_VALUE* stack, int32_t basic_type_id, int32_t dimension, int32_t flag);
      void* (*get_compile_type_name)(SPVM_ENV* env, SPVM_VALUE* stack, int32_t basic_type_id, int32_t dimension, int32_t flag);
    * Added the get_method_is_enum Runtime Native API.
      
      int32_t SPVM_API_RUNTIME_get_method_is_enum(SPVM_RUNTIME* runtime, int32_t method_id);
    * Added the following Runtime Native APIs.
      
      int32_t (*get_type_flag)(SPVM_RUNTIME* runtime, int32_t type_id);
      
  [Warning Fix]
    * Fixed the following warning on FreeBSD.
        warning: logical not is only applied to the left hand side of this comparison [-Wlogical-not-parentheses]
      if (!strcmp(dumpc, "undef") == 0) {
  [Incompatible Bug Fix]
    * Fixed the return type of the SPVM object the get_type_name_raw and get_type_name native API.
      [Before]
      byte[]
      
      [After]
      string

    * Fixed the return type of the SPVM object the concat_raw and concat native API.
      [Before]
      byte[]
      
      [After]
      string

    * Fixed the return type of the SPVM object the new_string_nolen_raw and new_string_nolen native API.
      [Before]
      byte[]
      
      [After]
      string
      
  [Test Improvement]
    * Added the tests of get_class_parent_class_id, get_method_required_args_length, get_method_required_args_length Runtime Native APIs.
  [Improve Exception Messages]
    * Improve the exception messages of Exchange API.

```

## For Programming Beginners

### What Is SPVM?

SPVM is a static typed programming language that can be installed from Perl/CPAN.

### How potential dose SPVM have?

Growth is expected in the fields of Bio Tech, AI/ML, Apple/iPhone/iPad Apps, Google/Android Apps, IoT Device, Connected Car, Smart Device, Smart Home, etc.

This is because SPVM can produce an executable file that supports cross platforms and make easy to calculate arrays and bind C/C++
SSR in javascript is hard
Tags: webdev, javascript, react
Published: 2023-01-02 22:57:36

I started working on [Xania](https://github.com/xania/view) Web's Fastest JSX based Library since back in 2014.

Before that I was 90% backend 10y .NET developer and my focus has shifted since then more towards JavaScript. And because of my background I am hyped about the new trend shift towards backend, but...frontend has evolved and we don't want to loose the capabilities of our beloved libraries in favor of SSR. but it's hard.

SSR is mainly hard because of serialization of `runtime` state. Part of it is the need for javasript bundler at runtime. Basically we need to examine the data we are sending to the client, determine what types are used, track back where those types are defined in code (which I am not sure is even possible), create a hydration script which imports these types. And, it get even hard if we also want to serialize closures. After that framework specific handling can take over...which is relatively easy to do.

There are a couple of framework solutions with support for hydration (rehydration/resumability/lazy/partial,etc....) like `SvelteKit`, `Next.JS`, `Qwik`, `Astro`, `Marko`, etc... but it is sad to see that none allows an incremental / progressive adaption. They all are coupled to either a view library, routing or toolchain, I just want to use `Vite` and `Xania` and add _Hydration_ to the mix.

Here is the challenge I am taking on:
1. Is it possible to statiscally generate rehydration script at compile time? I am thinking of a solution that is using rollup transform plugin, 
2. Or otherwise, create a serializer, runtime bundler and hydration script.

I have little to no experience in this area, so any suggestion are very welcome.
CSS Aurora effect
Tags: css, webdev, experiment
Published: 2023-01-02 22:28:38

I was experimenting with color for another post and was inspired by the text glow effects on [Open Props](https://open-props.style). This got me wondering if I could animate an [Aurora Borealis](https://en.wikipedia.org/wiki/Aurora) affect.

{% youtube https://youtu.be/fVsONlc3OUY?t=19 %}

## The basic aurora glow

The simpler approach is a stack of CSS gradients (simulating a mesh gradient) and animating the background positions of each layer. See the Pen below.

I think an important, though subtle part of this effect is the text glow as well. It sets the text in the environment and is affected by the aura behind it.

{% codepen https://codepen.io/oobleck/pen/VwBLbNG %}

## Going a step farther

The next experiment alters the text so it interacts with the background, fading in and out of focus as if it's within the aurora.

{% codepen https://codepen.io/oobleck/pen/LYBVjwb %}

## The text's aurora

In this experiment, the effect is more subtle. I think this may be the most applicable for real use-case. Even if you turn off the animations it still looks
pretty nice.

{% codepen https://codepen.io/oobleck/pen/dyjoVXz %}

## My mind's eye?

This effect where the text appears to emit its own aurora is probably the closest to what I had originally imagined, but it may not be the most realistic in terms of achieving a natural look.

To achieve this I animated 4 text shadows modifying their x & y offsets, blur radii, and positions in the stack.

{% codepen https://codepen.io/oobleck/pen/JjBdrdb %}

## Wrapping up

Overall, this was a really fun experiment that demonstrates the creative possibilities of CSS. It's always exciting to see what can be done with a little bit of coding knowledge and a lot of imagination. Who knows, maybe a company like Apple will pick up on this effect and use it for a landing page or something similar in the future. In the meantime, why not play around with the CSS Aurora effect and see what you can create?
Cheaply running ruby on rails apps (for side projects)
Tags: rails, sqlite
Published: 2023-01-02 22:08:13

With Heroku's free tier gone, this is my work-in-progress configuration for a new ruby on rails apps that I want to run as cheaply as possible.

Here's the gist of it:

- Rails.cache uses `:file_store`
- Use SQLite for a database
- Use redis for sidekiq and actioncable
- Run Sidekiq in embedded mode
- Use `disk_storage` for ActiveStorage
- Run ActionCable's websocket server in embedded mode
- Use [hatchbox](https://hatchbox.io) to deploy all of my apps on a single VPS on linode/vultr/aws/digital ocean
- Use Cloudflare as a CDN

The main theme here is taking advantage of how cheap disk storage is on VPS providers (~$0.10 per **GB**) as well as Hatchbox allowing unlimited apps to be deployed on a single machine. The cost per months follows this formula:

```
cost = ($10 per server + VPS cost) / # of apps
```

So if I had 10 apps running a single $5 Linode server and each app would cost me $1.50 per month. 100 apps on a $40 server would cost my $50 / 100 apps = $0.50 per app.

## Caveats

This stack does make some assumptions about the app ideas I have:

- a lot of reads and very few writes
- very small chance of going viral
- low to medium traffic
- wary of every gem you use to manage memory usage

And this stack does nudge coding your app a certain way to squeeze as many apps as possible in a single server:
- heavily use russian doll caching
- SQLite should be running in WAL mode
- Sidekiq workers should not do anything that requires a lot of compute (adding things together, reading files, etc).
- Remove cookies from page responses so that they can be cached in a CDN and use lazy turbo frames to fetch user specific content.

## Possible further optimizations

This same configuration could be done on fly.io instances in addition to scaling down to 0 after hitting idle timeout. I learned about this [here](https://benjohnson.ca/2022/11/20/scale-to-zero.html). Although I don't have a lot of experience optimizing rails boot times in order to respond to a waking request fast enough. Given what has happened to heroku, I'd bet that a simple VPS provider would outlast a niche platform-as-a-service.

If anyone is interested in a tutorial, let me know.
Thanks for reading!

I am partially running this stack (sqlite and file_store caching) in production today at [reipricetracker](https://reipricetracker.com). If you are concerned about performance, you can see the top left speed badge be adding `?rails=1` to any URL.
Monthly Challenge #3: Morse Code 🆘
Tags: challenge, python, beginners, codedex
Published: 2023-01-02 22:06:09

### Morse Code

[Morse code](https://en.wikipedia.org/wiki/Morse_code) is a communication method to encode characters as dots (.) and dashes (-), developed in the 1830s.

### January Challenge

Create a `translate()` Python function that takes in a message and converts it to morse code. 

Post the code/output screenshot in the Twitter thread by Jan 14th for a chance to win a Codédex hoodie! 🎁

{% embed https://twitter.com/codedex_io/status/1609910099824496647?s=20&t=QpEKNVropZf7UQZprexpfg %}
Remove Even Integers From an Array
Published: 2023-01-02 21:18:24

Implement a function `RemoveEven( int *& arr, int n )` which takes an array `arr` and its size and removes all the even elements from a given array.

> **Input**
> 
> ```cpp
> 5
> 1 2 3 4 5
> ```

> **Output**
> 
> ```cpp
> 1 3 5
> ```

# Solution

```cpp
#include<iostream>
using namespace std;
int NewArraySize=0;
int * RemoveEven(int *& arr, int n){
    int * NewArray=new int[]{};
    for (int i=0;i<n;i++){
        if ((arr[i]%2)==1){
            NewArray[NewArraySize++]=arr[i];
        }
    }
    delete [] arr;
    arr=NewArray;
    return arr;
}

int main(){
		// Array size
    int n=0;
		cin>>n;

		// Array
    int * arr=new int[n]{};
		for (int i=0;i<n;i++){
				cin>>arr[i];
		}
		
		// Calling the funciton
    arr = RemoveEven(arr,n);
		
		// Printing the new array
    for (int i=0;i<NewArraySize;i++){
        cout<<arr[i]<<" ";
    }
    cout<<endl;
    return 0;
}
```

Here inside the function `RemoveEven()`we created a new dynamic array `NewArray`which will be used to store the **odd** element. Next, we are using a **for loop** to check if an element in an array of index i is odd or even if the reminder is 1 then it is an odd number, it will be pushed in the `NewArray` and then the variable `NewArraySize` will be + 1 so we can keep track of the size of the array as we can’t get the dynamic array size with `sizeof()` function. After, we have successfully added all the odd number elements in the `NewArray` we will delete all the elements of the `arr` as we want to copy the `NewArray` elements in `arr` and then return it.

> Run the code with `g++ -std=c++20 fileName.cpp -o a.out` and `./a.out`
Stopping Reconnaissance Attacks
Tags: cybersecurity, socanalyst, tech
Published: 2023-01-02 21:16:45

_Able to utilize Zone Protection profiles to provide additional protection for specific network zones to protect the zones from attack. Able to use Nmap on the client machine to perform reconnaissance attack. This will test the Zone Protection profiles of the Palo Alto Networks Firewalls._

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

**• Create a Zone Protection Profile**
Zone Protection Profiles supplement additional protection between determined zones to protect the zones against attacks.

**• Apply the Zone Protection Profile to Zones and Commit**
Using the Zone Protection Profile created to the inside, outside, and DMZ security zones. This helps control against network floods, reconnaissance, and other packet-based related attacks. Then commit changes into the Firewall.

**• Perform a Reconnaissance Attack on the DMZ Server**
Using Nmap to perform reconnaissance attack on the DMZ server. Nmap is used to scan networks as a host detection tool for penetration testing and to visualize network vulnerabilities.

**• Monitor and Analyze the Threat Logs**
able to analyze and monitor the Threat logs in the Palo Alto Networks Firewall.

_After an admin analyzes the logs present on the Firewall from
the Nmap scan, the port scan activity is visible. If this had
been a malicious hacker scanning the network, the threat logs would have alerted the admin. 
For this lab, the security policy is set to allow all traffic. That security policy setting most likely would not be utilized in a production environment. If the security policy would have been set to deny traffic, an alert would have been triggered by the Nmap scan but the scan traffic would not have been allowed between the zones._
Five random pieces of career advice for 2023
Tags: career, careerdevelopment, personaldevlopment, motivation
Published: 2023-01-02 21:10:26

Since it's the end of the year, I've put together 5 career ideas and hacks that have changed my life that you might find useful. I've handpicked some of them from emails I've sent over the past year, with new ones I've been wanting to share.

These ideas will help you set the stage for an even more successful new year. Let's dive in!

 **Send speculative, helpful emails to people you admire, expecting nothing in return.** Get into the habit of simple, regular networking. For example, the next time you come across an interesting piece of content, send an email to the author telling them about your favorite part or your perspective. 

** Be proactive to increase your 'luck surface area'. Of course, luck plays a big part in our career.** But there are ways to increase the amount of 'luck' we get. The more we go out of our way to create new opportunities (e.g. build your personal brand, meet new people, etc), the better your odds are of being 'lucky'. 

**"At every job you should either learn or earn. Either is fine. Both is best. But if it's neither, quit." - Garry Tan.** Are you growing professionally and is there potential for more growth at your job? Are you earning what you're worth? It's a warning sign if the answer to both of these are a hard 'no'.

 **Networking tip: Rather than only trying to connect with CEOs, celebrities or VIPs, look for people 1 or 2 steps ahead of you.** Their advice will be more relevant + they'll be more likely to have the bandwidth to help you out. Example: find and connect with someone who recently made the career change you're trying to make, who's at the same level of seniority that you're at. 

 **You’re the average of the five people you spend the most time with.** Find the people you can genuinely learn from. Make sure your team and the people you work with are the right fit. Chase opportunities where you're surrounded by people that have the attributes you want in yourself.




_Full credit to [Resume Worded](resumeworded.com). I thought I should share this one from The Career Supplement series. They send me daily career tips straight to my email, which I find very helpful. If you'd like to receive great career tips like this, you can join their email list [here](https://mautem.resumeworded.com/sendy/l/P7tYhCx8892gap2lazBADjUg/fmtszzUieEvP892NC3YSFtuQ/0pO3Ke1Kb6lEBIJgRAT7tw)._
TypeScript for prototyping: bijective function example with generics' notation
Tags: webdev, programming, metaprogramming, math
Published: 2023-01-02 21:03:13

**Bijective function** (_one-to-one correspondence_) function in layman's terms with TypeScript generic notation:

```ts
function bijective<input, output>(arg1: input, arg2: output): void /* <= instead of "return;" do "void" */ {
   console.log(`${arg1}=>${arg2}`);
   /* return; */
}

bijective<number,boolean>(0, false) // #  "0=>false" 
bijective<number,boolean>(1, true) // # "1=>true" 
```
I made a spinning cube
Tags: typescript, gamedev, kittentheorygames
Published: 2023-01-02 21:01:46

My mind runs away from me. Things I thought of but decided not to [bike shed](https://en.wiktionary.org/wiki/bikeshedding) on.

- Setting up auto reloading in my Electron app.
  - Not necessary for the moment. Maybe eventually.
- Setting up electron forge to be sure the game will _really_ bundle successfully.
  - Of course it will. And there's barely anything to bundle yet.
- WebRTC signaling servers (or STUN servers).
  - Come on. What are you doing brain?
- Marching Cubes.
  - I have this weird fixation on it, like it's going to be _really_ important. But, I also keep immediately shooting it down and deciding it's better to make a little cubism part of the aesthetic. Also, way to soon!
- Community building.
  - I actually did spend a little time joining indie game dev communities. I have nothing interesting to post as yet. I kinda wish there were a really noob focused community
- Reading indie game dev noob guides.
  - I read a few. All useless. They seem to be pitched at people who still live at home and will be spending all their time starting their game dev career. Nothing for hobbyists.
- Replacing the loading screen in Babylon.js.
  - I haven't actually integrated it yet. So, slightly premature.

So what did I actually do? Spinning cuuuuube!!!

![Spinning Cube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17tgupe6qiaet6ttz9g8.gif)