In this social media era, information gets shared in various forms. Text, image, and video are the quite commonly used media formats on the internet.
Images are the commonly used format for displaying information in an attractive way. Images are easy to save and share info.&nbsp;
Images and videos are also the preferred media formats for getting good engagement for your posts on social media.&nbsp;
It's a good idea to convert text to images that are attractive and informative, which is nothing but called infographics.&nbsp;
Here is a tool using which you can convert text, tweet, or any other image into a beautiful image with an attractive background to share on different social media platforms.
The tool is called <a href="https://tweetlet.net/" target="_blank" rel="noopener">tweetlet </a>and the images generated by it are called tweetlets.&nbsp;
Let's learn more about this tweetlet tool to make cool photos out of it.
<h2 style="text-align: center;">Create beautiful images using tweetlet</h2>
Tweetlet.net site has three different modes for creating images:
<ol>
<li>Tweet to image</li>
<li>Image to a beautiful image with background</li>
<li>Text to image</li>
</ol>
To switch to a particular mode, just hover/click on the icon in the search bar, and using that you can switch to a tweet or image, or text mode.
The image can be resized with the help of the white clips provided on the edge of the image. Dragging by holding those resizers(white clips) will resize the image.&nbsp;
In every mode, there are two buttons for copying and downloading the image. Besides that, you can select the desired background from the preset gradients and adjust the image to a ready-made aspect ratio of 1:1 or 2:1.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://res.cloudinary.com/cloudtale/image/upload/v1647282518/devapt/Tweetlet.webp" alt="Tweetlet-create-images-from-tweets" width="720" height="296" />
<h3>1. Tweet to image</h3>
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://res.cloudinary.com/cloudtale/image/upload/v1647282616/devapt/Tweetlet-tweet-mode.webp" alt="Tweet-to-image-tweetlet" width="720" height="331" />
To convert any <a href="https://tweetlet.net/tweet" target="_blank" rel="noopener">tweet to an image</a> just copy the tweet's link and paste it into the search box of the tweetlet website.&nbsp;
It will create a beautiful quote-like image by default. With the help of controls, you can change it to a tweet mode from quote to make it appear exactly like the actual tweet.
With the help of controls, you can also adjust the size of the text, toggle the likes and shares of a tweet, change the background with various preset gradients.&nbsp;
Finally, when you are satisfied with the image, click copy or download it.&nbsp;
<h3>2. Image to a beautiful image with a background</h3>
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://res.cloudinary.com/cloudtale/image/upload/v1647282723/devapt/Tweetlet-image-mode.webp" alt="Image-to-beautiful-background-tweetlet" width="720" height="448" />
In the <a href="https://tweetlet.net/image" target="_blank" rel="noopener">image mode of tweetlet</a>, you can upload or paste any image directly in the tweetlet site and it will appear with a cool background.
You can resize the image with the help of the resizers.&nbsp;
A cool trick to create a stack-effect image is to copy the current image and paste it and repeat until the stack level you want.
You can change the background as per your interest and finally copy or download the image to share it on any platform you want.
<h3>3. Text to image</h3>
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://res.cloudinary.com/cloudtale/image/upload/v1647282766/devapt/Tweetlet-text-mode.webp" alt="Text-to-image-tweetlet" width="720" height="365" />
This is the most powerful way to convert various kinds of text into a beautiful image.&nbsp;
First, switch to the <a href="https://tweetlet.net/text" target="_blank" rel="noopener">text mode</a> and you'll see a text box with a resizer at the bottom, dragging which you can resize the height of the text box.&nbsp;
This text box supports markdown text. That means you can have rich text effects using this.&nbsp;
Syntax for the rich text as follows:
# Heading 1 =&gt; Heading 1
## Heading 2 =&gt;&nbsp; Heading 2
### Heading 3 =&gt; Heading 3
*italics* or _italics_ =&gt; italics
**bold** or __bold__ =&gt; bold
`inline code` =&gt; <code>inline code</code>
For code blocks: ```js console.log('Hi'); ````
Mentioning the correct language will enable to highlight the code as per that language, else it will show just a plain pre-formatted text.&nbsp;
Using the markdown syntax, you can even embed other images along with your text to create beautiful images using all of it.
You can learn more about the markdown syntax <a href="https://www.markdownguide.org/basic-syntax/" target="_blank" rel="noopener">here</a>.
Text mode will be useful for sharing code snippets and rich text info easily as an image.
If you want to create images instantly just by selecting the text you can check this <a href="https://chrome.google.com/webstore/detail/text-to-image/nkljaohokglebeljcgchmehnhdieakda" target="_blank" rel="noopener">text to image</a> chrome extension that generates images from selected text in the blink of the eye.
As usual, once you are satisfied with all the adjustments, you can copy or download the image to share it on any platform you wanted.&nbsp;
There's a dark mode icon at the top right corner where you can switch to the dark mode or light mode based on your preference. Your gradient and mode settings will be stored locally so whenever you open the site your previous settings get reflected.&nbsp;
You can directly try out all the above-mentioned modes from <a href="https://tweetlet.net/" target="_blank" rel="noopener">tweetlet.net</a> right away. And if you want any new features you can send a message/feedback from the message icon present at the bottom right corner.&nbsp;
Last but not the least, if you like this tweetlet tool, then do share it with your friends.&nbsp;

Here is the way to create beautiful images from your tweets, text and any other image just in a snap. This helps to share long text as images easily.

Create beautiful images from tweets, text

Create beautiful images from tweets, text and other images

In JavaScript, an array is a collection of ordered elements and there's no restriction for the type of elements.&nbsp;
<blockquote>
An array is said to be flat or flattened if there are no nested arrays inside the array.&nbsp;
</blockquote>
Let's see what an array and a flattened array look like with an example.
<pre class="language-javascript"><code>// An array with nested arrays
const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

// Flattened array
["a", "b", "c", "d", "e", "f"]
</code></pre>
In this article, we are going to see different ways to flatten arrays in JavaScript.&nbsp;
<h2 style="text-align: center;">Flatten arrays in JS</h2>
We'll see different ways to flatten this <code>letters</code> array in JS.&nbsp;
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];</code></pre>
<h3>1. Using concat() array method</h3>
<code>concat()</code> array method is used to merge two or more arrays. It takes a value or an array as an argument and concatenates it to the original array and returns the result as a new array without mutating the original one.
We'll use an empty array and concatenate the <code>letters</code> array elements with the help of a spread operator to spread the nested array elements.&nbsp;
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = [].concat(...letters);

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<h3>2. Using concat() array method with apply()</h3>
We can use <code>apply()</code> method on <code>concat</code> function as apply method helps to pass arguments in the form of an array which we have already seen in <a href="https://devapt.com/call-apply-bind-javascript" target="_blank" rel="noopener">call, apply, bind Javascript</a> article.
So the idea is to pass every individual element of the array to the <code>concate</code> method instead of the whole array.
In the previous method, we have used the <code>...</code> spread operator for the same reason.&nbsp;
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = [].concat.apply([], letters);

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
The first array need not be empty and could be anything in <code>[].concat</code> because the array that we pass as the first argument to <code>apply()</code> will be considered for creating the new array.
<h3>3. Using reduce() array method</h3>
We can use <code>reduce()</code> method to flatten an array as flattening is a way of reducing the original array to a different form.
The idea is to spread every element and nested element in a new array and return the result, and the result is nothing but the flattened array.
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = letters.reduce((acc, curr) =&gt; [...acc, ...curr], []);

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
We can omit the array given as a second argument to the <code>reduce</code> method, it is just to initialize the accumulator with an empty array.
<h3>4. Using the flat() array method</h3>
There's a new array method called <code>flat()</code> added in the <a href="https://262.ecma-international.org/10.0/" target="_blank" rel="noopener">ECMAScript version 2019</a> or ES10. What it does is simply flattens the array when it is called.
Using <code>flat()</code> method we can flatten arrays of any depth by passing the max. depth to be flattened to as an argument to the flat method. The default depth is 1.
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = letters.flat(); // default depth 1

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
To flatten an array of depth greater than 1.
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd', ['e', 'f']]];

const flatArray = letters.flat(2); // Flatten until depth 2

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
To flatten any amount of depth, we can pass <code>Infinity</code> as the argument to the <code>flat()</code> method.
<h3>5. By converting to string and splitting</h3>
Arrays of any depth when converted to a string gets flattened and will be joined by <code>,</code>(comma).
So using this technique after converting an array to a string and then splitting it by <code>,</code> we can flatten the array.
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = letters.toString().split(',');

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
The main problem with this method is that it works well when all the elements in the array are strings or of any one specific type, say numbers. Because after generating the array we can convert it to a specific type.&nbsp;
But when the array consists of multiple type elements then it gets difficult to use this method.&nbsp;
Let's see how an array of numbers can be flattened using this technique.
<pre class="language-javascript"><code>const numbers = [1, 2, [3, 4], [5, 6]];

const flatArray = numbers.toString().split(',').map(Number);
// or const flatArray = numbers.join().split(',').map(Number);
// or const flatArray = `${numbers}`.split(',').map(Number);

// flatArray: [1, 2, 3, 4, 5, 6]</code></pre>
And that is all about different ways to flatten Javascript arrays. Most of the browsers have support for <code>flat()</code> method so it would be handy to use this method in most of the scenarios.
If you have any other way to flatten the arrays in a better manner then do share it with us and we'll be happy to update this article with that.&nbsp;

There are different ways to flatten arrays in JavaScript. Here are the 5 different ways to obtain flat arrays using one liners in JS.

Sample excerpt

Learn to flatten array in JavaScript with one liners

Git is a well-known version control system used by the majority of developers and organizations.&nbsp;
While making commits to the git repository there might be some accidental commits involving unintended changes or deletion of files.&nbsp;
In such a case, we can easily undo commits or changes with the help of a few git commands. Undoing git commits can be done in various methods based on how we wanted to keep the git history.&nbsp;
In this article, we're going to see those different methods to git undo commits.&nbsp;
Before actually diving into it, let's initialize git and commit a few files, so that we can use that to look into various git reverting commands.
Go to your favorite command line tool and run the below commands. Make sure that you have installed git in your system.
<pre class="language-bash"><code># In the folder where you want to have a git repo
&gt; git init
&gt; echo One &gt; one.txt; echo Two &gt; two.txt; echo Three &gt; three.txt; # Creating three files
&gt; git add one.txt
&gt; git commit -m "Adds one.txt"
&gt; git add two.txt
&gt; git commit -m "Adds two.txt"
&gt; git add three.txt
&gt; git commit -m "Adds three.txt"
&gt; git log --online

bdb52f3 (HEAD -&gt; master) Adds three.txt
c387fcb Adds two.txt
e99f4bf Adds one.txt</code></pre>
Let's make some changes to a file and commit it.
<pre class="language-bash"><code># Making changes to one.txt
&gt; echo Edited one &gt; one.txt
&gt; git commit -am "Updates one.txt" # Adding and committing directly
&gt; git log --oneline

8b730e8 (HEAD -&gt; master) Updates one.txt
bdb52f3 Adds three.txt
c387fcb Adds two.txt
e99f4bf Adds one.txt</code></pre>
Now let's see how to git undo the last commit.
<h2 style="text-align: center;">4 ways to git undo last commit</h2>
<h3>1. Using git revert</h3>
<code>git revert</code> command does the same as it states, that is it reverts any committed changes. This git command reverts the specified commit and creates a new commit with the reverted changes.&nbsp;
This is the most preferred git command for undoing or reverting any commits because this doesn't delete or orphan any of the commits. In short, this command doesn't rewrite the git history.
Let's see how to undo the commit using <code>git revert</code> command
<pre class="language-bash"><code># Undoing the last commit using git revert
&gt; git revert HEAD</code></pre>
To revert the last commit, we can use HEAD as it points to the last commit or we can use the hash of the commit we want to undo. By running the above command opens the configured editor to change the default message and once you close the editor, the last commit gets reverted with a new commit having "Revert" prefix to the actual commit name.&nbsp;
To avoid the editor from opening you can use <code>--no-edit</code> flag. To avoid committing the changes you can use <code>-n</code> or <code>--no-commit</code> flag as a result the reverted changes will be added to the staging(index) area without committing it.
<pre class="language-bash"><code># Reverting without opening the editor
&gt; git revert --no-edit HEAD

# Reverting without committing the reverted changes
&gt; git revert -n HEAD</code></pre>
Now let's see another way to git undo last commit.
<h3>2. Using git reset&nbsp;</h3>
The git reset is a powerful command using which we can undo a series of previously committed changes. This command orphans the commits by resetting the head to a specified state.
<code>git reset</code> takes the commit hash or reference from HEAD to which it is going to reset to. Once the git reset command is run, there won't be any latest commit logs up to the commit hash.
We can undo the last commit in three different forms with the <code>git reset</code> command. There are three flags that can be used with this command, --soft, --mixed(default), --hard.&nbsp;
On <code>--soft</code> reset, the commit gets removed and the changes get added to the staging area.&nbsp;
On <code>--mixed</code> reset(default), the commit gets removed and the changes get added to the local or working area.&nbsp;
On <code>--hard</code> reset, the commit gets removed and all the changes would be lost.&nbsp;
So based on your requirement you can pick the appropriate flag to undo the last commit.
<pre class="language-bash"><code># Undoing the last commit using git reset
&gt; git reset HEAD^ # points to the commit before the last one

# To completely undo the commit
&gt; git reset --hard HEAD^</code></pre>
Now let's see the third way to undo the last git commit.
<h3>3. Using git restore</h3>
The <code>git restore</code> command is used to restore files in the working directory from the index or from other commits. We can also restore files to the index from other commits.&nbsp;
<code>git restore</code> will not remove the previous commit logs or messages, it just restores the files or the directories as before.
<pre class="language-bash"><code># Restoring the working directory from index
&gt; git restore . # .(dot) means complete directory</code></pre>
The above command just restores everything from the last commit. But what we want is to restore the commit before the last commit.&nbsp;
To restore files from other commits, git restore has <code>--source</code> flag, using that we can restore the parent of the last commit i.e., HEAD~1.
<pre class="language-bash"><code># Undoing the last commit using git restore
&gt; git restore --source=HEAD~1 .</code></pre>
By running the above command, the working directory will be with changes as that of the last commit's parent. It's just like <code>git revert -n HEAD</code> result but all the changes will be in the working directory not in the staging area.&nbsp;
To restore the changes to the staging area just use the <code>--staged</code> flag.&nbsp;
So using <code>git restore</code> command you will have the flexibility to commit changes with any message unlike git revert default message and also you can restore files specifically instead of the whole directory.&nbsp;
And now let's see the fourth way to undo the last git commit.
<h3>4. Using git rebase -i</h3>
The <code>git rebase -i</code> is a very powerful command for rewriting the git history. This command is used for rewording, editing, picking, dropping, squashing, etc commits.&nbsp;
git rebase with interactive flag helps to drop the commits. The same feature we can use to undo the last commit.&nbsp;
To make changes to the commit using <code>rebase -i</code> we need to go(rebase) to the parent of that commit and then make any changes we want.
<pre class="language-bash"><code># Undoing the last commit using git rebase
&gt; git rebase -i HEAD~1 # select d - drop from the menu and proceed
</code></pre>
When you run the above command your default editor gets opened with a list of actions you can perform on the last commit, select <code>d</code> or <code>drop</code> option and proceed. That will remove the last commit from the git log.&nbsp;
And that is how you can undo last git commit using rebase -i.
<h3>Points to note</h3>
<code>git revert</code> and <code>git restore</code> will not modify the git history or log. So when dealing with collaborative works, it's good to use git revert and git restore for undoing the commits. This will help to maintain a clear log of all actions.&nbsp;
<code>git reset</code> and <code>git rebase -i</code> will remove the logs of the commits. You can prefer this when your commits are local but in collaborative cases, you should strictly avoid using these because by chance you may end up rewriting the history of other people's commits.&nbsp;
Those are all the methods one can use to undo git commits. Which method to use depends on the individuals and their work environment.&nbsp;

Here are the 4 ways to git undo last commit in simple and easy steps. You can learn which git commands to use to undo commits effectively.

Posts tagged with Programming

Create beautiful images from tweets, text and other images

Learn to flatten array in JavaScript with one liners

4 ways to git undo last commit in simple and easy steps