Forem: ????

Some secret git tricks that come in handy

???? — Thu, 30 Mar 2023 07:45:30 +0000

here are some secret Git tricks

Amending the Last Commit

When you commit changes to a Git repository, you create a new snapshot of your code. Sometimes, you may realize that you forgot to include a file, made a typo in a commit message, or made other small changes that you'd like to include in the last commit. Git allows you to amend the last commit with the --amend flag:

# amend the last commit with a new message
git commit --amend -m "New message"

# amend the last commit without changing the message
git commit --amend --no-edit

Reflog

Git keeps track of all the changes you make to your repository, including commits, merges, and other operations. The reflog is a log of all the changes to the Git repository, including all the commits, branch changes, and other operations. You can use the reflog to recover lost commits, reset to a previous state, or undo a rebase.

To view the reflog, run:

# view the reflog
git reflog

# reset to a previous state using the reflog
git reset HEAD@{N}

Interactive Rebase

Interactive rebase is a powerful tool that allows you to edit, reorder, or delete commits before merging them into the main branch. This is especially useful when you're working on a feature branch and want to clean up the commit history before merging it into the main branch.

To start an interactive rebase, run:

# start an interactive rebase
git rebase -i HEAD~N

# edit a commit message in the rebase
pick 1234567 Old message
reword 2345678 New message

# reorder commits in the rebase
pick 1234567 First commit
pick 2345678 Second commit
pick 3456789 Third commit

# delete a commit in the rebase
pick 1234567 First commit
drop 2345678 Second commit
pick 3456789 Third commit

Git Aliases

Git aliases allow you to create custom shortcuts for Git commands. This can save you time and typing, especially for frequently used commands.

To create a Git alias, run:

# create a Git alias for a command
git config --global alias.ci commit

# use the alias to commit changes
git ci -m "Commit message"

Git Stash

Git stash allows you to temporarily save changes that you're not ready to commit yet, without creating a new branch or committing the changes.

To stash changes, run:

# stash changes
git stash

# apply the most recent stash
git stash apply

# apply a specific stash
git stash apply stash@{N}

# list all stashes
git stash list

These are just a few of the many secret Git tricks that can help streamline your workflow, improve collaboration, and enhance security. With these tips and tricks, you'll be able to take your Git skills to the next level and become a more efficient and effective developer.

training an image model with tenserflow in nodejs

???? — Thu, 30 Mar 2023 07:32:54 +0000

Training an image model with TensorFlow.js in Node.js can be a powerful way to build machine learning applications that can recognize and classify images. In this article, we will walk through the process of training an image model using TensorFlow.js in Node.js.

Step 1: Install Required Packages

First, we need to install the required packages for our project. We need to install TensorFlow.js, which is the main library we will use to train and run our machine learning models. We will also need the Node.js File System (fs) package to read and write files to our file system.

To install TensorFlow.js and fs, run the following command in your terminal:

npm install @tensorflow/tfjs-node fs

Step 2: Prepare the Training Data

To train a machine learning model to recognize images, we need to provide it with a set of images and their corresponding labels. We can organize our training data into two folders: one for the images and one for the labels.

In this example, let's assume we have a set of images of cats and dogs, and we want to train a model to recognize whether an input image is of a cat or a dog. We can organize our training data like this:

train/
    cats/
        cat1.jpg
        cat2.jpg
        ...
    dogs/
        dog1.jpg
        dog2.jpg
        ...

For this example, let's assume that all of our images are the same size and have the same file format (e.g. .jpg). If your images have different sizes or file formats, you may need to preprocess them before training your model.

Step 3: Load the Training Data

Now that we have our training data organized, we need to load it into our Node.js application. We can use the fs package to read the images and labels from our file system.

Here's an example of how to load the training data into our Node.js application:

const tf = require('@tensorflow/tfjs-node');
const fs = require('fs');

const IMAGE_WIDTH = 224;
const IMAGE_HEIGHT = 224;
const NUM_CLASSES = 2;

const catsDir = './train/cats';
const dogsDir = './train/dogs';

const catsFiles = fs.readdirSync(catsDir);
const dogsFiles = fs.readdirSync(dogsDir);

const cats = catsFiles.map((file) => {
  const filePath = `${catsDir}/${file}`;
  const buffer = fs.readFileSync(filePath);
  const decodedImage = tf.node.decodeImage(buffer);
  const resizedImage = tf.image.resizeBilinear(decodedImage, [IMAGE_WIDTH, IMAGE_HEIGHT]);
  return resizedImage;
});

const dogs = dogsFiles.map((file) => {
  const filePath = `${dogsDir}/${file}`;
  const buffer = fs.readFileSync(filePath);
  const decodedImage = tf.node.decodeImage(buffer);
  const resizedImage = tf.image.resizeBilinear(decodedImage, [IMAGE_WIDTH, IMAGE_HEIGHT]);
  return resizedImage;
});

const images = cats.concat(dogs);
const labels = tf.tensor2d(
  Array.from({ length: cats.length }).fill([1, 0])
  .concat(Array.from({ length: dogs.length }).fill([0, 1]))
);

In this example, we first define some constants for the image width and height, as well as the number of classes (in this case, two: cats and dogs). We then use the fs package to read the image files from our file system, and we use the tf.node.decodeImage() function to decode the images into tensors that TensorFlow.js can use. We resize the images to the specified width and height using tf.image.resizeBilinear().

Finally, we concatenate the cat and dog images into a single array of tensors, and we create a labels tensor using the tf.tensor2d() function. We use Array.from() to create an array of labels for each image, with a 1 for cats and a 0 for dogs. We then concatenate the cat and dog labels into a single tensor.

Step 4: Define the Model Architecture

Now that we have our training data loaded, we need to define the architecture of our machine learning model. For image classification tasks, it is common to use a convolutional neural network (CNN).

Here's an example of how to define a simple CNN in TensorFlow.js:

const model = tf.sequential();

model.add(tf.layers.conv2d({
  inputShape: [IMAGE_WIDTH, IMAGE_HEIGHT, 3],
  filters: 16,
  kernelSize: 3,
  activation: 'relu'
}));

model.add(tf.layers.maxPooling2d({
  poolSize: 2,
  strides: 2
}));

model.add(tf.layers.conv2d({
  filters: 32,
  kernelSize: 3,
  activation: 'relu'
}));

model.add(tf.layers.maxPooling2d({
  poolSize: 2,
  strides: 2
}));

model.add(tf.layers.flatten());

model.add(tf.layers.dense({
  units: 64,
  activation: 'relu'
}));

model.add(tf.layers.dense({
  units: NUM_CLASSES,
  activation: 'softmax'
}));

model.compile({
  optimizer: tf.train.adam(),
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy']
});

In this example, we first create a new sequential model using tf.sequential(). We then add several layers to the model, including two convolutional layers, two max pooling layers, and two dense layers. We use the ReLU activation function for the convolutional layers and the softmax activation function for the output layer.

We then compile the model using the Adam optimizer, categorical cross-entropy loss function, and accuracy metric.

Step 5: Train the Model

Now that we have our training data loaded and our model architecture defined, we can train the model using the fit() method in TensorFlow.js.

Here's an example of how to train the model:

const BATCH_SIZE = 32;
const NUM_EPOCHS = 10;

await model.fit(images, labels, {
  batchSize: BATCH_SIZE,
  epochs: NUM_EPOCHS,
  shuffle: true
});

In this example, we define some constants for the batch size and number of epochs, and we call the fit() method on our model, passing in our images and labels tensors. We also specify the batch size, number of epochs, and shuffle option.

Step 6: Save the Model

After training the model, we can save it to our file system for later use. We can use the save() method in TensorFlow.js to save the model as a set of JSON and binary files.

Here's an example of how to save the model:

const MODEL_DIR = './model';

await model.save(`file://${MODEL_DIR}`);

In this example, we define a constant for the directory where we want to save the model, and we call the save() method on our model, passing in the file path to the directory.

Conclusion

In this article, we walked through the process of training an image model using TensorFlow.js in Node.js. We learned how to load the training data from our file system, define the architecture of our machine learning model, train the model, and save it to our file system for later use.

With this knowledge, you can start building your own machine learning applications that can recognize and classify images. Happy coding!

it's is gonna change how you code

???? — Thu, 30 Mar 2023 07:11:59 +0000

AI has been changing the way developers work in recent years. With advancements in machine learning, natural language processing, and other AI technologies, developers are now able to build smarter, more sophisticated applications in less time than ever before. In this article, we’ll take a look at some of the ways AI is changing the way developers work.

Automating Repetitive Tasks

One of the biggest benefits of AI for developers is the ability to automate repetitive tasks. This can include everything from generating code snippets to testing and debugging. By automating these tasks, developers can save time and focus on more complex tasks that require human intervention.

Enhancing Collaboration

AI tools are also enhancing collaboration between developers. By using machine learning algorithms, developers can work together more effectively by sharing code, collaborating on projects, and even identifying potential issues before they arise. This can lead to faster development times, better code quality, and improved collaboration across teams.

Improving Code Quality

AI can also be used to improve code quality. For example, natural language processing algorithms can be used to analyze code and identify potential issues. This can help developers identify errors and bugs in their code before they become a problem. Additionally, AI-powered code generators can be used to create code that is more efficient and optimized for performance.

Creating Smarter Applications

AI is also changing the way developers create applications. By incorporating machine learning algorithms, developers can build applications that are smarter and more intuitive. For example, AI-powered chatbots can understand natural language and respond to user queries in real time. Similarly, image recognition algorithms can be used to build applications that can identify objects in images and video.

Enabling Predictive Analytics

Finally, AI is enabling developers to use predictive analytics to make better decisions. By analyzing large amounts of data using machine learning algorithms, developers can identify patterns and trends that may not be apparent to humans. This can help them make more informed decisions about everything from product development to marketing strategies.

Facilitating Faster Development Cycles

Another major benefit of AI for developers is the ability to facilitate faster development cycles. With AI-powered tools, developers can quickly and easily generate code, test applications, and identify potential issues. This can help them develop applications more quickly and get them to market faster.

Enabling Personalization

AI is also enabling developers to create more personalized applications. By incorporating machine learning algorithms, developers can build applications that can understand user behavior and preferences. This can help them tailor the user experience to the individual, improving user engagement and satisfaction.

Enhancing Security

AI can also be used to enhance application security. For example, machine learning algorithms can be used to identify potential security threats and vulnerabilities. This can help developers create more secure applications and prevent data breaches.

Making Development More Accessible

AI-powered tools are also making development more accessible to a wider range of individuals. With low-code and no-code development platforms, individuals with little to no programming experience can create applications quickly and easily. This can help democratize the development process and make it accessible to more people.

Driving Innovation

Finally, AI is driving innovation in the development world. With new AI-powered tools and technologies emerging all the time, developers can push the boundaries of what’s possible. This can lead to new and innovative applications that solve complex problems and improve people’s lives.

In conclusion, AI is transforming the way developers work in a multitude of ways. From automating repetitive tasks to enabling personalization, enhancing security, and driving innovation, AI is changing the development landscape in fundamental ways. As AI technology continues to evolve, we can expect to see even more ways that it will transform the development process and help developers build smarter, more sophisticated applications.

this post was not written on dev.to

???? — Tue, 07 Jun 2022 15:20:48 +0000

rather used the api from here

:))

tryna make dev.to, with dev.to

???? — Fri, 03 Jun 2022 12:32:48 +0000

so i came across the dev.to api

and i thought it might be fun to make dev.to like website which, basically, takes articles from the dev.to api...

the api: https://developers.forem.com/api

i used svelte spa(single page application) to achieve the task since its is minimal and takes a ton of load out.

the application can be used to view posts(ofc), user profiles and user posts, see posts by tags and post comments.

here's the web app: https://dev--to.vercel.app/
here's the repo: atordvairn/dev--to

that's it. have a nice day

Deploying A Next.js App On Vercel

???? — Wed, 12 Jan 2022 14:25:17 +0000

vercel is the best platform to deploy and test your next.js application. Let's see how you can deploy there for free.

for this, you'll need to have one account:

vercel (ofc)

first of all, make a git repository with a next.js project

npx create-next-app
git init

Now install vercel globally:

npm i -g vercel
# or
yarn add -g vercel

deploy !

vercel
? Set up and deploy “~/web/my-new-project”? [Y/n] y
? Which scope do you want to deploy to? My Awesome Team
? Link to existing project? [y/N] n
? What’s your project’s name? my-new-project
? In which directory is your code located? my-new-project/
Auto-detected project settings (Next.js):
- Build Command: `next build` or `build` from `package.json`
- Output Directory: Next.js default
- Development Command: next dev --port $PORT
? Want to override the settings? [y/N]


# and for production
vercel --prod

Font Awesome- Explained

???? — Fri, 07 Jan 2022 16:03:04 +0000

user experience is null without icons.

In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents.

Icons are indicators about what the button, command or function or action actually does and helps in faster understanding of the interference. This, it's really important to know the correct icon for the specified place.

font awesome is the amazing javascript Library for importing numerus fonts into your webpage. it's Incredible.
Let's dive right in it:

installation

<script src="https://kit.fontawesome.com/85b07c1155.js" crossorigin="anonymous"></script>

The import might seem something like this if you have seen the link at the site.

usage

Here's the interesting part.
font awesome has four tones:

solid
regular (some are accessible to free users)
light (pro)
dual (pro)

each one has a different class in the html tag (generally <i> is chosen)

So it goes like:

<i class="fas fa-rocket"></i>
<!-- fas = font awesome solid -->
<!-- fa = prefix -->
<!-- rocket = name -->

This one was for the solid one, now see the one with dual tone

<i class="fad fa-rocket"></i>
<!-- fad = font awesome dual -->
<!-- fa = prefix -->
<!-- rocket = name -->

See how only one class changes when you switch tones.

so you don't need to open font awesome site evertime if you know the logic :))

wrapping up

font awesome is really awesome for any site.

Fonts should be nice to see and you should respect accessibility practices though.

originally published here at my blog

Make sure you're subscribed to the high dose javascript newsletter

of course I can't make you, but it take me a considerable amount of time to write these..

tweet this if you like it.
thanks!

Android.js - build android apps from nodejs

???? — Fri, 07 Jan 2022 15:10:02 +0000

If You Can Build A Website, You Can Build An Android App!
Android.js simple takes your node.js website and puts it into a WebView.

Yeah, i know that's a lot of disadvantages there but it also provides different APIs for you to interact with.

an android.js application isn't only a WebView like a front end of a site, it can also interact with the backend and interact with files and much more!

installation

To install Android JS binaries, use npm.


 bash
npm install androidjs

Install Android JS project generator and builder


 bash
npm install -g androidjs-builder

initialize


 bash
mkdir AndroidApp
cd AndroidApp
androidjs g
npm install

it will generate a sample project inside AndroidApp directory.

Which will look like:



AndroidApp
    |__ assets
    |       |__ ipc, css, js
    |
    |__ views
    |       |__ index.html
    |
    |__ main.js
    |__ package.json

main.js is the main file or we can say it is back process of your app which execute all the code written in node, so you have to write all the node js code inside main.js
index.html is the first view which is render by app initially
package.json to keep track of all your node packages
assets to store all assets of your app

time to build


 bash
cd AndroidApp
androidjs b

it will generate apk file inside dist folder

if this build command fails or generated any error, try to build with force command



 bash

androidjs b -f

Why not to use it

Android.js isn't better than react-native
But, at least you can (somewhat) throw your existing code in it and generate an API to work on a device just like android application.
React native stays the best way to make Android applications with react (JavaScript).

other resources

docs - documentation for android.js

Sample apps - some sample apps to go with..

conclusion

Android.js is an amazing framework if you don't know react

But if you know react, react native comes in handy at the first place.

originally published here at my blog

Make sure you're subscribed to the high dose javascript newsletter

of course I can't make you, but it take me a considerable amount of time to write these..

tweet this if you like it.
thanks!

react native- JavaScript is everywhere

???? — Fri, 07 Jan 2022 15:05:12 +0000

Welcome react native, now JavaScript runs on Android, Windows and iOS like anywhere!

Being a JavaScript developer, making mobile apps was just a WebView with our site running.
But now, we have react native which takes a but different approach and makes the application feel like a truly native application. It's having components to make android and iOS like UI.

And the code actually resembles the react code.
That means that you can make native apps with a little knowledge of react native.

install

npm install -g create-react-native-app
# OR
yarn add -g create-react-native-app

initialize

create-react-native-app myReactiveApp

This will install and configure react-native in a directory.

the cli!

the cli comes pretty handy in react-native. Install it with:

npm install -g react-native-cli
# OR
yarn add -g react-native-cli

using the cli

use yarn run to see available commands for your project:

yarn run

basics

React-native is really easy if you know some react
You can quickly learn the basics here if you have a good knowledge of react.

why react native ?

React native comes with a lot of advantages for a JavaScript developer

open source
free
great community
easy to learn ( if you know react a lill )
lots of components!

any alternative ?

Yes!, See my next article for intro to android.js which ships your nodejs application to and Android app!

wrapping up

Always bet on JavaScript.

originally published here at my blog

Make sure you're subscribed to the high dose javascript newsletter

of course I can't make you, but it take me a considerable amount of time to write these..

tweet this if you like it.
thanks!

Next.JS - the production ready react on steroids framework

???? — Fri, 07 Jan 2022 14:56:10 +0000

Next JS is an amazing JavaScript framework made on the existing react framework made by Facebook. Factors that make it amazing or the SEO features. Also Next JS as an inbuilt support for API structures which make it even more amazing when working with APIs.

It has a ton of inbuilt modules which makes development even more amazing text to image module as an instance. It automatically optimises the images as per the weight and height and other factors. The link module enables no refresh routing which fetches the JavaScript code and renders that instead of redirecting you to another page.

It's called react on steroids because of all these inbuilt module sentence of features which come along with next.
Other frameworks like blitz.js are made on top of next.js, adding more functionalities to the framework. Next JS has a support for server side rendering which makes it incredibly faster than react and the content is available to web crawlers too.

Next v12 is now using rust compiler and is having 5x faster builds than before!

installation

To initialise a next.js application, run:

npx create-next-app@latest
# or
yarn create next-app

You can create a TypeScript project with the --ts, --typescript flag:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

file systems in next

now see the file structure carefully

The pages directory is the entry point of the application as well as the URL structure of your website.
That is, pages/about.js will be available at [url]/about

The public directory will contain your assets and other images for files which are not controlled by next.
You can create as many folders and can also access them.

Like, making component folder which will contain usable components which you can reuse in different pages without writing same code every time.

wrapping up

Next js is an amazing framework for creating beautiful applications with react which perform amazingly in search results and performant on the user's side.
It's evolving into other framework too like blitz.js which are having a bit of ruby like approach.
Anyways, next is a must try if you're a react developer!

originally published here at my blog

Make sure you're subscribed to the high dose javascript newsletter

of course I can't make you, but it take me a considerable amount of time to write these..

tweet this if you like it.
thanks!

Forem: ????

Some secret git tricks that come in handy

Amending the Last Commit

Reflog

Interactive Rebase

Git Aliases

Git Stash

training an image model with tenserflow in nodejs

Step 1: Install Required Packages

Step 2: Prepare the Training Data

Step 3: Load the Training Data

Step 4: Define the Model Architecture

Step 5: Train the Model

Step 6: Save the Model

it's is gonna change how you code

Automating Repetitive Tasks

Enhancing Collaboration

Improving Code Quality

Creating Smarter Applications

Enabling Predictive Analytics

Facilitating Faster Development Cycles

Enabling Personalization

Enhancing Security

Making Development More Accessible

Driving Innovation

this post was not written on dev.to

tryna make dev.to, with dev.to

Deploying A Next.js App On Vercel

Now install vercel globally:

deploy !

read more here

Font Awesome- Explained

installation

usage

wrapping up

originally published here at my blog

Android.js - build android apps from nodejs

installation

initialize

time to build

Why not to use it

other resources

conclusion

originally published here at my blog

react native- JavaScript is everywhere

install

initialize

the cli!

using the cli

basics

why react native ?

any alternative ?

wrapping up

originally published here at my blog

Next.JS - the production ready react on steroids framework

installation

file systems in next

wrapping up

originally published here at my blog