DEV Community: Nikolay Tsanov

Nested Request Throttling in Laravel

Nikolay Tsanov — Wed, 06 Jan 2021 09:13:39 +0000

Let me set the stage first: You have a globally assigned throttle middleware on a specific route group or maybe even assigned directly inside the RouteServiceProvider on all routes from a specific file. Then, you try to assign (nest) the throttle middleware inside that group onto a specific route expecting that the global throttle values will be overwritten by the nested values just to be surprised that the route gets locked after fewer requests than specified (more specifically, in the case of a single nested throttle middleware - two times fewer requests than expected).

I found myself in this scenario and after giving some thought it does make sense - the middleware is called twice so two hits rather than one. (The X-RateLimit-Remaining header gets decremented by two rather than one) However, how can we overcome this obstacle?

We can remove the global throttle middleware and just apply it on all routes we need it. (Quite a bit of repeating indeed)
Perhaps, we can extend the default throttle middleware and implement some kind of an identifier that we’ll use to differentiate the throttles.

Luckily, Laravel already has a solution for us! It uses the second approach to prefix the various throttles so that we can use them independently. Unfortunately, the documentation doesn’t mention this, however, it is pretty straightforward.

// User can send 1000 requests of any kind in an hour.
Route::prefix('image')->middleware('auth', 'throttle:1000,60')->group(function() {
    // User can download 10 times a minute.
    Route::post('/download', 'ImageController@download')->middleware('throttle:10,1,minute_download');
    // User can search 100 times an hour
    Route::get('/search', 'ImageController@search')->middleware('throttle:100,60,search');
    // Use default throttle, user can send 1000 images in an hour.
    Route::get('/send', 'ImageController@send');
});

The route group above wraps three routes inside the auth and throttle middlewares. These two middlewares can be considered as global to the routes within that group. Depending on the scenario, we might consider applying different throttle values for some of the routes in the group. This is the case with the /download and /search routes - we want to have a lower request limit for them (in the current case). We achieve this by passing a third argument to the throttle middleware. This is the prefix value that will be used to differentiate them - throttle:max_requests,period,prefix.

This feature has been introduced in Laravel 6.0. For any previous versions, you need to extend the default throttle and implement your own solution.

Originally posted on https://ntsanov.com/blog/nested-request-throttling-in-laravel

PhpStorm, But Better! #2 - Making It Look Pretty

Nikolay Tsanov — Wed, 29 Jul 2020 21:00:00 +0000

This is an archive of the second email from the series - “PhpStorm, But Better!”. In the emails, I’m sharing thoughts, news and more about PhpStorm, so make sure you’re not missing anything by signing up for the newsletter!

Today, we’ll explore one of the most interesting topics for me - making the IDE look good. As I mentioned in the last email, having a good theme and font is essential. You’ll be staring many hours at that exact screen, so you need to take your time and make it look appealing. However, it’s not only for you to look fancy in front of colleagues, but you also need a theme that will suit your environment and a font that is easy to read. For example, if you are in a bright environment, you need a light theme that will help you relax your eyes. If you are working late and it’s dark, you might prefer a dark theme. When switching from dark to light, or the other way around, it takes some getting used to, however, always consider it as a fresh start which might even motivate you to write more code!

Note: This is a controversial topic, all of the information given here is just suggestions that you might or might not follow. Everything is up to you!

Topic I - Aestetics

~~Removing the Panels and Floating Tools~~
~~Moving The Sidebar (Projects Explorer)~~
Picking Up A Theme
Picking Up Font
Better Icons

Picking Up A Theme

We’ll start with deciding on a theme. I’ll first give you few suggestions for a light theme and the reasons behind using one. Then, the same procedure for a dark theme. Lastly, I’ll finish off with a suggestion for a theme that is in between dark and light.

Light Theme

Now, leaving jokes aside, there are many benefits for using a light theme and there are some misunderstandings about it. You can check Brent Roose’s video on this topic. He explains the difference between contrast and brightness, colours, visual patterns and much more. I’ll summerise some of the information related to the themes.

Many people prefer dark themes invoking the reason that light themes hurt their eyes. However, this is simply not true. Brightness is what hurts your eyes, not the contrast of the theme. Many studies have shown that having dark text on a light background is much easier to read than having the opposite (especially for prolonged periods).

Introducing to you, Photon colour scheme for PhpStorm by none other than Brent himself. It is a high contrast scheme based on the colour palette of Firefox’s dev tools.

Photon

The easiest way to import the colour scheme is by opening your preferences dialog ( macOS: PhpStorm > Preferences… or Windows, Linux: File > Settings ), then Editor > Color Scheme > Import Scheme….

If you prefer to do all of this manually, download the .icls files from the repository and place them inside your PhpStorm preferences directory. The location depends on the OS and the version of PhpStorm. You can check more on their website. For version 2020.1 and above (I assume you are on the latest one), you can do this (where <product> is PhpStorm):

Windows: %APPDATA%\JetBrains\<product><version>
macOS: ~/Library/Application Support/JetBrains/<product><version>
Linux: ~/.config/JetBrains/<product><version>

Inside the directory, you’ll need to place your .icls files in the /colors folder (if you don’t have it, just create it).

Then, restart PhpStorm, open your preferences dialog ( macOS: PhpStorm > Preferences… or Windows, Linux: File > Settings ), from there Editor > Color Scheme and select the Photon - Light scheme.

If you are switching from a dark scheme to a light one, or the other way around, PhpStorm will ask whether you want the theme to also be changed.

Now, there is a difference between a scheme and a theme in PhpStorm. This is intuitive, however, I’ll still mention it. The scheme is considered to be the syntax highlighting, while the theme is simply the colour of the dialogs, panels etc. So it goes without saying, having them match is better looking than having a huge contrast, though, you are free to experiment!

If you are not a fan of the colours of the previous colour scheme, you can check Light Lite. I often find myself switching between those two. Light Lite is again made by Brent and it’s based on the colours of Google’s logo. You might have seen it already on some of Freek’s streams or his feed when posting a screenshot of a snippet.

Light Lite

Dark Theme

If you are still not convinced about trying a light theme, I got you! I do use dark themes as well, especially when I’m working late on a dim light. I find it easier to write code on a dark background when it’s dark around me (personal preference). I won’t be talking too much about the popular Material Theme UI that probably you’ve seen more than once. If you want to find more on how to set it up, I advise you to check Christoph’s video on it. My go-to dark theme, at the moment of writing, is Dracula + Material Theme UI.

Just download the plugin and restart PhpStorm. After the restart, the plugin will be enabled, then you can do the trick I’ve shown you last time - Navigate > Search Everywhere > type “dracula” and toggle it.

Something In Between (Kinda)

Material Solarized Light

If you don’t want a dark theme, but you also find the light themes a bit too light, then this material theme + solarized light colour scheme is just for you.

If you followed the steps from above and you already have the Material Theme UI enabled, then you are pretty much set. Just search for “solarized light” in the “Search everywhere…“ dialog and toggle it.

Picking Up Font

Picking up font is the second most important thing after getting a nice theme on. I’ll stick to the free fonts since not everyone is willing to pay for a premium and I’m one of those people - I easily get bored with fonts, and I tend to switch them from time to time. Paying any amount of money for a font that I might change in a month is not ideal.

Now, with the pricing out of the way, legibility is the most important thing! There was a trend recently where using a font with italic styling was the mainstream, and yes, while it looks nice, there is a reason why monospace fonts are better for programmers. The programmer needs to easily distinguish each letter - one extra symbol can break everything. You’ll probably know the fonts that I’ll mention, but that goes without saying that they are top in this niche.

Fira Code (Retina) - Yes, you’ve probably seen it countless times and you might be even bored from it, however, this front stands out for its premium look which you get for free! Just head to the repository and try it out!

Jetbrains Mono - This font is my second top pick. It’s clean, it stands out and it is a really good alternative to Fira Code.

As you can see, the difference is almost unnoticeable, but trust me you’ll see it! To set up the font, go to the PhpStorm’s preferences > Editor > Font. I like having enough space between the lines, so I always go for something higher such as 2.0. On my screen, 14px font size looks perfect, so I’m keeping it like that. You can play around and see what suits you the best!

Some people love font ligatures, some don’t. That’s up to you again! You can enable them with selecting the “Enable font ligatures” checkbox. You’ll get these nice-looking symbols for !=, ==, === etc. Setting up a fallback font is also a good practice, however, if you are using Fira Code, pretty much everything is supported.

Better Icons

We’ll need to show some love to the sidebar. Even if you are not using it that much, you’ll still have to toggle it at one point. The default icons are a bit too bland for my taste.

Sidebar Before ‘Better Icons’

Sidebar After ‘Better Icons’

To achieve this, head to the plugins’ marketplace and get the Atom Material Icons. Install it (just like you did with the Material UI plugin), enable it, and everything will be set for you out of the box.

Now, we are pretty much done with our layout. We’ve organized the panels, we’ve picked up a theme and font, and we also have nice looking icons! However, as mentioned by Jorge González on Twitter, after reorganizing the various aspects of the layout (especially placing the sidebar on the right), we need to store it as default, otherwise, when creating a new project your panels might look out of place. To do that, simply select Window > Store Current Layout as Default or Navigate > Search Everywhere > type “store current layout as default”.

News

PhpStorm 2020.2 has been released! Check out more on their website.
Alex Vanderbist added a nice live template for quickly writing PHP arrow functions. Check out the gist he posted (we’ll be exploring live templates later in the series).

Thank you once more for the great feedback!

If you want to contribute to the newsletter, don’t hesitate to contact me either on Twitter or via email!

Next time, we’ll explore plugins for PhpStorm that will make a huge difference in your daily workflow and more!

Getting Rid Of The Distractions

PhpStorm, But Better! #1 - Getting Rid Of The Distractions

Nikolay Tsanov — Thu, 09 Jul 2020 21:00:00 +0000

This is an archive of the first email from the series - “PhpStorm, But Better!”. In the emails, I’m sharing thoughts, news and more about PhpStorm, so make sure you’re not missing anything by signing up for the newsletter! Also, I'll be mainly posting on my website so check that up as well!

I plan to help you improve your PhpStorm workflow by synthesizing useful resources, news, plugins and much more. Over time, your use of the IDE will drastically change and your performance will be significantly improved.

Before I start, I want to present you with a few principles that I enforce when working with the IDE (If you follow Caleb’s amazing newsletter about working with VS Code (www.makevscodeawesome.com), you might be aware of some of them):

Fewer distractions on the screen, more productive workflow.
The theme and font are important! (I cannot stress this enough! You’re going to be staring at the IDE for hours, you must make it easy on your eyes and brain!)Shortcodes, shortcodes and more shortcodes! (If you can automate some actions, you should do it. There are many services that we, as developers, use that automate tedious tasks, we should do the same for our IDE).
Don’t rely on your IDE blindly! (You’ll find out what I mean at a later point).

These are the core principles I follow when working with a specific IDE. If you don’t agree with them, that is perfectly fine! Consider this newsletter as an alternative point of view that might be helpful to you as well! The good thing about it, you can apply most of the information here to other JetBrains’s products - Intellij IDEA, WebStorm, PyCharm and more (you can find a list of their products on their website). The beauty of the JetBrain’s ecosystem is that their products are consistent, most of the settings are shared between them, so you can easily find your way. I’m not sponsored to say all of this, just my opinion!

For students and teachers, you can get access to PhpStorm for free! More information can be found on JetBrains’ website - or a simple Google search will do the trick as well. However, the purpose of these free licenses is for education only. If you are planning on using it on a commercial project, you’ll have to purchase an individual license.

Side note, I cannot express how thankful I am to the amazing PHP community! I’ll try to be as much transparent as possible about the newsletter by sharing statistics that might be helpful for those of you that want to start something similar. You can follow me on Twitter (@NikolayTsanov) for more of the insights.

Without further ado let’s start with the first topic of the newsletter - getting rid of the distractions and styling your IDE (not only for you to look cool in front of your colleagues, but also important for your productivity).

Note: for windows users, some of the shortcodes that I’ll reference might be a bit different - when I mention the Cmd key, you need to replace it with Ctrl. (More on the keymaps between PC and macOS can be found on the Microsoft’s website).

Topic I - Aestetics

Removing the Panels and Floating Tools
Moving the Sidebar (Projects Explorer)
Picking up a Theme (determine the best theme based on your surrounding)
Picking up a Font (determine the best font for readability)
Better Icons

Removing the Panels and Floating Tools

As I mentioned a few times already, panels are distractions. Hiding them will be more beneficial to you. If you need them, you can always toggle or assign a shortcode for easy access. In PhpStorm, there are plenty of them, most of which you’ll probably never use. This is what you’ll most probably have at the beginning:

As you can see, your attention is “hijacked” by the information spilt on your screen. We’ll start off by removing the bars (Navigation Bar and Status Bar). Easiest way to do so is by going View > Appearance > Status Bar. All of these options are available by also doing Navigate > Search Everywhere > type “status bar” > Show Status Bar (to off).

Great! Now that we have the Status Bar removed, we can also get rid of the Tool Window Bars ( View > Appearance > Tool Window Bar or Navigate > Search Everywhere > type “tool window bar” > Hide Tool Window Bar (to on)).

It already looks way better than before. However, there are still two panels left. By doing View > Appearance > Navigation Bar or Navigate > Search Everywhere > type “navigation bar” > Show Navigation Bar (to off) we get rid of a huge portion of the taken space.

Then, we are left with the floating browsers. Let’s be honest, probably nobody uses them that often.

They can be removed simply by going to the PhpStorm’s settings and deselecting them. PhpStorm > Preferences > Tools > Web Browsers , alternatively File > Settings > Tools > Web Browsers (on Windows and Linux).

We finally end up with a clean and distraction-free IDE.

Although, there is still a bit more left. On the bottom part of the window you can see the breadcrumbs. They are considered helpful by many, however, I personally never look at them (so I tend to hide them). It is your decision to make, to hide them you can just do Navigate > Search Everywhere > type “breadcrumbs” > Show Breadcrumbs (to off) or PhpStorm > Preferences > Editor > General > Breadcrumbs > Show breadcrumbs (on macOS), alternatively File > Settings > Editor > General > Breadcrumbs > Show breadcrumbs (on Windows and Linux). In the settings, you can see that you have the option where to place them (top or bottom) and for which languages to show them. Completely up to you!

Now you might ask yourself, “Why didn’t he hide the tabs?”. I enjoy using the tabs, there are some tricks that we’ll explore later in the series on how to limit the number of them and how to easily switch left and right using the keyboard. When working on multiple files, I find myself switching often between them (even with split screen). Using less brainpower to remember which file I have to search and switch to every time I’m working is something that I enjoy and you’ll probably notice it as well in the long run.

Moving the Sidebar (Tool Window or “Project” Explorer)

If you are like me, you’re probably toggling the sidebar from time to time. You probably have a shortcode (keymap) that you use all the time (we’ll explore this at a later point). What happens when the sidebar is on the left is that it pushes the code every single time you make it visible or hide it. Ideally, you won’t need it that often, however, for the times that you actually need it, I prefer to have it on the right side. It is pretty straightforward, ⚙ (Gear Icon) > Move To > Right Top.

Then, your IDE starts getting in shape. However, still long way to go! In the next email, we’ll explore themes (why you should pick up based on your surrounding), fonts and more!

Next Time

I want to keep the reading time relatively small. So some of the topics that I’ll cover will be split into multiple parts. Next time, I’ll cover:

Picking up a Theme (determine the best theme based on your surrounding)
Picking up a Font (determine the best font for readability)
Better Icons

And we’ll slowly start getting into more complex material (PSR-12, shortcodes, settings and more).

More Useful Materials

Christoph Rumpel has nicely illustrated some of the concepts that I’ve covered in this email. Make sure to check him out!
If you want to find more on how to set up PhpStorm with Xdebug & Docker, you can find Derick Rethans’s walkthrough interesting. Derick is also the creator of Xdebug, so he’s the best person you can find for the job.
For the people using Laravel’s Homestead, Daniel Verner’s post on this topic will be of a good use!
PhpStorm is known to have some performance issues. Project Lanai is a joint effort between JetBrains and Oracle that looks to solve this. Check Alex Vanderbist’s (member of Spatie) post on this topic.

You can also be on the list! Make sure you contact me with a link to your work related to PhpStorm. If I find it useful, it will be included in the next email!

News (Things That You Might Have Missed)

PhpStorm 2020.1.3 has been released! Mainly bug fixes - make sure you check out the changelog.
Support for Psalm is coming soon (probably 2020.3).
PhpStorm 2020.2 will introduce many cool stuff including PHP 8 Union Types support. Read more on their blog!

I’m really excited to hear what you think about the newsletter. Make sure you drop me a line on Twitter! I really appreciate spreading the word about this and I’m welcoming all suggestions!

PhpStorm, But Better! - Tips & Tricks Newsletter

Nikolay Tsanov — Sat, 04 Jul 2020 14:39:42 +0000

There is a plethora of tips and tricks about PhpStorm that are unknown out there. People tend to set it up once and leave it as it is. Which is good, however, from time to time new features, new plugins or new settings come out and people are just unaware of them, even though they can increase productivity or improve the overall workflow.

The purpose of this newsletter is to inform you about:

New features coming to PhpStorm
Useful shortcodes, plugins or other neat tricks
Links to resources (blogs, tweets etc.) from the great community that uses PhpStorm
How to make PhpStorm look better
Many more!!!

Anyone, that it is interested in receiving such updates from time to time is welcomed to join by going to http://phpstormbutbetter.com/.

When will I receive the first email?

The first email (containing information about setting up PhpStorm, the importance of picking up a theme based on your surrounding and more) will be sent very soon.

Can I be part of the newsletter?

You are more than welcomed to send your posts, tweets or other information related to PhpStorm that you want to see on the newsletter. More information can be found on the website.

Can I partner up with you?

I'm opened to anyone who wants to help the newsletter grow. You can contact me on Twitter (@NikolayTsanov - https://twitter.com/NikolayTsanov)

Check out an archive of the first email from the series!

The Importance of the Meta Theme Color (HTML Tricks #1)

Nikolay Tsanov — Wed, 20 May 2020 14:24:25 +0000

You have probably noticed that on some popular website when visited on mobile, the menu bar in Chrome magically changes its colour to match the primary colour of the page.

The Guardian’s Website

There is no magic in that. This can easily be achieved by using only one line of code inserted directly into the <head> tag of your page. This will suggest to the browser to use this colour rather than the default one.

<meta name="theme-color" content="#ffffff">

Other popular websites using this:

This one line can go a long way in helping your clients notice you and your website. It simply looks more professional and you appear to have spent more time on your design. Support for this feature has been introduced in version 39 of Chrome for Android on Lollipop.

Integrate Google Tag Manager with an existing cookie consent form

Nikolay Tsanov — Mon, 04 May 2020 21:00:00 +0000

Sometimes, Google Tag Manager can be overwhelming. I do like it when it works, but it requires a lot of tinkering before getting the wanted results. Before I start, I must say that I am not an expert in any way with Google Tag Manager, the suggested approach below is just an example of how one can go about solving an issue we experienced working on a project that used VueJS to present the user with a cookie consent banner. We had to provide the user with the option to opt-out or opt-in from certain groups. The “statistics” group included Google Analytics. There might be a prettier solution, however, most of the articles out there only cover scenarios where the website already uses a service such as Cookiebot, OneTrust or other alternatives.

Photo by Luke Chesser on Unsplash

Getting started with Google Tag Manager and Google Analytics

Firstly, we need to set up Google Tag Manager into our existing project and import Google Analytics. Bear in mind, it is really important to remove any previous code related to tracking before adding GTM (I will talk about this later). We will start by adding a new account to Google Tag Manager. For account name, you can choose the name of your project, the name of the company you are working for or anything else you like. Make sure to keep it consistent, soon you might end up with a dozen of projects!

Setup account’s information

The account will be the main holder for the containers. A container is simply a bundle of scripts that will execute following some criteria. An example of having multiple containers for one account is if you want to split the various scripts that will run on the main domain and the subdomain. Therefore, you will setup a container for example.com and staging.example.com . We will also pick Web as a targeted platform. Everything here can be changed later on!

Setup a container for the current account

After you are done setting up everything, you will be prompted with code snippets that you can directly import into your project.

Note: You do not need the second code snippet if you are not planning on supporting older browser.

However, I prefer using a dedicated package that will act as a wrapper around Google Tag Manager. The package will provide one more level of abstraction. Since the project uses VueJS heavily, I came across this lightweight package https://github.com/mib200/vue-gtm that also automatically loads the GTM script. There are also some additional configuration that you can do, such as enable or disable it based on a condition and more!

npm install vue-gtm --save

and then import it in your main script, in my case app.js

import VueGtm from 'vue-gtm';

Vue.use(VueGtm, {
    id: 'GTM-P42GL2L'
});

Now, we want to make sure that we only load GTM and nothing else! This is really important, we do not want to track the same thing twice! A neat way to check for this is by using the Tag Assistant extension, available only on Chrome.

Now, navigate to the url of your site and enable the extension (you will probably need to reload when you enable it). You should be displayed with only one tag that has been fired.

However, you might also end up with a “HTTP response code indicates tag failed to fire: Status 404. This could be due to an empty or un-published container”.

The warning is pretty self-explanatory, make sure you publish your container or preview it. Both will work. Make sure your container if published for production!

Now that we have everything up and running, we can add our Google Analytics Tracking ID to GTM (I assume you already have such, it should be in the format UA-XXXXXXXXX–X). To add a script to your site you need to add a tag in Google Tag Manager. Your tag’s configuration should looks as follows:

For a tag to be fired (a script to be loaded) on your website, you need to set up a trigger for it. The trigger that we are going to set will read a value from a cookie and based on that fire the tag. Therefore, if the tag is not fired then the user would not get GA cookies set in the browser. We want to fire the tag on all pages so we will select “Page View” as a trigger. But, we also want to restrict this by checking whether we are allowed to fire the tag or not. This can be done by selecting the “Some Page Views” option and adding a new variable or choosing from the existing ones.

In our case, we would want to make a custom variable that holds the consent value. Now, there are few options that we can pick. The first one is to make a new variable of type “Custom Javascript” and have some code inside that reads from the document.cookie . While this is a realistic approach, it requires placing logic inside GTM, which I am not fan of. A better approach, in my opinion, is to read from a global javascript variable. As far as I know, most of the popular cookie consent services use a similar approach. This global variable can be controlled from the website.

Then, our Page View Trigger should fire only when the user consented to statistics.

We are pretty much done. Now, we only need to add the trigger to the tag we made. On the website, you can present the user with a custom banner, popup or anything else you want. When the user agrees or declines, you can set a cookie which will keep track of the consent. This cookie can be used to set the global variable (every time the page reloads). The good thing now is that GTM does not rely on a cookie, but rather on a global variable that can be set in various ways: local storage, cookies etc.

Conclusion

The amazing part of Google Tag Manager is that it is highly customizable. There are various ways of implementing a GDPR form with it. To finish of, here is a list of great resources where you can explore more about GDPR and GTM:

Analytics Mania https://www.analyticsmania.com/post/gdpr-cookie-consent-notification-with-google-tag-manager/
Sebastian Wismayer https://sebastianwismayer.com/blog/step-by-step-visual-guide-to-gdpr-conform-cookie-consent/
Simo Ahava has an amazing blog dedicated to GTM tips & tricks. I highly recommend checking him out at https://www.simoahava.com/categories/gtm-tips/

Thank you for reading this article! Hope you found it interesting and helpful. You can find me on Twitter (@NikolayTsanov).