AxeemHaider
a month ago

FireO - Google cloud Firestore ORM package in python

A modern and simplest convenient ORM package in Python. FireO is specifically designed for the Google's Firestore, it's more than just ORM. It implements validation, type checking, relational model logic and much more facilities.

Usage Example

class User(Model):
    name = TextField()


u = User()
u.name = "Azeem Haider"
u.save()

# Get user
user = User.collection.get(u.key)
print(user.name)

Read More about FireO

Give and some good feedback and appreciate our work by giving stars on our project FireO

absyah
4 months ago

Docker Basic Commands

These docker commands are that I use every single day

# show containers
docker ps

# Logging to container
docker logs -f <container_id>

# ssh to container
docker exec -it <container_id> /bin/bash

# build container
docker-compose build [container_name_on_yml]

# run container
docker-compose up [container_name_on_yml]

# run rails console on container
docker-compose run <container_name_on_yml> rails c

# remove all images
docker rmi -f $(docker images -a -q)

Please let me know your other docker's daily hacks! 🥇

Miscellaneous-Pk
6 months 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
7 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
7 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
8 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
8 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
8 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
8 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
8 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/

Load More