DEV Community: John J Davidson

HTML Email image cut in half?

John J Davidson — Tue, 25 Apr 2023 08:24:05 +0000

TL:DR

Set the line height of the container to 1.

div {
    line-hieght: 1;
}

You might need to add “display: block;”

div {
    display: block; 
    line-height: 1;
}

Long version:

If you are creating an HTML email that is to be sent to an Outlook email client, you may see in test emails that an image is being cut in half. Like so:

Even when you have set the height and width of a html image manually and inline , outlook still seems to have issues displaying the image correctly depending on what you emails markup may look like.

You may have to deal with WYSIWYG editors that are auto generating the email and they can also face errors that come out of no where.

Putting, inline “display: block; line-height: 1;” like so can force outlook to display the image correct.

<img style="display: block; line-height: 1;" src=""/>

You may have to experiment with different inline styles depending on your email. Like so.

<td width="156" height="42" align="right" valign="bottom" style="line-height: 1;">
    <table width="156" border="0" cellspacing="0" cellpadding="0" style="line-height: 1;">
        <a href="https://www.example.com/" target="_blank" style="display: block; line-height: 1;" >
            <img style="display: block; line-height: 1;" src="https://www.example.com/emarketing/logo.jpg" width="196" height="42">
        </a>
    </table>
</td>

Result:

The reason for this is due to Outlook not respecting the height attribute if line-height is not set to at least 1.

Sources:

https://stackoverflow.com/a/21603951

https://www.campaignmonitor.com/css/

How to undo git commits? Locally & Remotely.

John J Davidson — Sun, 26 Jun 2022 20:38:00 +0000

TL:DR ⏩

In the repo, open a new terminal window
Enter this command: git log --oneline --decorate --graph
Find the commit hash you want to revert the repo to.
Enter this command: git reset --hard theHashOfTheCommitHere

Example: git reset --hard 0ffbffgs3

Then enter: git clean -f -d
Finely you need to force push the reset repo to the remote with this command: git push -f

To exit git at any time you and type q next to the colon at the bottom of your CLI.

In summary:

git log --oneline --decorate --graph
git reset --hard xxxxx
git clean -f -d
git push -f

Long version. ⬇️

At some point, you'll be commit something to a repo that you look back and wish you didn't commit that feature/bug fix/OnlyFans video.

So when that happens and you have even pushed the commit to remote, what should you do?

How do you undo git commits?

Locally & remotely.

Step #1: `git log --oneline --decorate --graph`

You need to explore your git repo and the status of it. This is so we can find the hash number for the commit you want to revert back too.

You need to open the repo in your terminal/command line interface (CLI) inside of your working repo directory and in the branch you want to reset the commit on. You can enter this command:

`git log --oneline --decorate --graph`

This will output/display this in your terminal:

Let's break this command down to better understand it.

To exit git at any time you can type q next to the colon at the bottom of your CLI.

⭕
If you don't need to know the break down of the command, go to:
Step #2: git reset --hard xxxxx
⭕

`git log`

This part simply gives you a record or log of all the commits you have created in this repo. However unlike the above screen shot which lists them all on one line.

This gives you very detailed description of your git commits.

`git log --oneline`

This is the first flag in the command and is used to format the output of the log. if you do not use this the output log would look like this:

No --oneline

With --oneline

Git Documentation says:
This is a shorthand for "--pretty=oneline --abbrev-commit" used together.

`git log --oneline --decorate`

The second flag in the command is another formatting flag, that will highlight what Git Reference you are on and there are some options you can added to the end of --decorate such as --decorate[=short|full|auto|no]

Git references are bit out of the scope for this tutorial, however if you are aware of them, you may find this part a useful flag.

Here is a small demo of the command.

git log --oneline --decorate=short

git log --oneline --decorate=full

--decorate[=short|full|auto|no]
Print out the ref names of any commits that are shown.

`git log --oneline --decorate --graph`

--graph is the third and last flag in the command. It is a non essential flag, but will allow for a bit of a nice formatting so you can visualize your git log better.

Specifically it will deal with commits you have merged from other branches and show that merge in a graphical text based visualization.

No --graph

With --graph

And that is what, git log --oneline --decorate --graph does.

Step #2: `git reset --hard xxxxx`

Now you have the commit hash you need and now it is time to reset your working git branch to the commit you want to revert back too.

To do this, you need to do use the command:

git reset --hard xxxxx

--hard
Resets the index and working tree. Any changes to tracked files in the working tree since are discarded. Any untracked files or directories in the way of writing any tracked files are simply deleted. Source: git-reset Documentation

What does that mean? Well you have to compare this command to:

git reset --soft xxxxx

Let's look at the CLI/terminal in VScode in a working repo and compare the two.

With: git reset --soft xxxxx

When using --soft as a mode you will reset the working directory to the requested commit, however all the changes in the commits after the requested commit will undo, and become staged changes in the repo. As seen above.

With: git reset --hard xxxxx

The working directory is now completely clear of all commits after the reset to the requested commit, and there is no staged changes, the commits are gone. This is irreversible.

Well kind of irreversible...

If you notice at the bottom of the above screenshot you'll see this:

I still have one commit to pull from remote. As you guessed it. It is the one I just reset. At this point your local working directory has been reset, and if that is all you need to do. Then you have finished. But...

...how do you reset a commit when you have already pushed it remotely?

Step #3: `git clean -f -d`

Step back and make sure you have used the command:
git reset --hard xxxxx

After that you can safely move on to the git clean.

https://www.git-scm.com/docs/git-clean

-d

Normally, when no is specified, git clean will not recurse into untracked directories to avoid removing too much. Specify -d to have it recurse into such directories as well. If any paths are specified, -d is irrelevant; all untracked files matching the specified paths (with exceptions for nested git directories mentioned under --force) will be removed.

-f
--force

If the Git configuration variable clean.requireForce is not set to false, git clean will refuse to delete files or directories unless given -f or -i. Git will refuse to modify untracked nested git repositories (directories with a .git subdirectory) unless a second -f is given.

These two descriptions of the -d & -f flag are quite indepth. But to help with a jist what they are doing along with git clean.

They will first tell git to clean the working directory of any and all untracked files, using the flag -d will say that you have not specified a path and -f will tell git "just do it, don't warn me" because once done this can not be un done.

Step #4: `git push -f`

--force

...This flag disables these checks, and can cause the remote repository to lose commits; use it with care.

The above description covers the git push -f quite well, however it warns us that we should use this command with care and we should, but this is the part where we want git to overwrite the existing commit on the remote repo. We want to undo a commit remotely. but to use this command is the final step. once done the commit is undone and you no longer need to do or change anything else.

git push -f

You have now undone a commit remotely.

🥳 Congratulations! 🥳

Any questions or queries. Please let me know in the comments.

Any feedback is appreciated as well!

How to open any folder with Sublime Text 3 in Windows.

John J Davidson — Sun, 20 Jun 2021 09:48:48 +0000

Introduction:

Hi, this is my first post/tutorial. I hope you enjoy it and find it useful. In this tutorial I will be adding Sublime Text 3 to your right click menu (Context menu), so you can open files/folders in Sublime Text 3, just like you would with VScode.

In this tutorial I am using Windows 10, but you should be able to achieve the same result in Windows 8/8.1 and 7.

TL;DR:

WIN+R keyboard shortcut.
run "regedit.exe".
copy pasting into the address bar at the top:

HKEY_CLASSES_ROOT\Directory\Background

Inside the shell folder, create a new key and call it: "Open with Sublime Text 3" (or whatever you'd like to call it)
Make another new key inside of this and call it: "command"
Modify the key to edit the data value of this new key.

Put the path for your computers version of Sublime Text 3. For me it is:

C:\Program Files\Sublime Text\sublime_text.exe .

Make sure to have a full stop at the end. The full stop as a flag tells windows to open this folder/directory in Sublime Text 3.

Test it in any folder you like.
Done.

P.S A more detailed version of this TL;DR with images can be seen at Step 5.

Step - 1:

In order to edit or add a new item to your right click menu.
You will need edit the Windows Registry to change a setting/registry key for your Windows operating system.

So begin by going to the bottom left of your taskbar and click:
"Start"

Step - 2:

You will need to open/start the Windows "run.exe" and search for the "regedit.exe" in the input field. Once you type that in click "Ok". You can also use WIN+R keyboard shortcut to access "run.exe".

Step - 3:

Once you run "regedit.exe" you will have a new window appear in front of you. This is called the Registry Editor

⚠️WARNING⚠️ Editing the Windows Registry incorrectly could do damage to your computer's operating system. So please take care from this point forward, and make a back up in case something goes wrong. Thankfully to make a back up is fairly easy.

File > Export > and save the file with what ever name you'd like.

Step - 4:

Now with your fancy new backup, you can edit your registry with glee.

You now need to navigate to/look for a folder called:
HKEY_CLASSES_ROOT\*\shell\

This should be at the very top of your Registry Editor window.

Now you will see a list of different folders. These should be different for you, depending on what you have installed on your computer.

If you have Sublime Text 3 installed, there should be a folder already here for you to see.

To see what this does, look for a file on your computer and right click on it you should see something like this:

As a test you can edit this file/registry key to change the name and see the change on your right click menu.

Before:

After:

Result:

Now you might be asking yourself.

"That's great John, but why should I bother editing something that is already installed by Sublime Text 3?"

I am glad you asked that. Because yes it would seem pointless to edit something for your benefit that is already there. But there is a limit to this "Open with Sublime Text 3" option, that I hope to resolve.

You cannot open a folder of your choice with Sublime Text 3.

This isn't provided to you by default or on install. And there was many times I wanted that option. So why not add it now?

Step - 5:

In your Registry Editor lets navigate to a folder called:
HKEY_CLASSES_ROOT\Directory\Background

You may notice it's with a a lot of other folders so for speed I recommend typing/copy pasting into the address bar at the top:

HKEY_CLASSES_ROOT\Directory\Background and it should take you right there.

You should now see a shell folder. Lets add a new key to it.

Call it: "Open with Sublime Text 3" (or whatever you'd like to call it)

Now make another new key inside of this and call it: "command"

Now double click (Default) or right click Modify to edit the data value of this new key.

Now you need to add the system path for your computers version of Sublime Text 3. For me it is:

C:\Program Files\Sublime Text\sublime_text.exe

Your installation might be different.

When you have the path you need to add it to the value like so:

And one very important thing to add at the end of:
C:\Program Files\Sublime Text\sublime_text.exe

is a full stop .

I know my screen shot above isn't very clear but adding the full stop as a flag tells windows to open this folder/directory in Sublime Text 3.

This is the full path:

C:\Program Files\Sublime Text\sublime_text.exe .

Step - 6:

Now find any folder you wish and right click inside of it to test it out.

Done 🎉

And this is as far as you need to go, you can now open Sublime Text 3 (or any program you want really) with the right click context menu. Congratulations!

Optional extras 🌟

Adding an Icon:

Right click on the key you created, not command. Just "Open with Sublime Text 3". New > String value
Call it: Icon
Set it to the same value as the path you set above in Step 5.
"C:\Program Files\Sublime Text\sublime_text.exe"

Yes with the " " around the path.

Result

Custom position in context menu:

Right click on the key you created, not command. Just "Open with Sublime Text 3". New > String value
Call it: Position
Set it to the value to:

Top

Result

If you want the position to be at the bottom. Set the value to:

Bottom

Result

Inspiration:

This post came from my own desire to add Sublime Text 3 to the Windows context menu and open it in any folder I wanted. What I thought would be a simple thing turned out to be fairly difficult for me and a lot of DuckDuckGo later, I am here. This post is my documentation of the process so it's available for me in the future and I hope it is helpful to you. Dear reader. :D

With thanks:

To this fantastic stackoverflow question and discussion giving me a lot of help and guidance on how to add an icon to my new context menu item.
To this Techspot article going a bit more in depth with images and pointing myself the right direction to really flesh things out.
To this Livewire article. Going deep on what a registry key and how to edit them.

Jargon explainer:

Windows 7/8/10: Windows is the operating system that is being used in this tutorial, (7/8/10) is the version of the operating system link to Wikipedia article

Context menu: A small box/menu that appears when you right click anywhere in a Windows operating system.
Windows Registry: The registry in windows is the place that store all of your windows computer software settings. stuff like: hardware devices, user preferences, and operating-system configurations. link to detailed explainion
HKEY_CLASSES_ROOT is the global "hive"/folder that holds the all the information that effects all users on that computer. Similar to a global variable/root directory that you can edit.
Environment variables are surrounded by the percent sign (%), as in %temp%, to distinguish them from regular text. You can reference user variables and system variables as we did in the "Opening the folder with custom file name/date:"

DEV Community: John J Davidson

HTML Email image cut in half?

TL:DR

Long version:

Result:

Sources:

How to undo git commits? Locally & Remotely.

How do you undo git commits?

Locally & remotely.

Step #1: git log --oneline --decorate --graph

git log --oneline --decorate --graph

git log

git log --oneline

git log --oneline --decorate

git log --oneline --decorate --graph

Step #2: git reset --hard xxxxx

Step #3: git clean -f -d

Step #4: git push -f

How to open any folder with Sublime Text 3 in Windows.

Introduction:

TL;DR:

Step - 1:

Step - 2:

Step - 3:

Step - 4:

Step - 5:

Step - 6:

Done 🎉

Optional extras 🌟

Adding an Icon:

Custom position in context menu:

Inspiration:

With thanks:

Jargon explainer:

Step #1: `git log --oneline --decorate --graph`

`git log --oneline --decorate --graph`

`git log`

`git log --oneline`

`git log --oneline --decorate`

`git log --oneline --decorate --graph`

Step #2: `git reset --hard xxxxx`

Step #3: `git clean -f -d`

Step #4: `git push -f`