Giter Site home page Giter Site logo

mddanishyusuf / dailyhack Goto Github PK

View Code? Open in Web Editor NEW
149.0 149.0 15.0 1.76 MB

🐱‍💻 Tiny Tiny Hacks we use in our daily life.

Home Page: https://dailyhack.now.sh/

JavaScript 99.84% Shell 0.08% SCSS 0.08%
coding daily daily-tasks hacking hacktoberfest hacktoberfest-accepted reactjs tools tricks

dailyhack's People

Contributors

akash-joshi avatar deadcoder0904 avatar deamme avatar dependabot[bot] avatar fajarsiddiqfs avatar mddanishyusuf avatar muescha avatar shadab14meb346 avatar stefanwuthrich avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dailyhack's Issues

Screenshot Tool By Zeit Return Screenshoot by URL

Link Preview Tool: I found this tool in Zeit example repository https://github.com/zeit/now-examples and It's quite helpful and Nice if A Blog post or any page don't have any featured image then you can use this tool API.

I'm using this API into DailyHack Meta Tags to preview page screen in all social network link preview

How to use:

It's so simple just pass the URL as endpoint.

https://screenshot-v2.now.sh/<URL>

https://screenshot-v2.now.sh/dailyhack.xyz/post/quickly-create-images-for-social-media-and-seo-22

It will return you an image of that page. Good new it's Open Source Project. So, you can host this on your own server.

Next.js Application Deploy on Zeit

I'm using Zeit service to host my Next.js Application because it's easy to maintain and deploy.

  1. First, just run this command(now-cli is required for this)
    now

  2. When now command done you will get the deployment URL. that URL changed every time when you make a new deploy. So, this way your production application will not affect. that mean alias is not assigned to the latest deployment URL. Cool!!!

  3. So, if you seem that latest deployment is good to go on production then you just have to assign the alias to this deployment URL.
    now alias <deployment URL> <domain>
    like this:
    now alias dailyhack-3c1tmk4cu.now.sh dailyhack.xyz

that's all.

DNS troubleshooting

You've setup your dns but it doesn't work. It typically means you've set it up wrong or the dns having propagated to all DNS servers yet.

I use https://dnschecker.org/ to check the DNS propagation and keep track.

getUrlParameters in Javascript

Simply use this line to get query parameters from url in Javascript

let urlParams = new URLSearchParams(window.location.search.substring(1));
let value = urlParams.get("query");

Git: push dev branch, merge into master, push master to origin, go back to dev

I use this command super often, basically whenever I want to push a new feature for KanbanMail to production. It pushes my dev branch, goes to master, merges my dev branch, pushes it, then goes back to my dev branch. Here my two main branches are called master and dev, but you could change it to whatever you want.

git checkout dev && git push && git checkout master && git merge dev && git push && git checkout dev

Get day of week

Simply get day of week.

💻JavaScript Snippets

<script>
  var d = new Date("2012-09-10");
  var n = d.getDay();
  console.log(n);
</script>

It will show
1

💻PHP Snippet

<?php 
$date = "2012-09-10";
$dayofweek = date('w', strtotime($date));
print_r($dayofweek);
?>

It will show
1

💻Python Snippet

import datetime
print(datetime.datetime.strptime('10 09 2012', '%m %d %Y').weekday())

It will show
1

5 keyboard shortcuts to navigate your code faster

Here are 5 quick keyboard shortcuts I recommend you setup to help you navigate your code faster!

  • Delete line(s): CMD + D
  • Move line(s): OPTION + UP or DOWN ARROW
  • Go to line: CMD + L
  • Go back/forward: CMD + [ or ]
  • Start/end of word: OPTION + LEFT or RIGHT ARROW

Bonus:

  • Highlight characters with start/end of word: SHIFT + OPTION + LEFT or RIGHT ARROW

Full article available here: https://owenconti.com/posts/5-keyboard-shortcuts-to-navigate-your-code-faster/

Use Netlify for a free and simple URL shortener

I use Kent C. Dodd's netlify-shortener tool to setup a free URL shortener on Netlify.

It works by updating a _redirects file in your repository with a CLI command, so I can type shorten https://sunnysingh.io/blog/readable-code my-short-name and it will deploy and copy https://sunny.link/my-short-name to my clipboard.

It's also possible to create a web interface for this as well, but will take a bit more time to setup versus the few minutes with netlify-shortener.

Feel free to look at my URL shortener repo to see how few things are needed to get it working: https://github.com/sunnysingh/sunny.link

CSS border awesome tricks

I found this CSS tricks to rounded the box in one CSS code. Here I'm sharing a codepen.io link.

https://codepen.io/mddanishyusuf/pen/GLKwpx

Pattern: border-radius: <horizontal radius> / <vertical radius>

  1. border-radius: 60px 45px 30px 15px/15px 30px 45px 60px;
  2. border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  3. border-radius: 50% 40% 45% 50% / 40% 50% 55% 40%;
  4. border-radius: 50% 50% 40% 40% / 60% 60% 20% 30%;

image

Check your battery status and date in your mac

While I create www.loopcv.pro It happens a lot to travel and work from coffee shops.
Two commands that I use as aliases are:

  1. alias now='cal; date +"%T"; date +"%d-%m-%Y"' which prints the calendar, the date and the time

  2. alias bat='pmset -g batt' which prints the battery status and the remaining time!

🚀🚀

Ignoring a previously committed file quickly

Files already tracked by Git are not effected by the .gitignore file.

If you want to ignore a file that you've committed in the past,

  • Use echo with >>(double redirection arrow) to append a relative file path to your .gitignore directly from the terminal.
  • Use git rm with the --cached option to delete the file from your remote repository, but keep it in your working directory as an ignored file.
  • Commit.
$ echo debug.log >> .gitignore
$ git rm --cached debug.log
rm 'debug.log'
$ git commit -m "Start ignoring debug.log"

Keyboard Events Live Reference

See the key and character codes vs. event types for your keyboard events live.

Here's the HTML file, you can upload it to your own Github and use Github Pages under settings to create a live preview from your own profile. (A hack within a hack)

I just started working with the DOM a lot more recently. For developers working with [Keyboard] DOM events regularly, what other columns would you add to this to improve your workflow?

Hide desktop items on Mac

This terminal command will hide everything on your desktop, so it doesn't give you anxiety 😅

It doesn't actually delete the stuff on your desktop, it just hides it. You can still access the items by going to your Desktop folder in Finder.

defaults write com.apple.finder CreateDesktop -bool false;killall Finder

And to show them again, you can do this:

defaults write com.apple.finder CreateDesktop -bool true;killall Finder

Vim: Search for a term

When editing a long file with vim, you might need to try and find a certain word or term, but scrolling down is not really practical.

Luckily, Vim has your back and you can just use these two commands to search for a term through the whole file.

  • :?<term> - searches for that term from the cursor down
  • :\<term> - searches for that term from the cursor up

If you want to cycle through different occurrences of the same term you can use:

  • n or / - go to the next searched term
  • N or ? - go to the previous searched term

Search previous typed command on terminal

If you press ctrl+r in the terminal you will activate the reverse-i-search. With it, you can search your whole history for a command. If you type very long commands you or if you don't remember the whole command that you typed you can just press ctrl+r and type the bit you remember, the command that matches will show up.

If you want to search it again all you need to do is press ctrl+r again.

Example

Let's say you used the command git rebase -i Head~2 before, but you don't remember what does after git rebase or you just don't feel like typing the whole thing.

Press ctrl+r and then type git re if git rebase -i Head~2 was the last command that you used, it will be shown. Then just press enter to run the command.

Alfred app

Massive productivity boost with https://www.alfredapp.com/

Quick app switching, built in clipboard and snippet management plus it pulls in contacts and search. It's a beast for MacOS!

[Compress Image] Compress your image for the web

Often frontend developers need to deal with lots of images. The image should have the best quality, appropriate dimensions & low file size. The tools that I often use to compress images are (get more details from here)

  1. jpegtran: for JPEG image optimization
  2. gifsicle: suitable for GIF images
  3. optipng: lossless PNG image optimization
  4. pngquant: lossy PNG image optimization

Automatically Update Your Website Footer

👨‍💻Automatically updating copyright year or other dynamic timestamp.
✅Just copy a code snippet


💻JavaScript Snippets - For Static Sites

<script type="text/javascript">
  document.write(new Date().getFullYear());
</script>

😻It will show

2019

If you want a bit more information, here's a snippet you can customize:

&copy; 2010<script>new Date().getFullYear()>2010&&document.write("-"+new Date().getFullYear());</script>, Company.

It will give you:

© 2010-2019, Company.

💻PHP Snippets - For Dynamic Sites

<?php echo date("Y"); ?>

😻It will show

2019

If you want a bit more information, here's a snippet you can customize:

&copy; <?php
  $fromYear = 2008; 
  $thisYear = (int)date('Y'); 
  echo $fromYear . (($fromYear != $thisYear) ? '-' . $thisYear : '');?> Company.

It will give you:
© 2010-2019, Company.

Copy the ssh key id_rsa.pub directly from the terminal

You don't need to copy and paste the key to the machine you want to connect to another. All you have to do is generate your key and then type this command on the terminal:

ssh-copy-id <username>@<ipaddress/host>

You will be prompt to type in the username password and then the key will be copied, you can now log into the machine by using the command ssh <username>@<ipaddress/host>

[VSCODE] Switch back from Settings UI to Settings.JSON | VSCode.pro

OneDevMinute

[Part of the https://VSCode.pro course] — VSCode recently stopped displaying the split of VSCode default settings and users settings along with the settings.json file — hacker in me doesn't like the new UI Settings so — I moved them back.

P.S. If you like my work, feel free to share it, like it, and subscribe to my YouTube channel.

Peace! ✌️

Video Transcript: (CLICK TO EXPAND!)

🎸 (MUSIC PLAYING) While I was working with VSCode.pro course, one thing happened. Visual Studio kept updating every single month. Now if you press COMMAND (⌘) + COMMA (,) or if you press COMMAND (⌘) + SHIFT (⇧) + P and search for settings and open the settings, you get a shiny new UI, the user interface for settings area. But the hacker in me doesn't really like it. And throughout this course, I'll be teaching you to configure all the different settings through this particular file "settings.json" So, how about we go ahead and make this our default settings for the time being. Press COMMAND (⌘) + SHIFT (⇧) + P search for settings And click on Open Settings. Now search for Settings again. And as you can see Workbench does settings that determine which setting editor to be used by default is set to UI. I want you to go ahead and set it to json. As soon as you do it, this bar basically indicates that this setting has been updated. After setting your Settings Editor to JSON Go down here, or search for "Use Split JSON" E.g. "Settings Use Split JSON" – and you'll meet this particular setting Here I want you to go ahead and checkmark this setting It should be check marked so that you can see a split of All of your default settings as well as your "settings.json" file E.g. now if I press COMMAND (⌘) + COMMA (,) Your settings will look like this! You will have the "Default User Settings" on the left and your "User Settings" on the right. This is very important for this course because in this entire course I'll be doing all of the settings and searching for them through this area. Now if I go back and press COMMAND (⌘) + COMMA (,) The "settings.json" file opens up. That is exactly what we want for this course But if you would still like to access the UI for Settings, what can do is press COMMAND (⌘) + SHIFT (⇧) + P Search for Open Settings — and here it is Open Settings UI. If you click it, you'll be in the UI of the settings. But we can set up a keyboard shortcut for that as well. To do that, you can either go from here to the keyboard shortcuts Or you can press COMMAND (⌘) + K then COMMAND (⌘) + S And access these keyboard shortcuts. Search for open settings — this is the setting we want. Open Settings UI Click on the plus icon (+) and let's type COMMAND (⌘) + PERIOD (.) Press [ENTER] Now if you press COMMAND (⌘) + PERIOD (.) you will be opening up the UI settings. And if you will press COMMAND (⌘) + COMMA (,) you will be opening up the normal JSON settings. Let's try it out. I am going to press COMMAND (⌘) + COMMA (,) and it opens up the settings.json file. I am going to press COMMAND (⌘) + PERIOD (.) and there you have it. A new shiny UI of settings. So that's about it. You can obviously set a different keyboard shortcut here but I tend to go with this one. 👍 Tweet your progress with #VSCODEpro @mrahmadawais

Use Linux on ChromeOS

Linux can be installed On Chrome OS without removing Chrome OS!

Chrome OS has tons of dis-advantages, The apps, Extestions and How things run.

Fix this by Installing Linux on Chrome OS


STEPS

  1. Go to your settings on Chrome OS
  2. Click the search bar in the settings. and search for Linux
  3. Press Install and Keep the Chromebook on that, and Still

Affter all it's installed, It take you to a Terminal, You can install apps such as Firefox, and others

EXAMPLES

This link will help

Easy to remember local static web server - httpster

I know there's tons of options out there, but this one is my go-to. Primarily because it's hard to forget, but also has just the right amount of features.

httpster

Install:

npm i -g httpster

Then from any folder you want served, simply:

httpster

Default port is 3333.

Advanced Usage:

With custom port:
httpster -p 8080

Declare directory as root:
httpster -d /dist

Even more advanced usage, https://github.com/SimbCo/httpster

Handy macOS terminal commands 🛠️

Stop iTunes from responding to the keyboard media keys

launchctl unload -w /System/Library/LaunchAgents/com.apple.rcd.plist 2> /dev/null

Disable the "Are you sure you want to open this application?" dialog

defaults write com.apple.LaunchServices LSQuarantine -bool false

Tell macOS to always show all files in finder

defaults write com.apple.finder AppleShowAllFiles YES

Finding a previous IP address

When I change the DNS of a website, I'll often need the previous IP address to SSH back into the previous server.

I never write the previous IP down. Luckily, you can search the IP history of your domain by entering it here:

https://viewdns.info/iphistory/

How do display errors in PHP

Paste these 3 lines of PHP code at the beginning of your PHP-file: (right after <?php)

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

This is just one of many ways to do this but I think it's the easiest solution if you need a quick way to display errors. Just don't forget to remove those lines before using your code in production! ;)

Change the date of a git commit

Set the date of the last commit to the current date:
GIT_COMMITTER_DATE="$(date)" git commit --amend --no-edit --date "$(date)"

Set the date of the last commit to an arbitrary date:
GIT_COMMITTER_DATE="Mon 20 Aug 2018 20:19:19 BST" git commit --amend --no-edit --date "Mon 20 Aug 2018 20:19:19 BST"

Set the date of an arbitrary commit to an arbitrary or current date:
Rebase to before said commit and stop for amendment + change the date as above. See Change the date of a git commit for full walkthrough of this case.

Slug Text function

public function remove_accent($str)
	{
	    $a = array('À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í',
	        'Î', 'Ï', 'Ð', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'Ý', 'ß',
	        'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í', 'î', 'ï',
	        'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'ÿ', 'A', 'a', 'A',
	        'a', 'A', 'a', 'C', 'c', 'C', 'c', 'C', 'c', 'C', 'c', 'D', 'd', 'Ð', 'd', 'E',
	        'e', 'E', 'e', 'E', 'e', 'E', 'e', 'E', 'e', 'G', 'g', 'G', 'g', 'G', 'g', 'G',
	        'g', 'H', 'h', 'H', 'h', 'I', 'i', 'I', 'i', 'I', 'i', 'I', 'i', 'I', 'i', '?',
	        '?', 'J', 'j', 'K', 'k', 'L', 'l', 'L', 'l', 'L', 'l', '?', '?', 'L', 'l', 'N',
	        'n', 'N', 'n', 'N', 'n', '?', 'O', 'o', 'O', 'o', 'O', 'o', 'Œ', 'œ', 'R', 'r',
	        'R', 'r', 'R', 'r', 'S', 's', 'S', 's', 'S', 's', 'Š', 'š', 'T', 't', 'T', 't',
	        'T', 't', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'W', 'w',
	        'Y', 'y', 'Ÿ', 'Z', 'z', 'Z', 'z', 'Ž', 'ž', '?', 'ƒ', 'O', 'o', 'U', 'u', 'A',
	        'a', 'I', 'i', 'O', 'o', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', '?',
	        '?', '?', '?', '?', '?');
	    $b = array('A', 'A', 'A', 'A', 'A', 'A', 'AE', 'C', 'E', 'E', 'E', 'E', 'I', 'I',
	        'I', 'I', 'D', 'N', 'O', 'O', 'O', 'O', 'O', 'O', 'U', 'U', 'U', 'U', 'Y', 's',
	        'a', 'a', 'a', 'a', 'a', 'a', 'ae', 'c', 'e', 'e', 'e', 'e', 'i', 'i', 'i', 'i',
	        'n', 'o', 'o', 'o', 'o', 'o', 'o', 'u', 'u', 'u', 'u', 'y', 'y', 'A', 'a', 'A',
	        'a', 'A', 'a', 'C', 'c', 'C', 'c', 'C', 'c', 'C', 'c', 'D', 'd', 'D', 'd', 'E',
	        'e', 'E', 'e', 'E', 'e', 'E', 'e', 'E', 'e', 'G', 'g', 'G', 'g', 'G', 'g', 'G',
	        'g', 'H', 'h', 'H', 'h', 'I', 'i', 'I', 'i', 'I', 'i', 'I', 'i', 'I', 'i', 'IJ',
	        'ij', 'J', 'j', 'K', 'k', 'L', 'l', 'L', 'l', 'L', 'l', 'L', 'l', 'l', 'l', 'N',
	        'n', 'N', 'n', 'N', 'n', 'n', 'O', 'o', 'O', 'o', 'O', 'o', 'OE', 'oe', 'R', 'r',
	        'R', 'r', 'R', 'r', 'S', 's', 'S', 's', 'S', 's', 'S', 's', 'T', 't', 'T', 't',
	        'T', 't', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'W', 'w',
	        'Y', 'y', 'Y', 'Z', 'z', 'Z', 'z', 'Z', 'z', 's', 'f', 'O', 'o', 'U', 'u', 'A',
	        'a', 'I', 'i', 'O', 'o', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'A',
	        'a', 'AE', 'ae', 'O', 'o');
	    return str_replace($a, $b, $str);
	}

	public function slugify($str)
	{
	    return strtolower(preg_replace(array('/[^a-zA-Z0-9 -]/', '/[ -]+/', '/^-|-$/'),
	        array('', '-', ''), $this->remove_accent($str)));
	}

VSCode - Code editor

Probably the best code editor out there. It has tons of extensions and is just a joy to work with.

Best theme to have is: https://vscodethemes.com/e/dracula-theme.theme-dracula.

Best font to code with: https://github.com/tonsky/FiraCode

Highlight colors in your code: https://github.com/tonsky/FiraCode

My VSCode settings (very opinionated you probably shouldn't copy everything ): https://github.com/deamme/gatsby-starter-prismic-resume/blob/master/vscode.json

Enjoy an amazing setup!

Simple PayPal Payment Form

REF : http://stackoverflow.com/questions/5255571/passing-price-variable-to-paypal-with-custom-button
You can use this form -->

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="XXXXXXXX">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Payments">
<input type="hidden" name="amount" value="100.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="rm" value="1">
<input type="hidden" name="return" value="http://YOURSITE.com/">
<input type="hidden" name="cancel_return"     value="http://YOURSITE.com/payments.html">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif"     border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Or direct URL with gets -->
https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&businesss=XXXXXXXXX&lc=US&item_name=$mydescription&amount=$myprice&........

Stores a string to a variable using scanf in C

You can use "scanf("%d[^\n],variableName);" to store a string including the space to provide enough memory to the variable.
ex:

char name[100];
printf("Enter a name);
scanf("%[^\n]",name);
printf("%s",name);

Quickly create images for social media and SEO

I use Pablo for quickly creating a properly sized image for Twitter, Facebook, LinkedIn, and search engines.

It's not as full featured as an image editor, but that is the point. You just search an image from Unsplash, add a heading and/or caption, and an optional watermark. Download the image and set it up in your meta for articles.

Get last typed command on terminal

You can run the last typed command in the terminal by using !!.

Let's say that your history looks like this:

cd
ls
cd Documents
ls

if you type !! the last command (ls) will be auto-filled in the terminal for you.

But you can also get more specific, by using !<term> so you could use !cd to get the last cd command which was cd Documents

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.