Miscellaneous-Pk
a month ago

Easily change state of HTML elements using Class names.

Use CSS class names to easily change stuff on your websites. It keeps code cleaner and builds your CSS-vocabulary over time. For example toggling display of an element:-

CSS

d-none : {
display: none !important;
}

d-block : {
display: block !important;
}

HTML

<div id="error-msg">
This is may be some error message on your form.
</div>

jQuery

$('#error-msg').toggleClass('d-none d-block');

Example

Here is a code pen to make popular collapsing navbar. Toggle between class names .collapse and .collapsing using jQuery. https://codepen.io/qasim_ali/pen/wbLpPG

Additional Uses

  • toggle states between .active and .in-active class names.
  • change opacity using .hide and .show class names.
  • change <button> style using .btn-outline-dark and .btn-outline-light class names.

so many possibilities, it helped me a lot. I picked this convention from bootstrap.

mddanishyusuf
3 months ago

If-None-Match Header config saved my day

I'm building an small project with GitHub APIs and by default this is the config Cache-Control: public, max-age=60, s-maxage=60

Means GitHub APIs will be cache for next 60 sec of the call. I can't wait for that So, I google to find a solution and I found this https://github.com/octokit/rest.js/issues/890#issuecomment-392193948

Just use a basic config 'If-None-Match': '' in header and that's all.

Like this.

axios.get(url, {header: {'If-None-Match': ''}})

mddanishyusuf
3 months ago

Render JSON objects in React Component

In Angular it's easy to view JSON object just bind like this.

<pre>
{{jsonObject | json}}
</pre>

In React You have to stringify first to the JSON object.

<pre>
  <code>
    {JSON.stringify(this.state.json, null, 2)}
  </code>
</pre>

How you render JSON object in React. Comment your trick.

willhoag
3 months ago

Quick React-like API for adding html to a page in plain JS

I use this when need to quickly add some HTML to a page programmatically.

Code is:

function el (type, attrs, children) {
  children = children || []
  attrs = attrs || {}
  var e = document.createElement(type)
  Object.keys(attrs).forEach(function (key) {
    e.setAttribute(key, attrs[key])
  })
  children.forEach(function (child) {
    if (typeof child === 'string') {
      if (e.textContent) {
        e.textContent = child
      } else {
        e.innerHTML = child
      }
    } else {
      e.appendChild(child)
    }
  })
  return e
}

And usage:

const newElement = (
  el('div', { className: 'bold' }, [
    el('p', {}, ['here is text in a paragraph'])
  ])
)

document.appendChild(newElement)
mddanishyusuf
3 months ago

Design an input box with search emoji

Recently I add search input box into dailyhack.xyz and without search icon the input doesn't feel good according to UX. So, to add a icon inside input box need more element and CSS. Nowadays I'm using lots of emoji and I think why not use a little hack to design this search input box without any extra element and CSS. Here is the hack.

<input type="text" placeholder="🔍 Let's find some tricks from past"/>

input-with-emoji

So, I'm adding a search emoji into placeholder of the input box.

What you think? is this cool hack?

FabioRosado
3 months ago

Compile Sass files to CSS on the fly

If you use VSCode and prefer to use sass instead of plain old css. You can install the Live Sass Compiler from the extension marketplace. After you installed the extension all you need to do is press a button on the bottom of the window of vscode and watch your sass files.

The extension will automatically turn all your files into a single css file (this includes all the ones you import within your sass files).

The bar looks like this:

sass compiler

FabioRosado
3 months ago

Open links in new tab safely

Everyone knows that if you use target="_blank" on a link tag that link will be open in a new tab. But using just this is a security risk and could allow bad people to take control of your page by abusing the window.opener event - read more about it here

So if you need a link to open on a new tab, make sure you add rel="noopener noreferrer" to the tag as well.

So instead of using:

<a href="http://example.com" target="_blank">Link</a>

You should use: <a href="http://example.com" target="_blank" rel="noopener noreferrer">Link</a>

owenconti
3 months ago

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/tips/5-keyboard-shortcuts-to-navigate-your-code-faster/

fayazara
3 months ago

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");

ahmadawais
3 months ago

[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

Load More