DEV Community: Daniil Pankov

Scroll shadow above the content with pure CSS

Daniil Pankov — Wed, 27 Jul 2022 09:49:22 +0000

You tried using different libraries (react-scroll-shadow, scroll-shadow-element, use-scroll-shadow), but they didn't work for you?
You even tried to write your own solution using background-attachment, but that didn't work too, the shadow displayed behind the elements (of course, because it's background, not foreground)
JS seems cool, but too heavy, and you are tired of catching bugs with this solution

Hello there, I know what else you can do:

4. Try using `sticky`

This thing saved me a lot when I was developing scrollable content

Take a look here:

How to do this?

It's pretty simple, you should structure your scrollable block like this:

/* Wrapper styles, sometimes you might need overflow-x-hidden */
<div style={{position: 'relative', overflow: 'overflow-y-auto'}}>
 /* Upper shadow block */
 <div style={{position: 'sticky', zIndex: '10', top: '-1px', 
 'linear-gradinet(to bottom, '#00000000' '#fff')'}} />

<p>Bunch of your content here</p>

 /* Bottom shadow block */
 <div style={{position: 'sticky', zIndex: '10', bottom: '-1px', 
 backgroundImage: 'linear-gradinet(to bottom, '#fff' 
 '#00000000')'}} />
</div>

Phew, hope I didn't mess up the styling part, I don't want to include the .css file, because you'll understand the code better in one plate

Good luck doing great layouts :)

Mailspring/email client inverts colors in dark mode

Daniil Pankov — Wed, 13 Jul 2022 17:47:44 +0000

Hey, Mailspring / other mail client team, I found out your little secret, thanks for spending my time solving mystery on why the heck my dark email becomes white and shiny?!

Solution

In your body tag or in your .css add:

  body {
    filter: none !important;
  }
  img {
    filter: none !important;
  }

Next time your email client will do this shit, please take a look into the source code (Ctrl + Shift + I) and search for filter or something like that, usually inline styles will overlap any other styles and thing will work

ENJOY!

Material Search Bar

Daniil Pankov — Thu, 06 Jan 2022 19:53:27 +0000

Expanding search bar, try it :)

Pure CSS Loader Life is Strange

Daniil Pankov — Tue, 14 Sep 2021 09:43:04 +0000

Deploy telegram bot to heroku for free

Daniil Pankov — Sat, 21 Aug 2021 13:42:36 +0000

I used telegraf, but you can use any other framework and language

Hello there, you created your telegram bot and want to deploy it somewhere? Let me help you, I already done this before:

▶ Bot itself - https://t.me/WishBasket_bot
▶ Source code - https://github.com/T-Damer/wishBasket-bot

First steps

Create repository on github and upload your bot to main branch, like I did.

Allright, now let's go to Heroku Dashboard. Create app, if you still haven't done so:

Give it a name, choose location you prefer, then scroll down and choose GitHub and Repo with your bot:

I also recommend checking auto-deploy, so when you upload new changes to your repo, it will deploy them automatically

🎉 Nice, you completed step one 🎉

Easy, but...

Okay, your bot will work for a while, or maybe not... You may see errors over there:

Let's go straight through the problems you will face

Can't get '/' : `code=H10 desc="App crashed"` and `Can not get '/'` and `Can not get 'favicon.ico'`

This error happens, because Heroku don't know, that you're deploying a bot, Heroku thinks, that you want to make a web-page.
To awoid Can not get '/', simply add express (or any other server-app) to your App.js or App.ts like this:

(Yes, I use TypeScript, no worries, you can do this with JS 🙂)

import express = require('express')

// ===Your bot logic here 

// Start app for Heroku
const app = express()
app.use(express.static('public'))
app.get('/', function (req, res) {
  res.send(
    "<h1>Hello There! You found <a href='https://t.me/wishbasket_bot'>@WishBasket_bot</a> backend</h1>"
  )
})

// Start server
app.listen(process.env.PORT || 3000, () => console.log('Server is running...'))

⚠ Use process.env.PORT || 3000, because Heroku uses it's own PORT, which will be taken from it's environment ⚠

Congratulations, you have successfully avoided first error 🎉

Heroku started idling

Everything were good, but after 30 minutes heroku turned my bot off, it is not responding to any commands 💢

Chill, will fix it in a minute 🍦

Consider looking here before avoiding this, you must know limitations

Quick answer: add your bot express url (mine was - https://wishbasket-bot.herokuapp.com/, click Open App on Heroku Dashboard) to kaffeine.heroku, remember to setup badtime (time format is GTM!) It will ping your online page every 30 minutes, so your bot will never fall asleep ☕

Long answer(s): well, better read answers here. You can use this NewRelic extension, but I personally recommend you using caffeine, because if you want to add extensions on Heroku, you must enter your credit card (which I could not do, although the data is correct, thanks Heroku 🤦‍♂️)

Congratulations on your bypassing restrictions 🍾

Bonus. How to add secrets?

Well, I personally used MongoDB Cluster to manage database, I had special link with login and password to my database, hidden in .env.local file, and used .dotenv to use this file (never publish such a thing to the internet!)

So, I nedded to use this link in my bot, but it wasn't in my repo, what should I do?

Easy, watch me

Open your app setting:

Scroll to config vars:

Add your variable, it should have same name, as inside your app:

Thanks for reading 💛

Neo Button

Daniil Pankov — Wed, 18 Aug 2021 06:54:07 +0000

Language Switcher HTML+CSS

Daniil Pankov — Sat, 14 Aug 2021 14:41:42 +0000

Switch language of your web-site only with HTML and CSS, using display: none or display: block, easy-peasy :)