teleren/devto huggingface dataset:
BakaLLM, part 14: (MLP) Sharing is caring(?)
Tags: machinelearning, llm, ai
Published: 2023-12-16 14:26:47

Hello, fairy dairy diary!

New paper that I skimmed by diagonal and got inspired!
[One Wide Feedforward is All You Need](https://arxiv.org/abs/2309.01826)

![Wide Cirno](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9rwkh7rebb3xk13z0gv.png)

They base their experiments mainly on full transformers with encoders, so I blame my ~~illeteracy~~ ~~laziness~~~ non-reading on the fact we are decoder-only baka anyway. So for now I just made it possible to share MLP by setting into config how to share weights. I didn't believe that one feed forward is all I needed, so for the first experiment I reduced them to 3 in 12 layers.

```python
  @dataclass
  class BakaConfig:
      dim_model: int = 1024
      dim_ff: int = 0
>>>   ff_pattern = 'aaaabbbbcccc'
```
)

Also for control test, instead of increasing `dim_ff`, I just shared some MLPs using "standard" `dim_ff = 4*dim_model`

Training graph follows RMT closely

![Training Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4isnn9kb9ijen9l12v2i.png)
While there are some differences that suggest it may be worse

![Diff of graphs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu9q3by5azqsre3h41qp.png)

During evaluation it turned out to be even better
![Results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbtnbi50ipt9bgsr5612.png)

Results turned out to be fine.
And I can also test other patterns like 'abcabcabcabc'!

Considering that it sheared ~70M of parameters, that's something that needs deeper investigation on differrent number of shared MLP

The paper also shown the following fact:
>These experiments show that, contrary to the FFN,
individual layer-specific attention weights are more
important and not as redundant, as sharing the at-
tention leads to significant accuracy drops

Which also reminded me previous experiments where I doubled whole layers `(y=layer2(layer2(layer1(layer1(x))` and that finetuning attention or step4 affected results much more  than finetuning MLP.
How to create your own functions on Bash
Tags: bash
Published: 2023-12-16 14:25:53

In this article we'll shortly learn how to create your own commands/functions on Bash.

You can use it whatever the OS since you're using a bash-derived terminal like _Bash_, _Zsh_, _Git Bash_ and so on.

First of all we'll create the functions. You can choose the file name and its location. In my example I'll create as `/home/henrique/my-own-functions.sh` (You can use the command `touch  /home/henrique/ my-own-functions.sh` to create the file)

Let's write our first function in the new file:

```
function MyFirstFunction() {
        echo "Hello World!"
}
```

Note: To type the function directly in your bash you can use the _vim_, example: `vim /home/henrique/ my-own-functions.sh`

After write our function(s) we need to load it in our bash by default, e to do that we need to write a line to load it in the `.bashrc` file which usually stay in your user's root folder, in my case is at `/home/henrique/.bashrc`. To load we'll write and save a new line in this file with:

```
{...}
source /home/henrique/my-own-functions.sh
{...}
```

After save the change, we need to reopen the bash to verify if our new function is available correctly. To use our new function we'll just type `MyFirstFunction` and press enter. See the output:


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

---

## Extra

You can test your function without need to reopen the terminal using the `source` command. For example:

```
source /home/henrique/my-own-functions.sh
```
Test-driven Development or TDD
Tags: testing, webdev, javascript, programming
Published: 2023-12-16 14:24:53


Let's talk about testing.

At which stage is it best to write tests?

Generally, there are three approaches:

- Tests are written after the code

- Tests are written alongside the code

- Tests are written before the code

In some situations, there aren't many options. For example, in system testing, tests mimic user behavior and perform actions in a browser.

**Such tests are written after the code.**

For lower-level tests, integration tests, and unit tests, one of the above options is usually available. The "write tests after the code" approach is one of the least user-friendly methods.

**Why?**

The process of writing code itself implies constant running of the code and checking that it works. For the simplest tasks, like educational ones, this running happens quite quickly.

It's easy to execute and easy to verify the correctness of the results.

For example: 
```
capitalize('hello'); // Hello
```

In real code, preparing data to test the code's functionality can take a lot of time, minutes, or even tens of minutes.

On the other hand, the result of the code being tested can be something complex, like a large number of records in a database or the output of a particular complex structure.

Then each code run for testing becomes an entire adventure.

It's difficult to prepare the data. It's difficult to check the work's result.

For example: Loading goods from 1C into a database.
```
loadGoodsFrom1c();
```

This is where the "write tests before code" option comes into play. For many beginner developers, this phrase confuses. How can you write tests before the code is written? It turns out, you can and it's even pleasant.

Suppose we want to write a function that can repeat a given string a specified number of times:
```
repeat('$', 3); // $$$
```
We know what it takes as input, we know what its output should be.

Can we write tests now?

Of course!
```
test('repeat', () => expect(repeat('$', 3)).toBe('$$$') )
```
How long does it take for an experienced developer to write such a test? I think about 15 seconds, which is exactly how long it took me to write the code above. But now, to check the functionality of this code, all you need to do is type the command jest in the console.

Testing before writing code has another powerful advantage. It forces the programmer to first think about the design of their solution, and how it will be used, rather than how beautifully they can implement it internally.

**Well-designed interfaces are the key to success.**

In the development world, the approach where tests are written before the code is called Test-Driven Development (TDD).

**TDD**
Nowadays, everyone continues to talk about this method. In it, tests are written for all parts of the code with maximum detail. This type of TDD, while emphasizing the importance of design, focuses on specific functions and classes of the application, instead of the whole picture.

But there is also another TDD, where tests on the internal parts are almost never written.
Choosing Between Abstract Classes and Interfaces in C#
Tags: csharp
Published: 2023-12-16 14:15:11

Choosing between abstract classes and interfaces in C# is a common dilemma that developers often face. Both of these mechanisms play a crucial role in achieving code reusability and enforcing contract adherence. However, understanding the differences between them is key to making an informed decision.

Abstract classes provide a way to partially implement a class while leaving specific details to its derived classes. By using abstract classes, you can define a common base class that inherits shared functionality to all its derived classes. This is useful when you want to provide some default implementation for subclasses, but also allow them to customize certain aspects of the class. Abstract classes can have both abstract and non-abstract methods, giving you flexibility in defining the structure of your class hierarchy.

On the other hand, interfaces define a contract that classes must adhere to by implementing all the defined methods and properties. They only provide a blueprint of methods and properties without any implementation. Interfaces are particularly useful when you want to ensure that different types share certain behaviors, regardless of their inheritance hierarchy. They allow for multiple inheritance, as a class can implement multiple interfaces simultaneously.

So, how do you choose between abstract classes and interfaces? The decision depends on your specific use case. If you need to provide a common base implementation for derived classes, use abstract classes. If you want to define a contract that multiple unrelated classes must adhere to, use interfaces. 

In some cases, a combination of both might be the best approach. You can have an abstract class that implements an interface, providing a default implementation for methods defined in the interface, while allowing subclasses to override if needed.

Ultimately, understanding the distinctions between abstract classes and interfaces, and evaluating your specific requirements will help you make an informed choice that best fits your coding needs.
What you learning about this weekend? 🧠
Tags: codenewbie, discuss, learning, beginners
Published: 2023-12-16 14:15:00

Hello folks 👋

What are y'all learning on this weekend?

Whether you're sharpening your [JS](https://dev.to/t/javascript) skills, making PRs to [your OSS repo of choice](https://github.com/forem/forem) 😉, sprucing up your portfolio, or [writing a new post](https://dev.to/new) here on DEV, we'd like to hear about it.

Hope you enjoy your weekend and have a good time soaking up that knowledge.


![Ben Stiller's character from Dodgeball saying "Let me hit you with some knowledge!"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve5o7652vg5q06daxbzv.gif)
Dynamically Sorting Object At Runtime Using Reflection C#
Tags: csharp
Published: 2023-12-16 14:12:45

In C#, sorting objects dynamically at runtime can be achieved with the help of reflection. Reflection allows us to examine and manipulate the structure and behavior of types in the code.

To dynamically sort an object at runtime, we first need to obtain the properties of the object using reflection. The PropertyInfo class provides methods to get information about the properties of a type.

Once we have the properties, we can retrieve their values for each object in the collection and compare them using a sorting algorithm. For example, we can use the Bubble Sort algorithm to sort the objects based on a specific property.

Here's a simple example:

```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

public class Program
{
    public static void Main()
    {
        List<Person> people = new List<Person>();
        people.Add(new Person { Name = "John", Age = 25 });
        people.Add(new Person { Name = "Alice", Age = 30 });
        people.Add(new Person { Name = "Bob", Age = 20 });

        string sortBy = "Name"; // Property name to sort by

        PropertyInfo property = typeof(Person).GetProperty(sortBy);
        List<Person> sortedPeople = people.OrderBy(p => property.GetValue(p)).ToList();

        foreach (Person person in sortedPeople)
        {
            Console.WriteLine($"Name: {person.Name}, Age: {person.Age}");
        }
    }
}
```

In the example above, we have a collection of Person objects. We specify the property "Name" as the one we want to sort by using the string "sortBy". The code uses reflection to obtain the PropertyInfo object for the property "Name".

The List.OrderBy method is then used to sort the objects based on the value of the specified property. The GetValue method is used to retrieve the property value for each object in the collection. Finally, we display the sorted objects on the console.

Using reflection to dynamically sort objects at runtime can be very powerful and flexible, allowing us to sort objects based on different properties without having to write separate sorting logic for each property.
Morsale Lighting
Published: 2023-12-16 14:11:41

We have our own design studio which develops unique collections that embody the latest trends in the industry. Illuminate your space with elegance and style. Explore our curated collection of modern chandeliers, dining room chandeliers, lighting fixtures.

[modern chandelier](https://morsale.com/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fv7e381txe7xtgmj3lqp.jpg)
Transplanting Git Branches
Tags: git, tricktip, programming, github
Published: 2023-12-16 14:08:57



Surely in your life as a developer you have come to this situation. You've made changes to your branch then pushed, and your github branch shows a series of undesired "shared" commits.

![shared-commits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1avsxiltljpdwmdmh38s.png)

It could be multiples causes to this problem but today we will focus on its solution.

quick-question: How do you often solve this problem?
(leave your comments 🙏)

Well, I used to solve this problem in one of these two ways:
1) Rebase interactive
2) New-Branch + cherry-pick

Any of those two process take between 5 and 15 minutes to complete depending on the number of commits and feels a bit tedious.

That was until get to know the `--onto` option of `git rebase` and I managed to do this task in 30 seconds with a single command 😎

This option allows you to cut a series of consecutive commits and paste them on top of the target branch.
The documentation in `man git-rebase` refers to this process as `transplant a branch` and this is the example shown there.

![transplant-from](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4p4ic15mhqd1slmxf01.png)

Where it indicates that initially `topic` depended on functionality introduced in `next` but then `next` was merged to `master` so we can now transplant `topic` on top of `master`

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

That can be done with this simple command:

![transplant-command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dm4efnxwvw2jl7s4npjm.png)

For the case presented in the first image we can see that we want to put `schexp-e2e-2` on top of `schexp-e2e` but we only want from `576c19ccd` to `8812f12b3b` (commits starting with 'test:' or 'fix:')

![transplant-result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59qytlynkdt7bc7a6p48.png)

The command for applying this transplant would be:
```bash
$> git rebase —onto schexp-e2e 576c19ccd^ 812f12b3b
```
Which would result in:
![my-result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90qhrldlgkoylvvxjmth.png)

It is straightforward, but it has a caveat which is not clearly specified in the documentation.
If you want to include the initial commit (second argument) into the result, then you need to add `^` at the end because the command starts pruning from its child. So if we want to include `foo` commit we need to indicate `foo^` which means parent of foo 

Hope you find this useful, thanks for reading!
If you want to know more about me, visit my [personal site](https://delbetu.github.io/) or drop me an [email](mailto:delbetu@gmail.com?subject=BlogPost), don't hesitate to reach out.
Happy coding!
React.js Send Button Component
Tags: freecodez, react, html, blog
Published: 2023-12-16 14:07:07

Hey there, You are most welcome to this article.

**React.js Send Button Component**

![React.js Send Button Component](https://res.cloudinary.com/freecodez/image/upload/v1702735622/images/ierqoe0troaxmwalnai8.webp)

For full source code visit : [https://freecodez.com/post/h1s1z8j](https://freecodez.com/post/h1s1z8j)


```html
// https://freecodez.com
const Hello = (props) => {
	return (
		<button>
			<div class="svg-wrapper-1">
				<div class="svg-wrapper">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 24 24"
						width="24"
						height="24"
					>
						<path fill="none" d="M0 0h24v24H0z"></path>
						<path
							fill="currentColor"
							d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
						></path>
					</svg>
				</div>
			</div>
			<span>Send</span>
		</button>
	);
};

```

Source Code : [https://freecodez.com/post/h1s1z8j](https://freecodez.com/post/h1s1z8j)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
How to use the Azure QuickStart Gallery to deploy a Template that creates a Virtual Machine
Published: 2023-12-16 13:53:05


Step 1
Search for Custom Template on Azure web browser and select Deploy custom template:

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

Step 2
On the Custom Deployment pane, click on create Linux Virtual Machine


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

Step 3
Fill in the project and instance details, click on review + create

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

Step 4
This is the result of review and create:

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

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

Step 5
Deployment is in progress, allow to be completed

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


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

The Deployment is complete, hence we are able to deploy Linux VM within few seconds.

Read and comment
need help about the image gallery starter template on next js
Published: 2023-12-16 13:52:58

Hi, after deploying the image gallery starter template on vercel it is not loading the photos from cloudinary. I tried to input different photos folders like Home, /home, /home/samples and so on but still it is not displaying the photos after successful demployment, could you please help with an idea?

this is what it should look like https://nextjsconf-pics.vercel.app
Mastering Full-Stack app | Spotify Clone Project with NodeJS, ExpressJS, EJS, CSS, Authentication
Tags: node, fullstack, tutorial, css
Published: 2023-12-16 13:27:20

{% youtube Ms5Uhj87XsE %}

Embark on an immersive journey into the world of full-stack development by building a fully functional Spotify clone from scratch. This comprehensive tutorial will equip you with the essential skills and knowledge to master both front-end and back-end technologies, empowering you to create sophisticated web applications.

Throughout this project, you'll gain hands-on experience with NodeJS, ExpressJS, EJS, CSS, and authentication mechanisms, enabling you to confidently tackle complex full-stack development challenges. We'll cover everything from setting up the development environment to implementing user authentication, and creating a dynamic and responsive user interface.

By the end of this tutorial, you'll have not only built a stunning Spotify clone but also mastered the art of full-stack development. You'll be equipped with the ability to design and develop web applications with confidence, opening doors to exciting career opportunities.

This tutorial is designed for both beginners and intermediate developers who are eager to enhance their full-stack development skills. Whether you're a novice programmer or a seasoned developer looking to expand your expertise, this comprehensive guide will provide you with the knowledge and tools you need to excel in the world of full-stack web development.

Join me on this exciting journey and master the art of full-stack development by building a remarkable Spotify clone project.


⏱️ Timestamps
0:00 - Demo
13:17 - Project initial
18:39 - Login
1:01:46 - User authentication
1:53:05 - Home
5:46:02 - Working with player
6:52:40 - Home media queries
8:04:47 - Explore
8:26:30 - Explore media queries
8:28:58 - Pagination
8:41:14 - Explore detail
8:58:02 - Album
9:08:52 - Album detail
10:04:20 - Album detail media queries
10:10:34 - Playlist
10:18:28 - Playlist detail
10:32:02 - Playlist detail media queries
10:34:26 - Profile
11:23:19 - Search
12:33:00 - Artist
13:06:09 - Track
13:52:57 - Track media queries
13:55:14 - Logout
13:58:57 - 404
14:04:55 - 404 media queries

---
Start with Infrastructure Templates
Published: 2023-12-16 13:26:00

Using templates in Brainboard for cloud architecture design streamlines the process of building and managing cloud infrastructures. 

Here's a comprehensive guide:

## Introduction to [Brainboard Templates](https://www.brainboard.co/marketplace/features/cloud-infrastructure-template):

- Brainboard templates are pre-designed and standardized architectures for creating and deploying cloud infrastructure. They include guidelines and best practices and cover aspects like virtual machines, storage, networks, and security. These templates are reusable, facilitate consistent deployment patterns, and help enforce governance policies​​.
- Templates can be quickly accessed in the design area with a 'Templates' button. You can search by keywords or select a preferred cloud provider to see specific templates. Brainboard offers both public and private templates. New users initially see only public templates but can convert their architectures into private templates for internal use​​.

## Types of Templates:

Brainboard offers two types of templates: 'Organization' templates, visible and usable only within an organization for different projects, and 'Public' templates, typically published by the Brainboard team and regularly maintained by cloud architects​​.

## Creating a Template:

To convert an architecture into a template, navigate to the architectures directory, select the architecture, and click on 'create template from architecture'. When creating a template, ensure to remove sensitive information, choose visibility (organization or public), assign a new name, and publish the architecture​​.

## Using a Template:


![Cloud Infrastructure template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pesojd8nvkq2wkfrn6tl.png)

Open the Cloud infrastructure templates catalog and select a suitable template based on your requirements and business goals. Review the template in detail, clone it into your project, either as a new architecture or into the current architecture, and customize it as needed. Once tested and modified, deploy the template to your environment​​.

## Modifying a Template:

Templates can be modified after publication. To make changes, select the template from the templates folder, perform necessary modifications, and update details like the template's name, status, description, visibility, and tags. If required, templates can also be deleted from the template catalog​​.

---


This guide offers a structured approach to leveraging [Brainboard templates](https://www.brainboard.co/marketplace/features/cloud-infrastructure-template), helping organizations efficiently deploy and manage cloud infrastructures with standardized, best-practice-based designs.