DEV Community: Radu-Alexandru B

Running a Node.js App (Angular/React) on Android using Termux

Radu-Alexandru B — Fri, 29 Sep 2023 16:25:52 +0000

Hello everyone!

In this tutorial, we will run an Angular Node App (and also a React App) on Android, and host it on localhost by using the Termux app. We will also use the Acode Editor application to browse and easily change our code files. NO ROOT IS NEEDED.

Disclaimer:

The chances of encountering any issues that may affect your Android device are minimal to none. However, I'm not responsible for any damage, data loss, or malfunction that may occur to your Android device after following this tutorial.

Prerequisites:

Any Android device running Android 10 and up. In my case I will either use a Lenovo Tab P11 Pro 8GB in Productivity Mode or a Samsung Galaxy S20 FE 6GB in DeX Mode with a Bluetooth Mouse & Keyboard connected
Termux App from F-Droid - Currently on Version 0.118.0 (118) - Added on 2022-01-11
Acode Editor App from F-Droid - Currently on Version 1.8.6 (312) - Added on 2023-09-01

Table of Contents:

Installing Termux
- Installing apt package manager and other dependencies
- Installing Nodejs
- Installing and Running Angular (ng)
Installing Acode Editor App
Installing other packages in Termux
- Running React App (npx)
- Installing Java
Conclusions

Installing Termux

First, we need to install Termux (terminal) App from F-Droid * (or from the Termux GitHub Repository). We will not install the Termux from Google Play Store due to lack of updates there.

* Please make sure that you don't press the big blue "Download F-Droid" button as it will download the F-Droid store instead of the Termux App!
Currently latest available version as of now (September 24, 2023) is Termux Version 0.118.0 (118) added on 2022-01-11

Installing apt package manager and other dependencies

Now that we are in the Termux app on our Android device, we can run the following:

Update and upgrade Termux's pkg package manager



pkg update -y
pkg upgrade -y

Note: In Termux you can click and hold to show the copy/paste menu (in order to copy-paste these commands)

Install apt Package Manager as well as updating and upgrading (Note that we add the -y option to automatically say "yes" to the install when asked)



pkg install apt -y
apt upgrade -y && apt update -y

Install openssl-tool dependency



apt install openssl-tool -y

Some other packages might come in handy, such as git



apt install git -y

Installing Nodejs

Now, time to actually install Node.js

We just need to run:



apt install nodejs

And check the installed version



node --version

Note: If we want a different version of Node.js

We can get the apt package for nodejs 16 by running the following and update the apt package manager including this version
curl -sL https://deb.nodesource.com/setup_16.x | bash -

apt update
And then just install it
apt install nodejs

node --version
Resource: https://computingforgeeks.com/how-to-install-node-js-on-ubuntu-debian/?expand_article=11

Installing and Running Angular (ng)

Let's install Angular "globally" by running:



npm install -g @angular/cli



ng version

And also let's create a quick demo project:

First, let's create a separate folder



mkdir projects
cd projects/

And create a new Angular app within angularapp directory



ng new angularapp
cd angularapp/

Now let's run locally this Angular app. The default Android browser should open to http://localhost:4200/



ng serve --open

Installing Acode Editor App

With Acode App from F-Droid installed, we can now browse through Termux's created directories and files within its emulated storage.

And of course, edit files and see changes in real-time (without refreshing the app).

Installing other packages in Termux

Running React App (npx)

We can also create a React application.

Just run the following (also write "y" if prompted to install the "create-react-app" package)



npx create-react-app reactapp



cd reactapp

Then run it on http://localhost:3000/



npm start

Installing Java

As a bonus, we can also install other APT packages such as openjdk to run Java:

We can search any available packages within APT (compatible with an ARM-based CPU) by running apt search java
We see that we can install Java 17 by running



apt install openjdk-17



javac --version
java --version

Now let's do a quick test



cd projects/
mkdir javaapp && cd javaapp

By writing a fast hello world example



vi Hello.java

# Note, you can also install vim by running
apt install vim



public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}



cat Hello.java

Compile and run



javac Hello.java
java Hello

Conclusions

I wrote this mini tutorial as I didn't see that many quick tutorials on this topic so I thought I should write my own (or at least for my future self).

The little mind-boggling idea is the mobile devices that we use every day (smartphones, tablets) are getting more powerful year by year - e.g. see the performance comparison between Snapdragon 888 (2020) vs Snapdragon 8 Gen 2 (2022) - therefore it feels like those devices aren't used by full their extent.

Performance-wise, mid-range devices (such as Lenovo Tab P11, Samsung Tab S7 FE, Xiaomi Pad 6, or Samsung Galaxy S21 FE) are on pair with budget laptops from around 2020 (at least from the bench scores).

However, the weird part is that I use my budget laptop for multitasking tens of heavy-load applications. On a laptop equipped with a quad-core Intel I5 gen 10 CPU with 16GB of RAM (that scores around 3000 MultiCore points in Geekbench 5) I always have 20-30 Chrome tabs open while running 2 to 3 FullStack Docker Apps (with MySQL/Java/Nodejs and other microservices), while also playing videos in the background and compiling with maven java projects, while also doing some quick edits in Excel (Sheets) or Word (Docs) - and the performance/smoothness is fine (not great, but okay). So why can't we use our mobile devices as well for all these tasks?

Maybe the mobile devices are still early for such tasks and the software is not yet there. Maybe the limiting factor is the different architecture (ARM based on RISC vs. x86 based on CISC), however, Apple's M1/M2 chips might have proved this wrong. Maybe the general public will never use their smart devices for high-load multitasking and productivity work (and only use them for media consumption and fast email/news checking, as these devices were intended).

We will see.

Until then, I hope that this article at least sparked some curiosity!

Have a great day!
Radu

Top 8 macros for Developers to maximize their productivity with AHK

Radu-Alexandru B — Thu, 12 Nov 2020 13:13:55 +0000

Cover Photo by Ken Suarez on Unsplash

Short short Intro
1. Run command prompt in the currently focused folder
2. Run command prompt followed by certain commands
3. Search on Google the currently selected text
4. Open applications/websites using shortcuts
5. Open new explorer window with the same path as the currently focused folder
6. Copy to clipboard the HEX color of the pixel under your cursor
7. Adjust the main volume using the mouse scroll wheel
8. Auto-complete syntaxes with Hotstrings
Honorable mentions
- Put PC to sleep
- Empty recycle bin
- Get the current date/hour
- Use arrow keys as Home/End while holding RAlt
- Disable CapsLock key
Fin

Short short Intro

In this post, we'll summarize all the macros created with AutoHotKey (AHK) in the previous parts (+extras). However, there is no need to read those parts as I'll provide a fast and short step by step guide on how to set AHK.

Let's get started!

1. Run command prompt in the currently focused folder

If you don't have AutoHotKey installed, simply download it from here, then run the setup. Now we just need to create a file with .ahk extension (eg. myMacros.ahk). After you run this file (double click it), a small green H icon will pop up letting you know that the script is running in the background. Now, let's open the .ahk file with any text editor and add these lines:



^!u::     ; Use ctrl+alt+u to open cmd in current selected folder
{
  Send, !d
  Send, ^c
  Sleep 50
  Run cmd, %clipboard%
  Return
}

Save this file, and click on Reload This Script from the AHK icon. Now, open any folder, and press ctrl+alt+u to open cmd prompt with the folder's current path:

We can also keep in mind the key notations in AHK for Control, Shift, Windows, and Alt:

Key notation in AHK	Actual Key
^	Control
+	Shift
!	Alt
#	Windows Key

2. Run command prompt followed by certain commands

From now on we will reopen myMacros.ahk with a text editor, and we'll just keep adding more macros, save the file, then click on Reload this Script.

We can add more commands after opening the command prompt. For example, we can run git status right after (or npm start, python ./manage.py runserver etc):



^!+u::     ; Use ctrl+alt+shift+u to open cmd in current selected folder and run git status
{
  Send, !d
  Send, ^c
  Sleep 50
  Run cmd, %clipboard%
  Sleep 100
  Send, git status
  Sleep 100
  Send, {Enter}
  Return
}

Or, if you use Jupyter Notebook in a specific drive partition and/or environment, instead of opening it with command prompt, you can just use a shortcut like ctrl+alt+j (or even ctrl+win+j or whatever you want) and write all the corresponding commands automatically. Just add this macro:



^!j::                                  ; use ctrl+alt+j
{                                      ; to open jupyter notebook in g: in tf_gpu conda env
  Run cmd, g:
  Sleep 100
  Send, activate tf_gpu
  Sleep 1000
  Send, {Enter}
  Send, jupyter notebook
  Sleep 2000
  Send, {Enter}
  Return
}

Or you can fast open Python in command prompt by pressing ctrl+alt+p:



^!p::                                  ; use ctrl+alt+p
{                                      ; to open cmd prompt in python
  Run cmd, C:\Users\MyUserName
  Sleep 100
  Send, python
  Sleep 100
  Send, {Enter}
  Return
}

3. Search on Google the currently selected text

Add these lines in your myMacros.ahk to search on Google the selected text using Ctrl+Alt+c:



^!c:: ; use ctrl+alt+c to search on google
{
  Send, ^c
  Sleep 50
  Run, http://www.google.com/search?q=%clipboard%
  Return
}

If you have a mouse with 3 side buttons, you can even assign this macro by pressing Left Click while holding the middle left-sided mouse button (More details in my previous post):



XButton2 & LButton:: ; Search currently selected text on Google
{
  Send, ^c
  Sleep 100
  If InStr(clipboard, "http")
    Run, %clipboard%
  Else
    Run, https://www.google.com/search?q=%clipboard%
  Return
}

; Note: if the selected text is a link, open it in a new tab
; Otherwise, search the selected text on Google

We can also search on other websites, such as Pexels and Unsplash.



^#u:: ; use ctrl+win+u to search on Unsplash
{
  Send, ^c
  Sleep 50
  Run, https://unsplash.com/s/photos/%clipboard%
  Return
}



^#p:: ; use ctrl+win+p to search on Pexels
{
  Send, ^c
  Sleep 50
  Run, https://www.pexels.com/search/%clipboard%
  Return
}

4. Open applications/websites using shortcuts

We can open any application using any shortcut key. For reference, we can use the following keys (without overwriting the system's shortcuts):

RAlt+(anyKeyLetter) or RAlt+(anyNumber)
Ctrl+Alt+(anyKey) (But be aware that some applications might use these key combinations, you can check using DefKey.com)
Ctrl+Shift+Alt+(anyKey)
Alt+Shift+(anyKey) (Check here)
Ctrl+Win+(anyKey)
Ctrl+Win+Alt+(anyKey)

Here are some examples:



^#1::Run "https://mail.google.com/mail/u/0/#inbox"   ; use ctrl+win+1 to open gmail 1
^#2::Run "https://mail.google.com/mail/u/1/#inbox"   ; use ctrl+win+2 to open gmail 2
^#3::Run "https://translate.google.ro/?hl=ro&tab=wT" ; use ctrl+win+3 to open Google Translate

^+!1::Run "https://www.google.com"      ; use ctrl+shift+alt+1
^+!2::Run "https://dev.to"              ; use ctrl+shift+alt+2
^+!3::Run "https://www.linkedin.com"    ; use ctrl+shift+alt+3
^+!4::Run "https://www.spotify.com/"    ; use ctrl+shift+alt+4
^+!5::Run "https://www.mixcloud.com/"   ; use ctrl+shift+alt+5
^+!6::Run "https://www.freecodecamp.org/learn/"

^!t::Run cmd, C:\Users\Username         ; use ctrl+alt+t to run Cmd
^!w::Run winamp.exe                     ; use ctrl+alt+w to run Winamp
^!s::Run C:\Program Files\Sublime Text 3\sublime_text.exe
^!v::Run C:\Users\Username\AppData\Local\Programs\Microsoft VS Code\Code.exe

5. Open new explorer window with the same path as the currently focused folder

I often use Win+E default shortcut to open the Explorer, but oftentimes I need to open a new window within the same location to move/organize some files. So why not use Ctrl+Win+E shortcut to do that?



^#e::                                  ; use ctrl+win+e 
{                                      ; to open new explorer window with the same selected folder
  Send, !d
  Sleep 50
  Send, ^c
  Sleep 100
  Run, Explorer "%clipboard%" 
  Return
}

We can do even more by opening the new explorer and have both windows side by side, and even have the new window go up one level:



^+#e::                                  ; use ctrl+shift+win+e 
{                                       ; to open new explorer window with the same selected folder
  Send, #{Left}
  Sleep 50  
  Send, !d
  Sleep 50
  Send, ^c
  Sleep 100
  Run, Explorer "%clipboard%"
  Sleep 900
  Send, !{Up}
  Sleep 600
  Send, #{Right}
  Return
}

6. Copy to clipboard the HEX color of the pixel under your cursor

We can copy the HEX color under our cursor using Ctrl+Win+LeftClick:



; Copy to clipboard the HEX color of the pixel under your cursor using CTRL+Win+LeftClick
^#LButton::
{
  MouseGetPos, MouseX, MouseY
  PixelGetColor, color, %MouseX%, %MouseY%, RGB
  StringLower, color, color
  clipboard := SubStr(color, 3)
  Return
}

7. Adjust the main volume using the mouse scroll wheel

You can adjust your main volume with key combinations such as RAlt & NumpadAdd/RAlt & NumpadSub, or with your mouse wheel while holding Right Alt:



RAlt & WheelUp::Volume_Up
RAlt & WheelDown::Volume_Down

Or, you can hold down one of the side buttons on your mouse while scrolling (if you have such a mouse)



XButton1 & WheelUp::Volume_Up
XButton1 & WheelDown::Volume_Down

We can also play/pause our current playing song using a left-side mouse button:



XButton1::Media_Play_Pause

We can do so much more using our side mouse buttons! You can read more about mouse macros in my previous post.

8. Auto-complete syntaxes with Hotstrings

These are not exactly keyboard shortcuts, but rather abbreviations expansions. More important, we can use any keywords that we like in order to auto-complete syntaxes such as print statements and loops, in any programming language:



:*:printc::printf('%d\n', num);

:*:logjs::
{
Send, console.log();{Left}{Left}
Return
}

:*:printjava::
{
Send, System.out.println();{Left}{Left}
Return
}

:*:writecs::
{
Send, Console.WriteLine();{Left}{Left}
Return
}



::forC::
(
for (int i = 0; i < n; i++) {
)

::forJs::
(
for (let i = 0; i < arr.length; i++) {
)

::forPy::for i in range(0, len(arr)):

:*:forMatlab::
(
for i = 1:step:length(arr)

end
)



::switchJs::
(
switch() {
case 0:

break;
case 1:

break;
default:
)

I've made a complete guide on using AutoHotKey's hotstrings here.

Honorable mentions

Put PC to sleep

We can get our PC into sleep mode by using a key shortcut like RAlt+PauseKey:



; Put PC in sleep mode
RAlt & Pause::DllCall("PowrProf\SetSuspendState", "int", 0, "int", 0, "int", 0)

Empty recycle bin

We can empty the recycle bin by using WinKey+Del:



#Del::FileRecycleEmpty ; use win+del to empty recycle bin

Get the current date/hour

We can use AutoHotKey's Hotstrings to write the current system's date & time:



:*:datenow::
{
  FormatTime, DateString, , dddd, MMMM dd, yyyy
  Send %DateString%
  Return
}

:*:timenow::
{
  FormatTime, DateString, , HH:mm
  Send %DateString%
  Return
}



:*:datetoday::
{
  FormatTime, DateString, , yyyy-MM-dd
  Send %DateString%
  Return
}

:*:datetmr::
{
  Date += 1, Days
  FormatTime, DateString, %Date%, yyyy-MM-dd
  Send %DateString%
  Reload ; Return and clear variables
}

Use arrow keys as Home/End while holding RAlt

If you like cutting, pasting, and selecting lots of text. These "macros" might be handy:



; Arrow keys as Home/End
RAlt & Left::
{
  If GetKeyState("Shift", "P")
    Send +{Home}
  Else
    Send {Home}
  Return
}
RAlt & Right::
{
  If GetKeyState("Shift", "P")
    Send +{End}
  Else
    Send {End}
  Return
}

Disable CapsLock key

Well, if you find yourself accidentally switching the CapsLock state from time to time... you can actually disable it completely. At the very first beginning of the .ahk file, just add the following:



; Set Lock Keys permanently off
SetCapsLockState, AlwaysOff
Return

This is especially useful if we are using 60% keyboards. However, if you need to use CapsLock now and then, you can make it a little harder to toggle it's state, by pressing Alt+CapsLock instead:



; Set Lock Keys permanently off by default
SetCapsLockState, AlwaysOff
Return

Alt & CapsLock::
If GetKeyState("CapsLock","T")
  SetCapsLockState, AlwaysOff
Else
  SetCapsLockState, On
Return

You can find more on AHK's GetKeyState() here.

Fin

Mountains Photo by Benjamin Voros on Unsplash

That was it! I'm hoping that you found some of these macros actually useful in your day to day life... or maybe you got some other ideas for your workflow.

Have a wonderful day,
R.B.

Use HotStrings in your Dev Life to increase your daily Productivity with AHK

Radu-Alexandru B — Sat, 07 Nov 2020 13:21:34 +0000

Cover Photo by Александар Цветановић on Pexels

What are AHK's HotStrings?
Hotstrings we are going to create
Hotstrings types
Creating our Hotstrings

What are AHK's HotStrings?

HotStrings in AutoHotKey "shortcuts" that are mainly used to expand (or auto-replace) abbreviations as you type them:

Hotstrings can be also used to launch any scripted actions (like the macros used in the previous posts).

Hotstrings we are going to create

Let's see what Hotstrings we are going to create today:

Some basic HTML tags for anchors, lists
Autocomplete syntaxes for print, loops, conditionals, functions in your favorite programming language
Dates in any format that we want (eg. dddd, MMMM dd, yyyy, HH:mm)

Hotstrings types

Before we jump in to create some HotStrings, let's see a few differences between the two types of HotStrings:

Hotstrings that are triggered after pressing an ending character (eg Space, ., or Enter)

::forloop::for (let i = 0; i < arr.length; i++) {

Hotstrings that are triggered right after you wrote them (they contain an * - asterisk)

:*:printc::printf('%d\n', num);

:*:<a>::<a href="" title=""></a>

Okay, why is this important?
Well, if we are going to use only hotstrings that are triggered right after writing them (*), we have to make sure don't use keywords containing other used keywords inside them:

:*:printMe::console.log();
:*:printMeToo::System.out.println();

The printMeToo hotstring will never be triggered, because printMe will always trigger before we can write 'Too'.

Another example:

Note that hotstrings aren't case sensitive by default (you can read more here but it's not mandatory for our next hotstrings).

Another important aspect of these types of hotstring is their usage in different text editors. For example, we would use a hotstring triggered after Enter for for loops, because the editor will auto-close the brackets.

Creating our Hotstrings

Okaay, we already saw a few hotstrings. Let's jump into creating more! As we noticed, a hotstring starts with ::, followed by their triggering keyword, then :: again, and ends with the actual string used. So the syntax looks more or less like this:

::Keyword::String
:*:Keyword2::String2

Also, it's important to note that if we want to create hotstrings that use multiple lines, we need to use parentheses ( ):

::quickfox::
(
The quick brown fox jumps over the lazy dog.
But no one asks how the fox feels...
)

Or another example:

:*:mysignature::
(
Yours faithfully,
John Doe

john.doe@domain.com
www.johnnydoe.com
)

Good, let's quickly write some auto-completion for HTML tags:

:*:<a>::<a href="" title=""></

::<ulli>::
(
<ul class="navbar-nav">
<li class="nav-item"><a href=""></</
<li class="nav-item"><a href=""></</
<li class="nav-item"><a href=""></</
</
)

However, the hotstrings for HTML tags really depend on the text editor that is currently used... For example, Sublime Text auto-closes opened tags after writing </.

Hmm, okay:

Let's write a print statement in the following languages: C, Matlab, JavaScript, Java, C#:

:*:printc::printf('%d\n', num);
:*:printm::fprintf('%d\n', num);

:*:logjs::
{
Send, console.log();{Left}{Left}
Return
}

:*:printjava::
{
Send, System.out.println();{Left}{Left}
Return
}

:*:writec#::
{
Send, Console.WriteLine();{Left}{Left}
Return
}

Nice. "Debugging" will be a little easier now.

Okay sorry for that. Note that for JS, Java and C# we used multiple instructions (macros) instead of a simple string (we used these a lot in previous parts of this post).

Let's see how we will write some loops in C, JavaScript, Python, and Matlab.

::forC::
(
for (int i = 0; i < n; i++) {
)

::forJs::
(
for (let i = 0; i < arr.length; i++) {
)

::forPy::for i in range(0, len(arr)):

:*:forMatlab::
(
for i = 1:step:length(arr)

end
)

Finally, let's see a really useful feature of hotstrings, namely: Date types. Let's write the following scripts:

:*:datenow::
{
  FormatTime, DateString, , dddd, MMMM dd, yyyy
  Send %DateString%
  Return
}

:*:timenow::
{
  FormatTime, DateString, , HH:mm
  Send %DateString%
  Return
}

Here's more info about dates and time formating in AHK.

Let's see another useful scenario for using dates:

:*:datetoday::
{
  FormatTime, DateString, , yyyy-MM-dd
  Send %DateString%
  Return
}

:*:datetmr::
{
  Date += 1, Days
  FormatTime, DateString, %Date%, yyyy-MM-dd
  Send %DateString%
  Reload ; Return and clear variables
}

Note that for datetmr we now used AHK variables such as %Date% in our script, and we also used Reload instead of Return. If we use Return, we won't clear the created %Date% variable, and each time we wrote datetmr hotstring, we will get the next day of the day before and so on.

"The End" Movie Vector by Vecteezy

This was the last part of my AutoHotKey series for increasing productivity. I hope that I got some of you into using macros and how beneficial they could be in multiple scenarios, or at least you got some other ideas for automating boring stuff with them.

Okay done. Happy coding and keep improving!
R.B.

Embrace Mouse Macros into your Dev Life to increase your Productivity with AHK - Part 2

Radu-Alexandru B — Fri, 30 Oct 2020 18:41:31 +0000

Cover Photo by Davide Boscolo on Unsplash

Short Intro
Setting up Mouse Macros
- What macros we will create?
- Mouse buttons we can map
- Setting up a convention
- Mapping our mouse
- Productive Scenarios
Bonus Macro for Front-end Devs
Full code from this post

Short Intro

As we saw in our previous part of this post, we can achieve quite a few things with AutoHotKey keyboard macros. In this part, we will focus more on using combinations of a 3-sided-button mouse. If you don't have such a mouse, well, don't worry, you can assign the following macros to any other keyboard keys you want (as discussed earlier), however, the prices of these type of mice are really cheap (starting from $10 for any "gaming" one, yet reliable). We'll later see some use-case scenarios for why such a mouse could be a real value for your general increase in productivity.

Mouse Macros we will create

Hoping that you skipped the long "short" intro, let's look into the mouse macros we'll create today (macros that don't require any interaction with a keyboard):

Adjust the main volume by holding a side key while scrolling
Play/Pause our current song with a side key (Youtube, Spotify, Apple Music, Mixcloud, anything.)
Screenshot an area with the help of LightShot
Copy any text/image and Paste it from clipboard
Scroll back and forth through (Browser/Text Editor) tabs by holding a side key while scrolling
Close a (Browser) tab
Reopen a closed Browser tab (that was closed accidentally or that we actually needed)
Search a selected text on Google (we will the same method as we saw in the previous post)

Mouse key we can map

Every mouse with 3 side buttons will have the default functions of Browser Go Back one page, Browser Go Forward, and a Control key. With AutoHotKey we can remap those Browser buttons. The Control button (set by default) is actually useful for selecting multiple files, zoom in/out, or select/edit multiple lines of code simultaneously in Sublime Text (In VSCode we would use Alt+Click).

The AHK notations for all of our mouse buttons are the following:

Key notation in AHK	Actual Mouse Key
LButton RButton MButton	Left, Right, Middle buttons
WheelDown WheelUp	Our scroll wheel, obviously
XButton1	4th mouse button, typically performs the Browser_Back function
XButton2	5th mouse button, typically performs the Browser_Forward function
WheelLeft WheelRight	Not real buttons, but they can be used as hotkeys to scroll to left or right

Setting up a convention

Is totally up to you to choose the key combinations of the previously mentioned buttons. However, I've created a small convention that I'll use in this post:

Mapping our mouse

Firstly, we need again to keep in mind the key notations in AHK for Control, Shift, Windows, and Alt:

Key notation in AHK	Actual Key
^	Control
+	Shift
!	Alt
#	Windows Key

And we'll also need to create a new .ahk file named mouseMacros.ahk (or we could just use the myMacros.ahk from the previous post and add the new macros there).

Finally, let's map our mouse. We'll start with our "5th mouse button" (XButton1) used for our Media macros.

To play/pause our currently playing media (song), we'll just write:

XButton1::Media_Play_Pause

We will also write the following lines to adjust our main volume:

XButton1 & WheelUp::Volume_Up
XButton1 & WheelDown::Volume_Down

Pretty straightforward I'd say. Let's save our file, and just double click it to open with AutoHotKey. The green 'H' icon will pop up letting us know that the script is running in the background:

Now, we can start playing our favorite songs/playlists and hold XButton1 while scrolling to see our volume changing.

Cool, let's add the next macros:

Presuming that we installed LightShot, a very handy screenshot tool for Windows, we'll use the Middle mouse button to take a screenshot. And, let's also write the Copy (with left-click) and Paste (right-click) functions, while holding XButton1:

XButton1 & MButton::PrintScreen         ; Take screenshot
XButton1 & LButton::Send, ^c            ; Copy
XButton1 & RButton::^v                  ; Paste

Save this file, and click on "Reload This Script" option from the AHK icon.

Great! Next time when we are helping or asking somebody for help by sending a screenshot, we'll no longer take a picture with our phone, we'll just send a properly cropped screenshot instead, only by using our mouse!

Let's now add macros to the XButton2:

By default, if we press CTRL+TAB (^Tab) or CTRL+SHIFT+TAB (^+Tab) in our Browser (eg. Chrome), we can go forward/backward one tab at a time. Let's add the following lines in order to go through tabs by scrolling with our mouse wheel (while holding XButton2):

XButton2 & WheelUp::^+Tab               ; Scroll through Browser tabs
XButton2 & WheelDown::^Tab

We also know we can open Open a new tab (CTRL+T or ^t), close the current tab (CTRL+W or ^w), and reopen a closed tab (CTRL+SHIFT+T or ^+t). We will map these keys into our mouse like this:

XButton2::^t                            ; New tab
XButton2 & RButton::^w                  ; Close current tab
XButton2 & MButton::^+t                 ; Reopen last tab

And, we will also use our useful macro to search on Google the currently selected text by pressing XButton2 and Left Click:

XButton2 & LButton::                    ; Search currently selected text on Google
{
  Send, ^c
  Sleep 50
  Run, https://www.google.com/search?q=%clipboard%
  Return
}

Perfect. Let's save and reload the script... and also take it to a test drive!

Et voilà, we've successfully mapped our mouse.

Productive Scenarios

Okay, long talk ahead. After all those mappings, you may ask: "How the hell will I remember all these key combinations? My mouse/keyboard feels now like a puzzle that can do more harm than good with a wrong key press"... and yes, I would understand that. But, once you really start using these macros (one at a time), you will start getting comfortable. In a short period of time (maybe days or weeks), those macros will become second nature to you.

Let's assume the following scenario: You are running a newly written code, but you encounter an error. Let's assume that your usual workflow is to search on Google for that error, open a few tabs, close other tabs, copy and paste some lines of code, and repeat until you solve that one error. Now, we all know that we usually encounter dozens of errors, therefore our majority of time is all about searching for fixes.

What if each time we encounter an error, we would execute the whole workflow just by some clicks with our mouse? while we are concentrating more on the solution?

Let's see how our earlier mapped macros could help us in this scenario:

First, we run our code, error pops up: We just select the whole error text with our mouse, click both sideClick+leftClick and google solutions opens
Now we are going to open a bunch of new tabs (using our middleClick) with some solutions (StackOverflow, GitHub, Dev, etc)
Now we are scrolling through tabs (sideClick+mouseWheel) and fast reading solutions, some of them may contain code that we might want to copy and paste (sideClick+left/rightClick) into our project
We are closing some of the irrelevant tabs with sideClick+leftClick
We might realize that we actually needed a previously closen tab: sideClick+middleClick
We might encounter a video tutorial on the way: sideClick (to pause the currently playing song), open tutorial, adjust volume (sideClick+mouseWheel)
Repeat (without even touching the keyboard)

Bonus Macro for Front-end Devs

Okay, here's one more useful macro for the front-end devs out there: We can copy to clipboard the HEX color of the current pixel under our cursor using CTRL+Win+LeftClick (or any other keys you want):

^#LButton::
{
  MouseGetPos, MouseX, MouseY
  PixelGetColor, color, %MouseX%, %MouseY%, RGB
  StringLower, color, color
  clipboard := SubStr(color, 3)
  Return
}

And here's a showcase:

Full code from this post

XButton1::Media_Play_Pause
XButton1 & WheelUp::Volume_Up
XButton1 & WheelDown::Volume_Down
XButton1 & MButton::PrintScreen         ; Take screenshot
XButton1 & LButton::Send, ^c            ; Copy
XButton1 & RButton::^v                  ; Paste

XButton2 & WheelUp::^+Tab               ; Scroll through Browser tabs
XButton2 & WheelDown::^Tab
XButton2::^t                            ; New tab
XButton2 & RButton::^w                  ; Close current tab
XButton2 & MButton::^+t                 ; Reopen last tab
XButton2 & LButton::                    ; Search currently selected text on Google
{
  Send, ^c
  Sleep 50
  Run, https://www.google.com/search?q=%clipboard%
  Return
}

; Copy to clipboard the HEX color of the pixel under your cursor using CTRL+Win+LeftClick
^#LButton::
{
  MouseGetPos, MouseX, MouseY
  PixelGetColor, color, %MouseX%, %MouseY%, RGB
  StringLower, color, color
  clipboard := SubStr(color, 3)
  Return
}

Okay done, that was it! In the next part, we'll finally cover AutoHotKey's HotStrings, hopefully as short as possible.

Keep improving yourself,
R.B.

Embrace Keyboard Macros into your Dev Life with AutoHotKey - Part 1

Radu-Alexandru B — Fri, 23 Oct 2020 09:06:30 +0000

Cover image by Karol D, on Pexels.com

What is AutoHotKey?

Without any blah-blah, AutoHotKey (AHK) is a scripting/interpreted language, that you can write in a script that will continuously run in the background when you open it (but don't worry, you have 100% control of this script). Every function that you'll write will have a set of instructions that will trigger on a keystroke or a certain combination of keystrokes that you press at a time.

Okey-dokey, so what?

This means you can create macros (with key shortcuts) that activate some certain actions, like:

select a word -> copy it -> open google on new chrome tab -> paste that word -> search it and show google results (all in less than 200milisecods)
open a new tab with your favorite website
open command prompt using CTRL+ALT+T shortcut
open command prompt with the path of the currently selected directory and run a command (like npm start or git status)
Adjust volume while holding a key+scrolling mouse wheel (the key could even be one of the side keys of your mouse, more on that later)
Empty recycle bin by pressing WIN+DEL (or any key combo you wish), anytime, anywhere
Put PC into sleep mode (if you don't have the FN-Sleep key)
Auto rewrite 'brb' to 'be right back'... or...
Autocomplete a for loop (or anything) syntax (any language, any text editor) just by writing forjs, forc, ifelsepy, or any hotstring you'd ever want to use
The sky is your limit, also the docs and the community are really great. There are high chances that any question you'd have, you'll find it answered.

Installation

Simply download and run the setup from AutoHotKey.com.

Keyboard keys and combinations that you can map/remap

You can remap any key/combination keys or map any combination of keys without a default function. Here are some of my key/keys combination that I recommend mapping:

1) You can remap your Numpad keys (if you don't use them), or you can remap your Numpad keys while Numlock is off.

With Numlock off	With Numlock on
NumpadIns	Numpad0
NumpadEnd	Numpad1
NumpadDown	Numpad2
NumpadPgDn	Numpad3
NumpadLeft	Numpad4
NumpadClear	Numpad5
NumpadRight	Numpad6
NumpadHome	Numpad7
NumpadUp	Numpad8
NumpadPgUp	Numpad9
NumpadDel	NumpadDot

In total, we can have up to 22 keys to assign macros with our Numpad.

2) You can map (unused) keyboard combinations like:

RAlt+(anyKeyLetter) or RAlt+(number)
CTRL+Alt+(anyKey) or even CTRL+SHIFT+ALT+(anyKey)

So, we have lots of alternatives when choosing our future keys to have macros.

Mapping our first keys

Ok, enough talking - let's get into code and actually do something!

To start writing a script we just need to create a new file with a .ahk extension. The first things we need to have in mind are some key notations we will use:

Key notation in AHK	Actual Key
^	Control
+	Shift
!	Alt
#	Windows Key

Now, let's make some of the macros I mentioned earlier:

Let's say, we want to map CTRL+ALT+T to open our command prompt, just like in Linux In our newly created myMacros.ahk file (that you can open with Notepad, Notepad++ or any text editor), we just need to write the following:

^!t::Run cmd

That's all! Save it, and, if you already installed AutoHotKey, you can double-click this new file, and a small green H icon will pop up:

This means our script is now running in the background! And, if you press CTRL+ALT+T (^!t in AHK's notation), you should see the Command Prompt that opens. Nice! Let's do more. Reopen myMacros.ahk, and let's add some more macros.

Let's say, any time you press CTRL+ALT++SHIFT+T, we open our PowerShell (instead of our command prompt)... But also, let's make it that every time we open our PowerShell, we want it opened to C:\Users\MyUserName:

; Also, this is a comment in AHK, it starts with ; and can be added anywhere

; use ctrl+alt+t to open Cmd Prompt in C:\Users\Radu location
^!t::Run cmd, C:\Users\Radu

; use ctrl+shift+alt+t to open PowerShell
^+!t:: Run powershell, C:\Users\Radu

Perfect, save it and click on the Reload this script option (that we saw earlier) from the taskbar.

Let's say that we want to open Google.com or Dev.to every time we press CTRL+ALT+1 or CTRL+ALT+2. Just add to our existing code, these lines, then reload:

^!1::Run "https://www.google.com" ; use ctrl+alt+1
^!2::Run "https://dev.to"         ; use ctrl+alt+2

Let's say that we want to adjust our Main Volume every time we are holding ALT while scrolling with our mouse wheel. Add to our existing code, these lines, then reload:

Alt & WheelUp::Volume_Up          ; use Alt+MouseWheel to adjust volume
Alt & WheelDown::Volume_Down

Pretty good stuff so far, I'd say... But, we can do even more.

Let's say that.. every time we select any text, we want to search for it on Google immediately by pressing CTRL+ALT+C... Well, now we are going to write an entire function, within curly brackets, that ends with Return. Let's add these lines to our myMacros.ahk, save and reload:

; use ctrl+alt+c to search on Google the currently selected text
^!c::
{
  Send, ^c
  Sleep 50
  Run, https://www.google.com/search?q=%clipboard%
  Return
}

Awesome!

Let's empty recycle bin by pressing WIN+DEL:

#Del::FileRecycleEmpty ; use win+del

Let's put our PC in Sleep mode by using RightALT+s. Note that we can also be specific about our choice of keys by saying the exact name of the key (RAlt) in combination (&) with s:

RAlt & s:: DllCall("PowrProf\SetSuspendState", "int", 0, "int", 0, "int", 0)

Finally, let's open the command prompt in our currently selected folder. To do that, we know that by pressing Alt+d when having a folder opened will focus on folder's path. So our steps sound like this: Focus on folder's path, copy it to clipboard, run cmd within that path. So, this is the function we are looking for:

^!u::     ; Use ctrl+alt+u to open cmd in current selected folder
{
  Send, !d
  Send, ^c
  Sleep 50
  Run cmd, %clipboard%
  Return
}

Now, open a folder, press CTRL+ALT+U, and see what happens. It's a really handy little shortcut, eh?

We can even make it more powerful by saying to write a specific command for us, like git status, and also execute it:

^!i::     ; Use ctrl+alt+i to open cmd in current selected folder
{
  Send, !d
  Send, ^c
  Sleep 50
  Run cmd, %clipboard%
  Sleep 100
  Send, git status
  Sleep 100
  Send, {Enter}
  Return
}

Okay now, we are approaching the end of this post. Bellow, you'll find our full code from myMacros.ahk with all the things we accomplished.

And that's it... for now! In the next part of this post, we will use AutoHotKey to generate some autocompletion on each keyword (Hot String) that we'll write. We will also look and some macros that we can use with a mouse that has up to 9 buttons (the ones with 3 side buttons).

However, until then... There are a lot (I mean, a lot) of other articles on AutoHotKey with the best macros ever imagined. AutoHotKey is a scripting language, so it has variables, for loops, conditionals, booleans, and even more... So it's a lot to take in.

I'll leave here some more interesting articles on this topic:

Full code from this post

; List of keyboard buttons
; ^ = Control
; + = Shift
; ! = Alt
; # = Win (Windows key)

^!t::Run cmd, C:\Users\Radu                    ; use ctrl+alt+t to open Cmd Prompt in C:\Users\Radu location
^+!t:: Run powershell, C:\Users\Radu           ; use ctrl+shift+alt+t to open PowerShell

; use win+del to empty recycle bin
#Del::FileRecycleEmpty

; use RightAlt+s to put PC on sleep mode
RAlt & s:: DllCall("PowrProf\SetSuspendState", "int", 0, "int", 0, "int", 0)

^!1::Run "https://www.google.com"              ; use ctrl+alt+1
^!2::Run "https://dev.to"                      ; use ctrl+alt+2
^!3::Run notepad.exe, WinActivate notepad.exe  ; Open and focus on notepad.exe

Alt & WheelUp::Volume_Up                       ; use Alt+MouseWheel to adjust volume
Alt & WheelDown::Volume_Down

^!c::     ; use ctrl+alt+c to search on Google the currently selected text
{
  Send, ^c
  Sleep 50
  Run, https://www.google.com/search?q=%clipboard%
  Return
}

^!u::     ; Use ctrl+alt+u to open cmd in currently selected folder
{
  Send, !d
  Send, ^c
  Sleep 50
  Run cmd, %clipboard%
  Return
}

^!i::     ; Use ctrl+alt+i to open cmd in currently selected folder
{
  Send, !d
  Send, ^c
  Sleep 50
  Run cmd, %clipboard%
  Sleep 100
  Send, git status
  Sleep 100
  Send, {Enter}
  Return
}

Oh, almost forgot: I mentioned that you can use single key macros using the Numpad (with or without NumLock switched on). For all the macros mentioned earlier, just replace the key combo with a Numpad key, like so:

NumpadIns::Run cmd, C:\Users\Radu                    ; use Numpad 0 (NumLock off) to open Cmd Prompt

NumpadDel::     ; use Numpad dot (NumLock off) to search on Google the currently selected text
{
  Send, ^c
  Sleep 50
  Run, https://www.google.com/search?q=%clipboard%
  Return
}

; etc

Okaay. Twas a long post. Have a nice day. Bye.
R.B.

How to add Like/Unlike button to your Django Blog

Radu-Alexandru B — Wed, 14 Oct 2020 11:45:03 +0000

In this mini-tutorial, we will add a Like/Unlike functionality to our Django Blog. As a note, we will implement this feature while using a class-based view for our BlogPost DetailView.

2nd NOTE: Unfortunately, we cannot avoid the page refresh after every click of Like/Unlike button. In order to skip the refresh, it is needed to implement the whole functionality of Like/Unlike button inside our blogpost-detail HTML, using Ajax.js. This mini-tutorial will not focus on this type of implementation.

Let's get started, first, in our models.py we need to add to our BlogPost model the following fields:

# models.py
from django.db import models
from django.contrib.auth.models import User

class BlogPost(models.Model):
    ...
    likes = models.ManyToManyField(User, related_name='blogpost_like')

    def number_of_likes(self):
        return self.likes.count()

"likes" is a Many-to-many relationship with our User model, meaning that users (objects) can have multiple likes, and blog posts can have multiple likes. The function number_of_likes will return the number of likes of the current blog post object.

After every change in the models.py file, we need to open our terminal and make the migrations to our database:

# CLI/Terminal
>> cd C:\Projects\...\YourDjangoAppMainFolder
>> python manage.py makemigrations
>> python manage.py migrate

Let's now make a function-based view for our Like button functionality. In your view.py file, right before (or after) your BlogPost DetailView class, define a BlogPostLike function:

# views.py
from django.shortcuts import get_object_or_404
from django.http import HttpResponseRedirect
from django.urls import reverse

def BlogPostLike(request, pk):
    post = get_object_or_404(BlogPost, id=request.POST.get('blogpost_id'))
    if post.likes.filter(id=request.user.id).exists():
        post.likes.remove(request.user)
    else:
        post.likes.add(request.user)

    return HttpResponseRedirect(reverse('blogpost-detail', args=[str(pk)]))

'blogpost_id' will be our button identification in our blogpost_detail.html. Every time a logged-in user clicks the Like button, we will retrieve his id and then will check if that user already liked or not the current blogpost (more specifically: if like from user x exists, then remove like from current blogpost, else, add like from user x to current blogpost). Then we will redirect the user to the same blogpost page (like a refresh of that page).

Now, it the same view.py file, where we've implemented our BlogPost DetailView, we need to add to our get_context_data the following:

# views.py
class BlogPostDetailView(DetailView):
    model = BlogPost
    # template_name = MainApp/BlogPost_detail.html
    # context_object_name = 'object'

    def get_context_data(self, **kwargs):
        data = super().get_context_data(**kwargs)

        likes_connected = get_object_or_404(BlogPost, id=self.kwargs['pk'])
        liked = False
        if likes_connected.likes.filter(id=self.request.user.id).exists():
            liked = True
        data['number_of_likes'] = likes_connected.number_of_likes()
        data['post_is_liked'] = liked
        return data

Within our get_context_data function, we will retrieve the current blogpost primary key, and we will check if the currently logged-in user has liked or not this blog post. We will store in a local variable this statement, to send it further as a context to our HTML-based blogpost_detail. We will also retrieve the number of likes (calling the earlier written function) in order to display the number of likes directly in our HTML template.

Let's also add this new function-based view to our urls.py:

# urls.py
from django.urls import path
from .views import (
    ...
    BlogPostLike,
    ...
)

urlpatterns = [
    ...
    path('blogpost-like/<int:pk>', views.BlogPostLike, name="blogpost_like"),
    ...
]

Finally, to our blogpost_detail.html let's write in the DjangoTemplateLanguage the following:

<!-- LIKES -->
{% if user.is_authenticated %}
  <form action="{% url 'blogpost_like' object.id %}" method="POST">
    {% csrf_token %}

    {% if post_is_liked %}
    <button type="submit" name="blogpost_id" value="{{object.id}}" class="btn btn-info">Unlike</button>
    {% else %}
    <button type="submit" name="blogpost_id" value="{{object.id}}" class="btn btn-info">Like</button>
    {% endif %}
  </form>
{% else %}
  <a class="btn btn-outline-info" href="{% url 'login' %}?next={{request.path}}">Log in to like this article!</a><br>
{% endif %}
<strong class="text-secondary">{{ number_of_likes }} Like{{ number_of_likes|pluralize }}</strong>

And we are done!

Get started with Git CLI and use these workflows in your everyday projects

Radu-Alexandru B — Mon, 05 Oct 2020 11:46:14 +0000

I know, I know, there are a lot of mini-tutorials, cheatsheets, and howto's about Git, but some of those are really crazy! I can't see how a beginner that gives Git a try would start learning first about cherry-pick and commit amends or whatever. So, presuming that you know Git as a version control system (if not, just watch this 12min intro from Telusko), but you never started using CLI commands, I'll write here some notes that got me going into using Git in all my personal projects!

Here's the contents:

git help
set up global configuration variables
git init VS. git clone
git status
git diff
git work-flow (on master branch)
- git add -A
- git commit
- git log
- git push
- git remote
- git pull
- Schema: Working Directory, Staging Area, Git Remote Repository
time to create a new branch!
- git branch, git checkout
- merge a branch: git merge (+mini-work-flow)
- delete a branch
git Complete Work-flow - work from another branch
create a new repo from a locally existing/completed project (mini-work-flow)
locally mistakes that could've been made
- we need to discard changes to a modified file/files with git checkout -- .
- we mess up a commit -m message; modify the last commit message without doing another commit
- we forgot to add a file to the last commit
- we made commits to the master branch instead of our working branch
- types of git resets (soft, mixed, hard)
- fatal/big whoops: we did a hard reset on some changes but we realized that we actually need them: git reflog
undoing a commit after pushing to remote server. Fix without changing the git history
using the git stash command

git help

Display help (all commands) in CLI:

git help

Check Git version installed on PC:

git --version

Git help used on commands will display the help info in a new Browser tab (Chrome/Firefox/Edge etc). This will be really handy to understand all those parameters used in various commands.

git help <command> # is the same as git <command> --help

# eg:
git help config
git config --help # is the same as git help config
git add --help

Set up global configuration variables

Needed to push local repository to GitHub remote server
Also useful when working in a team to see who changed the code (with the blame command aka 'see who and when was this file last modified')
For name: you can choose any name, it can be different from your github account
For email: it must be the exact same email used on your github account

git config --global user.name "John Doe" 
git config --global user.email "JohnDoe97@gmail.com" 

git config --list # list all configurations you made

Create own local empty repository init VS. clone an existing repository as a local repository in your PC

Create own local empty repo (init) (it will create a new folder .git with all the informations about that repo):

cd my_new_project_folder_name
git init

Copy/Download an existing repo (clone) (this will also copy all of the earlier commits/history made to that repository)

git clone <url> <optional:where_to_clone>
# eg:
git clone https://github/username/android-app AndroidAppFolder

git status

git status

Git keeps track of modified/added/removed files and also which files are [are not] tracked.
However, sometimes you don't want to track some files (eg. personal files, personal configurations files, cache files auto-generated after each build) => create .gitignore file where you can write the files you don't want to include (ignore them forever):

mystuff.txt
*.pyc
.DS_Store

^^ These files won't show up anymore when calling git status.
Also, .gitignore should be included (git add .gitignore) to prevent a team collaborating on a project from committing generated cache files => don't add .gitignore to .gitignore itself lol.

git diff

Git diff shows the changes made to the code within modified files (git status shows only which files have been modified/created).

git diff

Git work-flow (on master branch)

Add files to the staging area (= add all the files that are ready to be commited except the files from .gitignore)

git add -A

Commit all the files added (tracked files) to the local repository.

git commit -m "Message from this commit"

Add all the files to the staging area then commit:

git commit -a -m "Message from this commit"

Git reset [file.ext] will make all the files [or only file.ext] untracked (out of the staging area) => The changes to that file.ext will not be committed!

git reset [file.ext]

Git log shows all the made commits (with a hash number, author, date of each commit). By default, the log opens in Vim text editor, if installed.

git log
git log -3 # shows last 3 commits

git push -u origin master
# git push -u <remote> <branch>
# -u or --set-upstream is to save/add upstream (tracking) reference(the <remote> and <branch>), in order to just write "git push" without specifying again the <remote> and <branch>

Git remote shows all the remotes (GitHub repositories) where you can push the last (local) commit. Git remote -v is for verbose (all info about the remotes).

git remote
git remote -v

To add a remote:

git remote add origin https://github.com/username/projectname/.git
# git remote add <new_branch_name> <link_to_repository>

OBS: When cloning a remote (a GitHub repository) with git clone, a remote named "origin" will be available by default.

Get (locally) the last state (last changes/updates) of the project if someone made changes on the global repository (the remote to github.com server):

git pull origin master

If this error occurs when pulling: "your local changes to the following files would be overwritten by merge" and you want to drop/overwrite all the changes made from the local repository and get the latest updates from the global repository, use:

# Drop local changes, revert to the HEAD reference (last local commit in the master branch)
git reset --hard # NEVER USE: git checkout HEAD^ file/to/overwrite
git pull origin master
# HEAD^ is short for HEAD^1, which means the one commit before HEAD. You could also do HEAD^2 for the commit before that one

Or, discard/give up all the changes (modified files) and go back to the last (local) commit state of files:

git checkout -- .

NOTE1: git checkout HEAD^ filename (will overwrite the file to the state of commit before last local commit in the master branch)

NOTE2: git checkout HEAD^ without specifying a file will DROP THE WHOLE LAST COMMIT!!! and will revert to the commit before last commit (however you will be in a detached head state branch, so you can revert this action by just changing back to the master branch: git checkout master)

NOTE3: git checkout HEAD^1 is roughly the same as git reset HEAD^1, but:

Use reset if you want to undo the staging of a modified file !!!
Use checkout if you want to discard changes to unstaged file/s !!! (however it is still possible to recover lost files with git reflog and cherry-pick, check locally mistakes section.

Schema: Working Directory, Staging Area, Git Remote Repository

Create a new branch from CLI

git branch, git checkout To create and move to a new branch:

git branch <new_branch_name>
git checkout <new_branch_name>

Show all branches/active branch with:

git branch
git branch -v

Merge a branch: git merge (mini-workflow) If all your modifications to the code are great and pass all the (unit) tests, merge your branch with the master branch:

git checkout master # change to master branch
git pull origin master # get last updates before making any changes to master
git branch --merged # show branches that are/aren't merged with master branch
git merge <my_new_branch_ive_worked_on>
git push origin master

Delete a branch (mini-workflow) After you added the features from your branch and merged with master, you can delete your branch you worked on:

git branch --merged
git branch -d <my_branch_ive_worked_on> # locally delete the branch
git branch -a # show all branches: we still have <my_branch> globally
git push origin --delete <my_branch_ive_worked_on> # globally/definitely delete the branch

Git Complete Workflow - Work from another branch

git config --global user.name
git config --global user.email
git clone <url> <where_to_clone>
git branch <my_new_branch_name>
git checkout my_new_branch
# (make changes to the code ...)
git status
git commit -m "Add @function in views.py | Solve bug in models.py that fixes #8"
git push -u origin my_new_branch
# (wait for unit tests to complete)
# (if all unit tests pass, then do these)
git checkout master
git pull origin master
git merge my_new_branch
git push origin master
# (now time to delete my_new_branch)
git branch -d my_new_branch
git branch -a
git push origin --delete my_new_branch

Create a new repo from a locally existing/completed project (mini-workflow)

On GitHub.com website:
- Create a new repository (write name & description)
- (optional) Create a Readme.MD file
On CLI (locally):
- Open the terminal in that folder/project's path
- Write the following commands:

git init
git remote add origin https://github.com/username/projectname/.git
git remote -v
git pull origin master # needed to update the commit history of new repo (especially if Readme.MD or LICENSE was created)
git status
git add -A
git status
git commit -m "Initial commit from local project"
git push origin master

Locally Mistakes that could've been made

If we made changes to a single_file but then we don't want to keep the changes to that file anymore (we want to undo/go back):

git checkout single_file.py

And if we want to discard all changes/modifications to our files:

git checkout -- .

Also, if we want to delete/get rid of untracked files (newly created files):

git clean -fd # force directories

We mess up a commit -m message. We want to modify the last commit message without doing another commit

WARNING: The following commands in this section will change the hash of previous commits => THIS WILL CHANGE GIT HISTORY => IF OTHER PEOPLE WILL PULL THE CHANGES AFTER EXECUTING THESE COMMANDS, THE CHANGED HISTORY COULD CAUSE BIG PROBLEMS TO THEIR REPOSITORIES. We can only change git history when we're the only one owners of the repository.

git commit --amend -m "Corrected commit message"

We forgot to add a file to the last commit. We want the add the file without committing again.

git add file.c # get the file in the staging area
git commit --amend # this will add the new file to last commit, also it opens a log in Vim, exit with :wq
git log --stat # show file changes in commits
# The last commit hash will be changed, so the git history will be changed

We made commits to the master branch instead of our working branch. Fix: we "move" a commit(hash) to the master and return the state of the master branch

# from master's branch
git log
# grab/copy (the first 6-7 characters of) the commit hash that we want to cherry-pick
# change to our working branch
git checkout [my-branch-name]
git cherry-pick 1b818d3b
git log

# Now delete the commit from master
git checkout master 
git log
# grab/copy the hash of the commit before our wrong commit
git reset --hard 2e75207
git log
git clean -fd

WARNING: Again, this will change git history and will cause consequences when working in a team!!! I'll write some alternatives in the next sections.

Types of git resets

SOFT RESET

git log # grab the hash of the commit we want to keep, the commits after that commit will be removed
git reset --soft 2e7520782

git log
git status

Git soft reset will set us back to the specified commit BUT will keep the modified and new files from the unwanted commits (the ones we removed) in the staging area ("added files ready to be committed" area) - we still didn't lose our work, but we can discard with git reset HEAD -- ..

MIXED RESET (DEFAULT)

git log # grab the hash of the commit we want to keep, the commits after that commit will be removed
git reset 2e7520782

git log
git status

Git mixed/default reset will set us back to the specified commit BUT will keep the modified and new files from the unwanted commits (the ones we removed) in the working directory ("untracked files, before executing add -A" area) - we still didn't lose our work, but we can discard with git checkout -- ..

HARD RESET

git log # grab the hash of the commit we want to keep, the commits after that commit will be removed
git reset --hard 2e7520782

git log
git status

Git hard reset will set us back to the specified commit AND will make all the changes in files to match the state that they were in the specified commit - we've lost our work.

However, a hard reset will not affect untracked files (newly created files from the unwanted commits, but it's irrelevant if we didn't create any new files). We can get rid of these untracked files with git clean -fd.

NOTE: git clean -fd could be useful when we accidentally unzip an archive in a project directory (local repo) and we don't want to manually delete all the new files created.

Fatal: We did a hard reset on some changes but we realized that we actually need them: `git reflog` (or we deleted last commits)

This "fix" works if we screwed up with git checkout HEAD^1 or git reset --hard HEAD^. (HEAD^ is short for/same with HEAD^1).

Luckily, git garbage collector (gc) collects/deletes (forever) lost commits after 30 days (IF WE DIDN'T ALREADY RAN git gc COMMAND).

git reflog
# grab the hash before executed reset command
git checkout [0c8189]
git log # happily see our changes back 

git branch
# HOWEVER, we're in a detached head state - we are on a branch that would be trashed in the future, so we need to save those changes in a newly-created branch
git branch backup
git checkout master
git branch

Now we've successfully recovered our lost changes, we can merge the backup branch with master (git merge backup) OR if our changes are already in master branch (do check), we can delete the backup branch (git branch -d backup).

Undoing a commit after pushing to remote server. Fix without changing the git history

Undo a commit (when other people already pulled the changes), without rewriting the git history. We use git revert to create a new commit on top that reverses the changes of earlier commits.

git log # select the commit hash THAT WE WANT TO UNDO (the wrong commit)
git revert [1b818d3] # will also show a message in Vim, :wq to exit
git log # you can see the new revert commit

# You can also see the revert diff
git diff [1b818d3] [hash from revert commit]

Using the `git stash` command ("temporary" commits)

Useful for changes that you are not ready to commit yet, but you need to switch branches (or revert back to another code) work temporarily in another part of the project.
NOTE: If you don't commit your changes (modified files) and you switch to another branch, your code will be lost.

git branch my_branch
git checkout my_branch
# Make changes to the code, realize you have to switch branch for a moment
git stash save "Worked on login function"
# git diff / git status will show "working tree clean" -> after pushing to stash, all modifications to files are gone.

# You can now switch branches / cherry-pick commits / work on other part of project, when you come back:
# Option 1:
git stash list
git stash apply stash@{0} # after executing this, the saved stash will still be listed in stash list
# Option 2:
git stash pop # grabs the very first (top) stash, applies changes then drops that stash from stash list

You can also drop/delete stashes in stash list:

git stash list
git stash drop stash@{2}

# Or delete all the stashes in the list (assume that all those changes were junk/no longer needed)
git stash clear

NOTE: You can't merge two stashes (eg. git stash pop twice) -> will show Error: files would be overwritten by merge, please commit your changes or stash them before you merge.

NOTE: The same stash list is accessible to every branch => Useful scenario: If you've written all your changes to code in a wrong branch (master) you need to commit to another branch, just stash the changes git stash save "Worked on login function", git checkout another_branch, then grab changes from the stack (stash apply stash@{?}/stash pop).

Credits / Notes taken from these tutorials (which I highly recommend for more in-depth explanations):

How to create a Comment Section for your Django Blog!

Radu-Alexandru B — Mon, 28 Sep 2020 11:53:16 +0000

Hi!

This mini-tutorial will focus on creating a Comment Section for adding (without update/delete) comments to each blog post. We will implement this feature while using a class-based view, namely our BlogPost DetailView, mine's looks like this:

# MainApp/models.py
class BlogPost(models.Model):
    title = models.CharField(max_length=100)
    subtitle = models.CharField(max_length=200, blank=True, null=True)
    content = models.TextField()
    date_posted = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.SET_NULL, null=True)
    image = models.ImageField(upload_to='blog_images',
                              storage=gd_storage, null=True, blank=True)

    def __str__(self):
        return self.author.username + ', ' + self.title[:40]

    def get_absolute_url(self):
        return reverse('blogpost-detail', kwargs={'pk': self.pk})

# MainApp/views.py
class BlogPostDetailView(DetailView):
    model = BlogPost
    # template_name = MainApp/BlogPost_detail.html
    # context_object_name = 'object'

First things first: we need to create our BlogComment model in our models.py. We can personalize our model in any way we want, I'll stick to the basics of a comment and will add the following fields: author, content/body, and a date (when the comment was posted):

# models.py
from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User

class BlogComment(models.Model):
    blogpost_connected = models.ForeignKey(
        BlogPost, related_name='comments', on_delete=models.CASCADE)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    content = TextField()
    date_posted = models.DateTimeField(default=timezone.now)

    def __str__(self):
        return str(self.author) + ', ' + self.blogpost_connected.title[:40]

Every BlogComment will have an id (foreign key) of its BlogPost (a BlogPost can have multiple BlogComments), and if a BlogPost is deleted, then all the BlogComments that were linked to that BlogPost will be deleted (on_delete == CASCADE).
The author will also be a foreign key to the whole User object (that has its User id, username, email, etc), therefore a User can have multiple comments.
We will also add the magic method str() to view the comments in a more readable way (instead of viewing the object type) when we are making queries from our CLI/Admin panel).

In models.py, in our BlogPost model, we can also write a function that will return the number of comments of a blog post:

# models.py
class BlogPost(models.Model):
    title = models.CharField(max_length=100)
    ...

    @property
    def number_of_comments(self):
        return BlogComment.objects.filter(blogpost_connected=self).count()

After every change in the models.py file, we need to open our terminal and make the migrations to our database:

# CLI/Terminal
>> cd C:\Projects\...\YourDjangoAppMainFolder
>> python manage.py makemigrations
>> python manage.py migrate

Let's create a new form class: In the same folder as our models.py, create a new file named forms.py, where we'll write the following:

# forms.py
from django import forms
from .models import BlogComment

class NewCommentForm(forms.ModelForm):
    class Meta:
        model = BlogComment
        fields = ['content']

Très bien, now we can add to our get_context_data function within our class-based view BlogPost DetailView, in views.py, the following:

# views.py
from .models import BlogPost, BlogComment
from .forms import NewCommentForm

class BlogPostDetailView(DetailView):
    model = BlogPost
    # template_name = MainApp/BlogPost_detail.html
    # context_object_name = 'object'

    def get_context_data(self, **kwargs):
        data = super().get_context_data(**kwargs)

        comments_connected = BlogComment.objects.filter(
            blogpost_connected=self.get_object()).order_by('-date_posted')
        data['comments'] = comments_connected
        if self.request.user.is_authenticated:
            data['comment_form'] = NewCommentForm(instance=self.request.user)

        return data

Here we will retrieve all the comments from our current BlogPost object, store them (the query) in a local variable comments_connected, then send it further as a context to our HTML-based blogpost_detail.

However, in order to post comments directly from our class-based BlogPost DetailView, we also need to define a post method to receive the context from our form (situated in this view/html). Therefore, in the same class, we need to add:

# views.py
class BlogPostDetailView(DetailView):
    ... 

    def get_context_data(self, **kwargs):
        ...

    def post(self, request, *args, **kwargs):
        new_comment = BlogComment(content=request.POST.get('content'),
                                  author=self.request.user,
                                  blogpost_connected=self.get_object())
        new_comment.save()
        return self.get(self, request, *args, **kwargs)

Finally, in our blogpost_detail.html let's write in the DjangoTemplateLanguage the following:

<!-- COMMENTS  -->
<h2>Leave your comment!</h2>
<div id="comments_section">

  {% if user.is_authenticated %}
  <form method="POST">
    {% csrf_token %}
    <div class="form-group">
      {{ comment_form }}
      <button class="btn btn-info" type="submit">Add comment <i class="fas fa-comments"></i></button>
    </div>
  </form>
  {% else %}
  <a class="btn btn-outline-info" href="{% url 'login' %}?next={{request.path}}">Log in to add a comment!</a><br>
  {% endif %}

  {% if comments %}
  <strong class="text-secondary">{{ object.number_of_comments }} Comment{{ object.number_of_comments|pluralize }}</strong>
  <hr>
  <ul>
    {% for comment in comments %}
    <li>           
     <div>
        <span>
          <strong class="text-info">{{ comment.author }} </strong>
          <small class="text-muted">{{ comment.date_posted }}</small>
        </span>
        <p>
          {{ comment.content|safe }}
        </p>
      </div>
    </li>
    {% endfor %}
  </ul>
  {% else %}
    <strong class="text-secondary">No comments yet...</strong>
  {% endif %}

</div>

Sooo, there's a lot of code there, let's go through some parts of it step by step:

The first thing that we do is to check if the user is authenticated: if True, then show the user a form where he can write the content of his new comment. if False, then show the user a button that redirects him to the Login page. Also, it's important that after a user logs into his account to redirect him to the earlier blog post that he wanted to post a comment, so we'll add to our redirect link "?next={{request.path}}" where request.path is the current page path (e.g. localhost/blogpost/7)
Then we check if our current blogpost has any comments, if not, we'll put in our HTML "No comments yet..", but if we have any comments, we will then write the number of comments and then we will loop through each of them and show its author, date, and content.

Perfect, so we are almost done! However, this comment section will look rather dull... Therefore we need to create some styling, that we can find on Google or... here (thanks to bootdey.com)! To integrate it, we just need to add the CSS code in our blogpost_detail.html and the corresponding tags in our <div> and <ul> (list) sections, following their example.

Nice, now we are done! Hope you will find this useful. 😁
You can see a live example of this comment section on my blog: codingtranquillity.herokuapp.com... where you can also find more articles like this!

Have a nice day and... Happy coding!
R.B.

How to add sitemap.xml to your Django Blog and make it work on Heroku (SEO)

Radu-Alexandru B — Mon, 21 Sep 2020 14:16:11 +0000

Okay, I've spent a little to much time to figure this out, but here's my version of the Simplest Way to Add sitemap.xml to a Django App that is hosted on Heroku. This will also solve the error: "Internal Error 500" when trying to access /sitemap.xml from Heroku live app (production).

First things first, make sure you have what to serve as static or as dynamic links. In this example, I'll add to my sitemap.xml my dynamically created BlogPosts and 3 more static pages: Main/Index.html, About.html and Contact.html. So let's get started:

Firstly we need to add to our settings.py file the followings:

# settings.py
INSTALLED_APPS = [
    ...

    'django.contrib.sitemaps',
    'django.contrib.sites',
]
SITE_ID = 1

Then, locally, we need to open our terminal and run python manage.py migrate. This will add to our local database the Sites model.

We observe that the first entry in Sites table (with SITE_ID == 1) is "example.com"... We will later change that in production when we'll push to Heroku.

Now, we need to create a new file in our MainApp (Django App that we created at beginning of our project when we ran ./manage.py startapp MainApp), namely ../MainApp/sitemaps.py. Here we'll add the followings, we can also refer to the documentation on Django Sitemaps:

# sitemaps.py
from django.contrib.sitemaps import Sitemap
from django.shortcuts import reverse
from .models import BlogPost

class BlogPostSitemap(Sitemap):
    changefreq = "weekly"

    def items(self):
        return BlogPost.objects.all()

class StaticViewSitemap(Sitemap):
    changefreq = 'monthly'

    def items(self):
        return ['index', 'about', 'contact']

    def location(self, item):
        return reverse(item)

Now we need to add our continuingly generated sitemap.xml to our MainApp/urls.py. So we need to add these lines:

# urls.py
from django.contrib.sitemaps.views import sitemap
from .sitemaps import BlogPostSitemap, StaticViewSitemap

sitemaps = {
    'posts': BlogPostSitemap,
    'static': StaticViewSitemap,
}

urlpatterns = [
    ...
    path('sitemap.xml', sitemap, {'sitemaps': sitemaps}),
]

Good. We can check that sitemap.xml is displayed in our local server by running python ./manage.py runserver and access our http://localhost:8000/sitemap.xml.

Aaand we are done! almost. Now we can finally push our code to Heroku, in the classic way:

> git status
> git add -A
> git commit -m "Add sitemap.xml to Django App"
> git push heroku master

But here's the catch... Now when we are trying to access https://myappname.herokuapp.com/sitemap.xml we get an "INTERNAL SERVER ERROR (500)". Also, if we try to access our Sites model in our Admin page, we get the same error.

But why's that?

When we pushed our code to Heroku, our heroku server calls the "makemigrations" command from our manage.py, but we didn't manually created (wrote any code) to our models.py file, so makemigrations will return "No changes detected", therefore will not run "migrate" command.

So, we need to manually run migrate command from our heroku server. To do that, we simply call in our terminal these commands in our django project folder:

> heroku run bash
$ python manage.py migrate

And that's all. But now we also need to access again our admin page from our heroku deployed app, and change that first entry from Sites model from "example.com" to "myappname.herokuapp.com". Then, we'll have to run

> heroku restart

And now we are really done. We can access our sitemap from myappname.herokuapp.com/sitemap.xml.

I hope this mini-tutorial will help someone one day. It will certain help me to not struggle again if I encounter again this problem.

Happy coding,

R.B.

DEV Community: Radu-Alexandru B

Running a Node.js App (Angular/React) on Android using Termux

Installing Termux

Installing apt package manager and other dependencies

Installing Nodejs

Installing and Running Angular (ng)

Installing Acode Editor App

Installing other packages in Termux

Running React App (npx)

Installing Java

Conclusions

Top 8 macros for Developers to maximize their productivity with AHK

Contents

Short short Intro

1. Run command prompt in the currently focused folder

2. Run command prompt followed by certain commands

3. Search on Google the currently selected text

4. Open applications/websites using shortcuts

5. Open new explorer window with the same path as the currently focused folder

6. Copy to clipboard the HEX color of the pixel under your cursor

7. Adjust the main volume using the mouse scroll wheel

8. Auto-complete syntaxes with Hotstrings

Honorable mentions

Put PC to sleep

Empty recycle bin

Get the current date/hour

Use arrow keys as Home/End while holding RAlt

Disable CapsLock key

Fin

Use HotStrings in your Dev Life to increase your daily Productivity with AHK

Contents

What are AHK's HotStrings?

Hotstrings we are going to create

Hotstrings types

Creating our Hotstrings

Embrace Mouse Macros into your Dev Life to increase your Productivity with AHK - Part 2

Contents

Embrace Keyboard Macros into your Dev Life with AutoHotKey - Part 1

Contents:

What is AutoHotKey?

Installation

Keyboard keys and combinations that you can map/remap

Mapping our first keys

Full code from this post

How to add Like/Unlike button to your Django Blog

Get started with Git CLI and use these workflows in your everyday projects

Here's the contents:

git help

Set up global configuration variables

Create own local empty repository init VS. clone an existing repository as a local repository in your PC

git status

git diff

Git work-flow (on master branch)

Schema: Working Directory, Staging Area, Git Remote Repository

Create a new branch from CLI

Git Complete Workflow - Work from another branch

Create a new repo from a locally existing/completed project (mini-workflow)

Locally Mistakes that could've been made

If we made changes to a single_file but then we don't want to keep the changes to that file anymore (we want to undo/go back):

We mess up a commit -m message. We want to modify the last commit message without doing another commit

We forgot to add a file to the last commit. We want the add the file without committing again.

We made commits to the master branch instead of our working branch. Fix: we "move" a commit(hash) to the master and return the state of the master branch

Types of git resets

SOFT RESET

MIXED RESET (DEFAULT)

HARD RESET

Fatal: We did a hard reset on some changes but we realized that we actually need them: git reflog (or we deleted last commits)

Undoing a commit after pushing to remote server. Fix without changing the git history

Using the git stash command ("temporary" commits)

Credits / Notes taken from these tutorials (which I highly recommend for more in-depth explanations):

How to create a Comment Section for your Django Blog!

How to add sitemap.xml to your Django Blog and make it work on Heroku (SEO)

Fatal: We did a hard reset on some changes but we realized that we actually need them: `git reflog` (or we deleted last commits)

Using the `git stash` command ("temporary" commits)