teleren/devto huggingface dataset:
03 Must-Visit Websites For Developers
Tags: websites, technology, developers, tailwindcss
Published: 2022-12-31 16:15:27

In this article, we will see 03 Must-Visit Websites For Developers.
&nbsp;  

[**Tailwindcomponents**
](https://tailwindcomponents.com/cheatsheet/)
If you are using Tailwind CSS in your projects, so this website is for you.
it provides an interactive cheat sheet to help you to find quickly all the class names and CSS properties.

![tailwindcomponents website screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wluw1vqwijphimmvg9bm.png)
&nbsp;  

[**Chalk**
](https://chalk.ist/)
There are many websites that help you to turn your source code into beautiful images, but this is the best one for me.


![Chalk website screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4jg0mn9g3jap5q0vdyk.png)
&nbsp;  

[**Algorithm Visualizer**
](https://algorithm-visualizer.org/)
Algorithm Visualizer is an interactive online platform that visualizes algorithms from code.

![Algorithm Visualizer website screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmbpmrog5si6ud2q4zpx.png)
&nbsp;  


Thank you for reading. If you know other useful websites, drop them in the comments.
How do TensorFlow.js models load in the browser?
Tags: tensorflow, machinelearning, javascript, webdev
Published: 2022-12-31 16:15:14

In a previous post I wrote about TensorFlow.js and how it can be used to build and deploy deep learning models in the browser. In this post I will focus **on how TensorFlow.js models are loaded in the browser**.

Most of the times Machine Learning models are used from an API. But TensorFlow.js brings those models to the user browser. The process behind this is very interesting.

## Toxicity Model

There are many ways to load and use TensorFlow.js models.

Let's say you want to load the [Toxicity model](https://tfhub.dev/tensorflow/tfjs-model/toxicity/1/default/1). Toxicity is a model that can detect toxicity in text.

This is the kind of model you can load directly from an NPM package after install it.

```
import * as toxicity from "@tensorflow-models/toxicity";
```

So, now you can load the model by calling `toxicity.load()`.

`Toxicity.load()` it's a wrapper around `tf.loadGraphModel()`.

`tf.loadGraphModel()` is a function that loads a TensorFlow.js model from a URL or a local file.

## Process of loading the model

Even when you install a model with NPM, the model is not inside the package. When you need to use the model this will fire a network call to download the model.

Because the model is loaded asynchronously, you need to wait for the model to load before you can use it.

```
const model = await toxicity.load();
```

This is something we can see from the **Network tab** in Chrome Developer Tools:


![Screenshot of Network tab when Toxicity Model is loaded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cml3ipr1b2cgm0ozx2yu.png)


### Shards

The Toxicity model is a large model, so it's split into multiple files. The files are called shards. The shards are loaded in parallel, and then they are combined into a single model.

This allows you to load the model more efficiently, especially when loading large models over a slow connection. TensorFlow.js automatically handles the process of downloading and combining the shards to create the full model.

Not all the models are split into shards, some models can be loaded as single files because they are not very large.

### Storage

This model will be storaged in local memory, so you don't need to worry about downloading the model each time you run your application.

Once the model is complete, you can start using it through your app.

This was the internal process of loading machine learning models in the browser using TensorFlow.js.
Want to improve software quality based on fact and statistics?
Tags: software, webdev, programming, testing
Published: 2022-12-31 16:08:58




The software industry has an intention of sometimes being low-quality and unreliable, which is fair in some cases due to many factors. One of the main reasons for bad quality is that measuring quality is not so good.

https://link.medium.com/eupEkXH8cwb
Yet Just Another Ordinary React Component Library... or is it?
Tags: react, contributorswanted, news
Published: 2022-12-31 16:02:06

Hi, everyone! I hope you all are doing well and are looking forward to the new year. It's been sometime since I last posted, but during that time I've been working on a few projects - [JSMiniGames](https://dev.to/tazdecoder/so-i-built-a-kahoot-style-coding-web-app-44d7) being one of them!

However, I'm making this short, quick (and low-key) post to share with you all - as the title suggests - a React component library inspired by Google's Material Design 3. 

The name of this library is called **"Glow Mui3"** and can be found on [npm](https://www.npmjs.com/package/glow-mui3) and [GitHub](https://github.com/TazDeCoder/glow-mui3).

Currently this project is in its early stages, so you will likely across some bugs and missing features. However don't let that deter you, as a maintainer of this project, I will ensure to work on these problems one-by-one. Once a lot of those problems are solved, I would want to then showcase a more complete version of this library here for the Dev.to community to enjoy 😁.

That is the main reason why I'm here - to ask for help from you guys with this project. If anyone is interested in working on this project, then you can either go ahead to the GitHub link provided prior or contact me directly.

With that said, try to make the new year a productive, generative year, so you can look back a year from now and see how much progress you've made 💪 - also, do take care of yourself both mentally and physically as well!
What is 52 Weeks of code and why you should join?
Published: 2022-12-31 16:00:00

52 weeks of code is where every week for 52 weeks you make a code-based project. They can be small - medium-sized projects, websites, extensions, apps, games, etc. Anything that lets you be creative and get your ideas out / practice your programming skills.

Now that you know what 52 weeks of code is you might be wondering, why should I join?

## Why?

Personally, I want to get much better at programming, while also having various different projects in multiple other programming languages and formats. But if you need some things to fill your portfolio’s project section this is great.

## What?

You might also think, oh I don’t have time or I don’t really think I will be able to do stuff like that in a week. You could do 26 weeks instead and spread it out or even go less and 13, just try to get projects done every month even, consistency is the key to learning and improving with programming.

For those who usually have absolutely no ideas for projects. Well, friend, I can't help you there, I sort of got the same problem and I am the one who is supposed to write and code projects for this blog for 52 weeks. But no, the project doesn't really have to be anything serious, it could be like a button that creates another button, and that button creates another button. It can be CSS art, a simple python automation app, the most basic HTML-only website, or even some practice with [sorting algorithms](https://ota.hashnode.dev/simple-sorting-algorithm-explained). As long you learn from it, then that's a win.

Anyways if you really, like really have no ideas, I will be putting prompts at the end of these.

## Final Remarks.

I want 52 weeks of code to be a time when you can work on things that really matter to you and I hope great projects come from this sort of code challenge thing.

Also, I would like to see your projects if any of you join so please send them to me by commenting on them here or tagging me, I would like to hear from you all in the comments as well. 

ps. Thank you all for reading, This is my first time actually blogging on multiple sites, ( [hashnode ](https://ota.hashnode.dev/)and [dev.to](https://dev.to/ota200) ). It's sort of a year experiment to see if I can grow my blog more or if I stay stagnate.

## Prompt Week one

Make an app/game that incorporates color change, good luck :).
The Everyday Life of an HNG Intern; Isaac Ojerumu’s Story
Tags: beginners, programming, career, tutorial
Published: 2022-12-31 15:52:17

**Task 6**
Progressing from the previous stage, each member of the Backend Track was paired with an intern from the Frontend Track. This partnership was established to foster progress in building their project; **The Engineering 360**. Isaac was partnered with Williams, a Frontend developer.
 The teamwork between Isaac, a member of team **Axle’s** Backend Track, and a Frontend developer from the same team was responsible, to an extent, for the successful delivering of the company’s controller that was built in stage 5.
Two endpoints in the department controller were handed over to Isaac; deleteDepartment($id) and updateDepartment(Request $request, $id). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hj6ag6tskokrkwoc49eb.jpg)
He was to ensure that the endpoint he worked on was functional on the Frontend. This he did with the help of Bolu, an intern in the Backend Track.


Upon completion of this task, and meeting the REQUIRED POINTS, Isaac was doubly promoted to stage 8. He also got the benefit of making good friends; Bolu and Williams, in the course of carrying out the task in stage 6. This is one of the advantages that internship programs of such have to offer.


Dear reader, thank you for walking through this story with me. I hope that this episode and the series as a whole have been insightful, educative, and inspiring. See you on the next page.
Please, let's get in touch on Medium; **Zini Zada**, and Twitter; **Zada_Zini**

Link to the next episode: https://dev.to/zadazini/the-everyday-life-of-an-hng-intern-isaac-ojerumus-story-59b2
emacs: how to switch between module.py and test_module.py
Tags: emacs, python
Published: 2022-12-31 15:48:25

# Switching between files

emacs has a nice feature to switch between related files using the `ff-find-other-file` function. By default this is not bound to any keys. I usually bind it to `F5` to find the related file in the same window and `M-o` to open it in a new window like this in my `~/.emacs`:

```Lisp
(global-set-key '[f5] 'ff-find-other-file)
(global-set-key '[(meta o)] '(lambda() (interactive) (ff-find-other-file t)))
```

## Switching between module.py and module_test.py

For python files, related files can be a module and its test file. To do so, you need to confiure the `ff-other-file-alist` variable once you enter into `python-mode`. You can do it like that in your `~/.emacs`:

```Lisp
(add-hook 'python-mode-hook
          (function
           (lambda()
             (setq ff-other-file-alist
                   '(("_test\\.py$" (".py"))
                     ("\\.py$" ("_test.py")) ) ) ) ) )
```

The order is important in the `ff-other-file-alist` variable as `ff-find-other-file` stops at the first match.

## Switching between module.py and test_module.py

To switch between `module.py` and `test_module.py` is a little bit more complex. By default `ff-find-other-file` works with suffixes. There is a feature that is not documented (I had to look at the source code to find it): you can pass the name of a function instead of the replacement suffixes.

Here is how to do it:

```Lisp
(defun py-module (fname)
  (list (concat
         (match-string 1 (file-name-nondirectory fname))
         ".py")) )

(defun py-test (fname)
  (list (concat "test_"
                (match-string 1 (file-name-nondirectory fname))
                ".py")) )

(add-hook 'python-mode-hook
          (function
           (lambda()
             (setq ff-other-file-alist
                   '(("test_\\(.*\\)\\.py$" py-module)
                     ("\\(.*\\)\\.py$" py-test))
                   ) ) ))
```

## Looking up in different directories

If your test and module are not in the same directory, you can use the `ff-search-directories` variable to add some relative paths. For example:

```Lisp
(add-hook 'python-mode-hook
          (function
           (lambda()
             (setq ff-search-directories '("." "../tests" "../src")) ) ) )
```
React - How to load a form with the latest data
Tags: react, reacthooks, useref, typescript
Published: 2022-12-31 15:39:23

Recently I had the following situation I needed to solve:

> On a page with two tabs, **the first one being a form**, make sure **the latest form values inserted by the user show up when they come back from the second tab**.

Here is the component tree:
![Tree diagram with "Page" as parent and "TabBar", "FormTab" and "InfoTab" as direct children](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdex8k2a2rho4g7o817h.png)

Here is the base code (see how the form state is lost on tab change):
{% codesandbox https://codesandbox.io/embed/posts--react-lastest-form-values--base-code-9kxvzb?fontsize=14&hidenavigation=1&module=%2Fsrc%2FPage.tsx&theme=dark %}

## Solution #1: Just lift the state up

{% codesandbox https://codesandbox.io/embed/posts--react-lastest-form-values--lift-state-up-m5y5pv?fontsize=14&hidenavigation=1&module=%2Fsrc%2FPage.tsx&theme=dark %}

- move `useState` to parent component

Here the parent state is updated on every input change.

## Solution #2: Pass state to parent on unmount, load it on mount

{% codesandbox https://codesandbox.io/embed/posts--react-lastest-form-values--use-ref-unmount-nb7822?fontsize=12&hidenavigation=1&module=%2Fsrc%2FPage.tsx&theme=dark %}

- Parent: add `useState`
- child: keep `useState` + add `useRef` + add `useEffect` (`useRef` is needed for us to be able to get the latest state on unmount without needing to listen to its every change).

Here the parent's state is updated only once during the life of the `FormTab` component, when the user leaves the form tab.

**Useful when you have multiple inputs/computations going on so updating the parent's state on every input change costs you a lot.**

---

_**Quick tip**_: for professional work, try using [`react-hook-form`](https://www.npmjs.com/package/react-hook-form). It's a great library for form-related work (validation, submit, error messages, etc.).
Terraform and AWS
Published: 2022-12-31 15:28:39

---
title: Terraform and AWS
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-31 15:26 +0000
---

This is tunde
Architecting Freelance Toolkit - Devlog #002
Tags: buildinpublic, architecture, devjournal, laravel
Published: 2022-12-31 15:26:46

## Architecture goals
- A solid, cohesive core user experience
	- Desktop-first experience
	- Using Laravel & React.js
	- Using Tailwind & Tailwind UI
- An modular approach to app features
	- Plug-and-play features with well defined interfaces
	- Common REST API between modules
	- Seamless integration between app features
- Full support for command palette/keyboard navigation
- Full data separation for each client/tenant

## Initial Modules
### Core Modules
- **Contacts** - Store the contact details for people and organizations.
- **Activities** - Record activities and events associated with contacts.

### Additional Modules
- **Prospecting** - Keep track of prospective clients.
- **Sales** - Manage your deals pipeline and contracts.
- **Projects** - Manage client projects.
- **Timesheets** - Record time entries against activities.
- **Helpdesk** - Support customers via an email helpdesk.

## Future Module Ideas
- **Invoicing** - Billing and reporting for projects.
- **Business Metrics** - Keep track of how your business is performing.
- **Social Feed** - Subscribe to updates from your contact's social media feeds.
We've made a habit tracker application that prioritizes consistency over streaks
Tags: ios, productivity, motivation
Published: 2022-12-31 15:19:51

## Hi there, dev.to community!



I'm Beknar, an indie hacker from Kazakhstan 🇰🇿

**Ever felt bad after breaking the streak? So did we.**
That’s not your fault, it is just that habit tracker apps sometimes put too much pressure on us. We have been there, that’s why we created **Commit**, a habit tracker that prioritizes consistency over streaks:
- Habit name and regularity, that’s all that you need to start committing.
- No pie charts. No notifications. No preludes.
- Beautifully designed grid keeps you aligned with your consistency, not just streaks.
- We believe that skipping is inevitable, not because you are lazy, but because life happens. What matters is whether you keep going.
- We believe that a habit tracker shouldn’t feel like a financial reporting app.
- Clean and snappy, that’s how our app feels.

Focus on the big picture. Commit now.
https://trycommit.app



Follow us on [twitter](twitter.com/trycommit).
Thank you for your attention!
Obtaining Multiple Solutions Z3
Published: 2023-01-06 02:55:02

---
title: Obtaining Multiple Solutions Z3
published: true
date: 2022-12-31 14:52:00 UTC
tags: 
canonical_url: https://brandonrozek.com/blog/obtaining-multiple-solutions-z3/
---

Playing around with Diophantine solvers, I wanted to obtain the solutions of the following equation: $$ 5a + 4b - 3c = 0 $$ Let’s encode that using Z3

```
from z3 import *

# Encode Equation
a, b, c = Ints("a, b, c")
s = Solver()
s.add(5 * a + 4 * b - 3 * c == 0)

# Find solution
result = s.model()
if result == sat:
    print(result)

```

This code snippet returns

```
[a = 0, b = 0, c = 0]

```

Now there are multiple solutions to this Diophantine equation, so how do we get the others? It turns out after searching around StackOverflow (see references) the only way is to add the previous solutions as constraints.

```
# This encodes the last solution as a constraint
block = []
for var in m:
    block.append(var() != m[var])
s.add(Or(block))

```

Formulaically, this corresponds to: $$ a \ne 0 \vee b \ne 0 \vee c \ne 0 $$ If you look at the references, it’s hard to encode these constraints generally. This is because Z3 is a powerful SMT solver working with many different theories. Though if we restrict ourselves to the Diophantine equations, we can write a function that acts as a generator for all of the solutions:

```
import z3

def get_solutions(s: z3.z3.Solver):
    result = s.check()
    # While we still get solutions
    while (result == z3.sat):
      m = s.model()
      yield m
      # Add new solution as a constraint
      block = []
      for var in m:
          block.append(var() != m[var])
      s.add(z3.Or(block))
      # Look for new solution
      result = s.check()

```

Now for our example, this allows us to do the following:

```
from z3 import *

a, b, c = Ints("a, b, c")
s = Solver()
s.add(5 * a + 4 * b - 3 * c == 0)

solutions = get_solutions(s)
upper_bound = 10
for solution, _ in zip(solutions, range(upper_bound)):
    print(solution)

```

The solutions of a linear Diophantine equation can be easily parameterized so I don’t recommend using Z3 in this way. Though I think this exercise is informative for other theories you might be trying to satisfy.

## References

- [https://stackoverflow.com/questions/11867611/z3py-checking-all-solutions-for-equation/70656700#70656700](https://stackoverflow.com/questions/11867611/z3py-checking-all-solutions-for-equation/70656700#70656700)
- [https://stackoverflow.com/questions/11867611/z3py-checking-all-solutions-for-equation/70656700#70656700](https://stackoverflow.com/questions/11867611/z3py-checking-all-solutions-for-equation/70656700#70656700)
- [https://stackoverflow.com/questions/63231398/trying-to-find-all-solutions-to-a-boolean-formula-using-z3-in-python/63232953#63232953](https://stackoverflow.com/questions/63231398/trying-to-find-all-solutions-to-a-boolean-formula-using-z3-in-python/63232953#63232953)
Mastodon/Webfinger Alias using HTTP Redirects
Tags: mastodon
Published: 2023-01-06 02:55:13

---
title: Mastodon/Webfinger Alias using HTTP Redirects
published: true
date: 2022-12-31 14:50:00 UTC
tags: Mastodon
canonical_url: https://brandonrozek.com/blog/mastodon-webfinger-alias-using-redirects/
---

Mastodon uses the Webfinger protocol to find users. For example, if you search for `@brozek@brandonrozek.com` it will access the url:

```
https://brandonrozek.com/.well-known/webfinger?resource=acct:brozek@brandonrozek.com

```

As of the time of writing, I do not have a strong interest in running my own Mastodon server. I instead am active on `@brozek@fosstodon.org`

```
https://fosstodon.org/.well-known/webfinger?resource=acct:brozek@fosstodon.org

```

If you try to access the last URL in your web browser, you’ll notice that it doesn’t return anything. This is because the server will only respond if we specify the content type. In `curl`, we can specify that through the following:

```
curl -H 'Accept: application/jrd+json' \
	https://fosstodon.org/.well-known/webfinger?resource=acct:brozek@fosstodon.org

```

Currently, it returns the following

```
{
  "subject": "acct:brozek@fosstodon.org",
  "aliases": [
    "https://fosstodon.org/@brozek",
    "https://fosstodon.org/users/brozek"
  ],
  "links": [
    {
      "rel": "http://webfinger.net/rel/profile-page",
      "type": "text/html",
      "href": "https://fosstodon.org/@brozek"
    },
    {
      "rel": "self",
      "type": "application/activity+json",
      "href": "https://fosstodon.org/users/brozek"
    },
    {
      "rel": "http://ostatus.org/schema/1.0/subscribe",
      "template": "https://fosstodon.org/authorize_interaction?uri={uri}"
    }
  ]
}

```

Some people have been copy pasting the contents of this file, onto their webserver. However, this makes it so that we can’t have multiple aliases on this domain. Instead, we can use our webserver (mine is `nginx`) to redirect the user when the specified handle is requested.

```
location /.well-known/webfinger {
    default_type application/jrd+json;
    add_header Access-Control-Allow-Origin "*";
    if ($arg_resource = acct:brozek@brandonrozek.com) {
        return 301 $scheme://fosstodon.org/.well-known/webfinger?resource=acct:brozek@fosstodon.org;
    }
}

```

Now this isn’t a perfect alias, you can’t reference `@brozek@brandonrozek.com` and have me be notified. Instead, this only works in user discovery.
How to create navigation menu with HTML CSS step by step | web design tutorial | HTML CSS tutorial
Tags: html, css, beginners, tutorial
Published: 2022-12-31 14:30:41

{% youtube 6ENUGX_Uq-Q %}
Hello!! Creative People,  Today I want to share with you HTML CSS Design (Navigation Menu).

 I hope you like this version and give your opinion in the comment box. If I have any problem then I recover my net video. Thanks for watching this video, and please do SUBSCRIBE to my channel.  

How to create navigation menu with HTML CSS step by step | web design tutorial | HTML CSS tutorial

thanks.