Migrate Wordrpess site into localhost using WAMP

About DB files

Open the db file and then:
Search replace:for example,
search replace the text https://dev-forward-content.pantheonsite.io with http://forward-content
then search replace dev-forward-content.pantheonsite.io with forward-content

Save the file and you may also zip it if it's too large.

Now, go to phpmyadmin and create a new db. Then, import the modified db.

About WP config

Open wp-config.php file and fill in the fields:

DB_NAME
DB_USER
DB_PASSWORD
DB_HOST: (you may use "localhost" for this one)

About images and assets

Export all images inside /wp-content/uploads/ folder (u may create "uploads" folder manually if not available)

Once you import the db in your localhost:

1- Wampserver > Your Virtual Hosts > Virtual Host management
2- Fill the info:
Name of the virtual host: forward-content
Complete absolute path: c:/wamp64/www/forward-content
Leave the other one blank
Click "Start the creation.."
3-Run CMD type ipconfig /flushdns hit enter
4- Right-click Wamp>tools>Restart DNS

When you go to http://forward-content you'll see the site come up :) 

To import large sql files:

Click your Wamp server icon -> MySql -> MySql console
Once mysql console is open. Enter your mysql password. and give these commands.

use user_database_name

press enter

source c:/your/sql/path/filename.sql

press enter

Video:

Javascript: Get object from clicked element

 

function getObjectFromClickedEl(clickedElClassName) {

      const clickedEl = document.querySelectorAll(clickedElClassName);

      for (let i = 0; i < clickedEl.length; i += 1) {

        clickedEl[i].addEventListener("click", function (event) {

              console.log(event.currentTarget);

        });

      }

    }

Figma: how to create a microanimated component

Step 1: Create a component

Step 2: Add a variable for such component. This will create a duplicate element

Step 3: Click the duplicate element and then click the Prototype tab at the top of the right panel

Step 4: Choose an animation to go back and forth from one element to the other

Please note: for click animations to work back and forth, you'll need to use the "While pressed" interaction option

GIT: Replace username and email from all commits

 1- Create a file custom-name.sh with the following code:

#!/bin/sh

git filter-branch -f --env-filter '
OLD_EMAIL="xxxxxxxxxxxxxxxxxxxxxxxxxx"
CORRECT_NAME="zzzzzzzzzzzzzzzzz"
CORRECT_EMAIL="yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy"
if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_COMMITTER_NAME="$CORRECT_NAME"
    export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_AUTHOR_NAME="$CORRECT_NAME"
    export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
fi
'  HEAD

2- Just replace
OLD_EMAIL="your old email goes here"
CORRECT_NAME="your name goes here"
CORRECT_EMAIL="new email goes here"

3- Put this file at the root of your project

4- In you GIT bash/shell, run: sh custom-name.sh

5- Push changes to remote branch 

And that's it! 

GIT: Undo a commit and remove changes from local

 To do this, run: git reset --hard origin

Photoshop: multiple pages for print materials in PDF format

To create multiple pages, you’ll need to create multiple artboards. To do this, please check the “artboards” checkbox when creating your document.

To duplicate the artboard, you may right click the artboard layer and select “duplicate”

When saving/exporting to PDF, go to File > Export > Artboards to PDF and then hit “Run”

 Please note: when using PS for print materials in PDF format, consider the following: 

• Bleed needs to be added to the overall size of the pages (i.e. instead of 8.5x11, use 8.625x11.125 for 0.125 bleed)

Figma not ready yet for printable documents

 Although there are plugins that let u export into CMYK printable PDFs, Figma will not let you modify its colors.

Also, as to date, CMYK mode not available in Figma.

Recommended tools:

• Photoshop
• Illustrator
• InDesign
  

Quick note: if you ever want to save the file as JPG or PNG, please use "Export as" option, and then make sure to check off the "Convert to sRGB" option before exporting.