{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Pawe\u0142 Kowalski","description":"The latest articles on DEV Community by Pawe\u0142 Kowalski (@pavelloz).","link":"https:\/\/dev.to\/pavelloz","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F51061%2Fc37084eb-e6b7-479b-8779-10e8af07b8cc.jpg","title":"DEV Community: Pawe\u0142 Kowalski","link":"https:\/\/dev.to\/pavelloz"},"language":"en","item":[{"title":"Background images in TailwindCSS - the clean and easy way","pubDate":"Thu, 14 Oct 2021 12:12:26 +0000","link":"https:\/\/dev.to\/platformos\/background-images-in-tailwindcss-the-clean-and-easy-way-gho","guid":"https:\/\/dev.to\/platformos\/background-images-in-tailwindcss-the-clean-and-easy-way-gho","description":"

My biggest issue with TailwindCSS was the ugly way of using background images with it. I had to inline background-url<\/code> property and it was not clean. And I know I was not alone, because other frontend developers said the same thing. It looked similar to this:
\n<\/p>\n\n

\n
<<\/span>section<\/span> class<\/span>=<\/span>\"bg-accent-dark bg-cover\"<\/span>\n  style<\/span>=<\/span>\"background-image: url({{ 'images\/home\/hero.jpg' | asset_url }})\"<\/span>><\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n
Note: We use liquid to generate url to an image placed on CDN. <\/p>\n\n
Couple days ago, when I was doing six different themes in TailwindCSS using six different configs (I will report my findings in another article) I discovered that it can be simplified. Because CSS file is also on CDN, and the background-image can be customized in TailwindCSS config (read more<\/a>), it can be replaced with simple bg-hero<\/code> after adding its definition into theme extend section:
\n<\/p>\n
\n
backgroundImage<\/span>:<\/span> {<\/span>\n  '<\/span>hero<\/span>'<\/span>:<\/span> \"<\/span>url('..\/images\/home\/hero.jpg')<\/span>\"<\/span>\n}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n
Now, our hero element HTML looks like this:
\n<\/p>\n
\n
<<\/span>section<\/span> class<\/span>=<\/span>\"bg-accent-dark bg-cover bg-hero\"<\/span>><\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n
And I think its much cleaner! Reading documentation paid off :)<\/p>\n
\n  \n  \n  Read more\n<\/h2>\n\n
If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website. <\/p>\n\n\n
\n  \n    
\n      \"platformOS\"\n      
\n        \"\"\n      <\/div>\n    <\/div>\n  <\/a>\n  \n    
\n      
Using WebP in Your Existing Webpage<\/h2>\n      
Pawe\u0142 Kowalski for platformOS \u30fb Nov 17 '20<\/h3>\n      
\n        #webperf<\/span>\n        #design<\/span>\n      <\/div>\n    <\/div>\n  <\/a>\n<\/div>\n\n\n\n\n
\n  \n    
\n      \"platformOS\"\n      
\n        \"\"\n      <\/div>\n    <\/div>\n  <\/a>\n  \n    
\n      
Optimizing Images For The Web<\/h2>\n      
Pawe\u0142 Kowalski for platformOS \u30fb Apr 24 '20<\/h3>\n      
\n        #beginners<\/span>\n        #node<\/span>\n      <\/div>\n    <\/div>\n  <\/a>\n<\/div>\n\n\n\n
\n  \n    
\n      \"platformOS\"\n      
\n        \"\"\n      <\/div>\n    <\/div>\n  <\/a>\n  \n    
\n      
3 Tips on Preserving Website Speed<\/h2>\n      
Pawe\u0142 Kowalski for platformOS \u30fb Jun 24 '20<\/h3>\n      
\n        #webperf<\/span>\n        #webpack<\/span>\n        #javascript<\/span>\n        #css<\/span>\n      <\/div>\n    <\/div>\n  <\/a>\n<\/div>\n \n\n","category":["tailwindcss","css","beginners"]},{"title":"We Are Switching From TestCafe to CodeceptJS \u2013 Here\u2019s Why","pubDate":"Tue, 28 Sep 2021 08:02:24 +0000","link":"https:\/\/dev.to\/platformos\/we-are-switching-from-testcafe-to-codeceptjs-here-s-why-39ml","guid":"https:\/\/dev.to\/platformos\/we-are-switching-from-testcafe-to-codeceptjs-here-s-why-39ml","description":"
We have been using and promoting TestCafe at platformOS for the past couple of years with great success. Because a lot of people will write tests and maintain them over a long time, an End-to-End framework has to come with some specific requirements:<\/p>\n\n
    \n
  1. Easy to remember and type out API<\/li>\n
  2. Good waiting mechanisms (for XHR requests, animations)<\/li>\n
  3. Extendibility, page object support, helpers support<\/li>\n
  4. Good search in documentation to quickly reference less used APIs<\/li>\n
  5. Run properly in Docker and\/or GitHub Actions<\/li>\n<\/ol>\n\n
    TestCafe is scoring high on the above areas, I would say averaging around 7.5\/10, which means there is still room for improvement.<\/p>\n\n
    Even though we have been happy with TestCafe, last year when I stumbled upon a new contender, CodeceptJS, I decided to give it a shot on our\u00a0documentation<\/a> and marketing<\/a> sites. It delivered excellent developer performance. It was enough to dive deeper into its documentation and expand our test suites to include some more test cases.<\/p>\n\n
    \n  \n  \n  1. Test API\n<\/h2>\n\n
    Very often when writing TestCafe tests, we had to resort to vanilla JS and DOM operations. One of the most frustrating examples was to get some text from an element and then compare it to another. It was too much work and I never could see a reason why TestCafe had no API for that. CodeceptJS has a lot more API helpers to avoid these complications and diverging into vanilla JS. Below, I give you some examples of TestCafe scenarios converted to CodeceptJS ones.<\/p>\n\n
    \n  \n  \n  Checking if correct breadcrumbs links are present on a page\n<\/h3>\n\n\n\n
    \n
    \/\/ TestCafe<\/span>\ntest<\/span>(<\/span>'<\/span>Breadcrumbs are showing up<\/span>'<\/span>,<\/span> async<\/span> t<\/span> =><\/span> {<\/span>\n  await<\/span> t<\/span>.<\/span>navigateTo<\/span>(<\/span>'<\/span>\/api-reference\/liquid\/introduction<\/span>'<\/span>);<\/span>\n\n  await<\/span> t<\/span>.<\/span>expect<\/span>(<\/span>Selector<\/span>(<\/span>'<\/span>.breadcrumbs a<\/span>'<\/span>).<\/span>withText<\/span>(<\/span>'<\/span>Documentation<\/span>'<\/span>).<\/span>exists<\/span>).<\/span>ok<\/span>();<\/span>\n  await<\/span> t<\/span>.<\/span>expect<\/span>(<\/span>Selector<\/span>(<\/span>'<\/span>.breadcrumbs a<\/span>'<\/span>).<\/span>withText<\/span>(<\/span>'<\/span>API Reference<\/span>'<\/span>).<\/span>exists<\/span>).<\/span>ok<\/span>();<\/span>\n  await<\/span> t<\/span>.<\/span>expect<\/span>(<\/span>Selector<\/span>(<\/span>'<\/span>.breadcrumbs a<\/span>'<\/span>).<\/span>withText<\/span>(<\/span>'<\/span>Introduction<\/span>'<\/span>).<\/span>exists<\/span>).<\/span>ok<\/span>();<\/span>\n});<\/span>\n\n\/\/ CodeceptJS<\/span>\nScenario<\/span>(<\/span>'<\/span>Are showing up<\/span>'<\/span>,<\/span> ({<\/span> I<\/span> })<\/span> =><\/span> {<\/span>\n  I<\/span>.<\/span>amOnPage<\/span>(<\/span>'<\/span>\/api-reference\/liquid\/introduction<\/span>'<\/span>);<\/span>\n\n  I<\/span>.<\/span>see<\/span>(<\/span>'<\/span>Documentation<\/span>'<\/span>,<\/span> '<\/span>.breadcrumbs<\/span>'<\/span>);<\/span>\n  I<\/span>.<\/span>see<\/span>(<\/span>'<\/span>API Reference<\/span>'<\/span>,<\/span> '<\/span>.breadcrumbs<\/span>'<\/span>);<\/span>\n  I<\/span>.<\/span>see<\/span>(<\/span>'<\/span>Introduction<\/span>'<\/span>,<\/span> '<\/span>.breadcrumbs<\/span>'<\/span>);<\/span>\n});<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n
    \n
    \n  \n  \n  If this is interesting to you read rest of this article on our blog<\/a>.\n<\/h4>\n<\/blockquote>\n
    \n  \n  \n  Read more\n<\/h2>\n\n
    If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website. <\/p>\n\n\n
    \n  \n    
    \n      \"platformOS\"\n      
    \n        \"\"\n      <\/div>\n    <\/div>\n  <\/a>\n  \n    
    \n      
    platformOS Documentation Site Webpack Setup<\/h2>\n      
    Pawe\u0142 Kowalski for platformOS \u30fb Dec 4 '20 \u30fb 6 min read<\/h3>\n      
    \n        #webperf<\/span>\n        #webpack<\/span>\n        #platformos<\/span>\n      <\/div>\n    <\/div>\n  <\/a>\n<\/div>\n\n\n\n\n
    \n  \n    
    \n      \"platformOS\"\n      
    \n        \"\"\n      <\/div>\n    <\/div>\n  <\/a>\n  \n    
    \n      
    3 Performance Tips for Your Next Project<\/h2>\n      
    Pawe\u0142 Kowalski for platformOS \u30fb Jun 29 '20 \u30fb 4 min read<\/h3>\n      
    \n        #webperf<\/span>\n        #javascript<\/span>\n        #css<\/span>\n      <\/div>\n    <\/div>\n  <\/a>\n<\/div>\n\n\n\n
    \n  \n    
    \n      \"platformOS\"\n      
    \n        \"\"\n      <\/div>\n    <\/div>\n  <\/a>\n  \n    
    \n      
    Should You Always Care about Your Website Size?<\/h2>\n      
    Pawe\u0142 Kowalski for platformOS \u30fb Nov 12 '20 \u30fb 4 min read<\/h3>\n      
    \n        #webperf<\/span>\n        #webdev<\/span>\n        #beginners<\/span>\n      <\/div>\n    <\/div>\n  <\/a>\n<\/div>\n \n\n","category":["javascript","testing"]},{"title":"How We sped Up Our Webpack (TailwindCSS) 7 times!","pubDate":"Wed, 07 Apr 2021 17:20:31 +0000","link":"https:\/\/dev.to\/platformos\/how-we-sped-up-our-webpack-tailwindcss-7-times-1c05","guid":"https:\/\/dev.to\/platformos\/how-we-sped-up-our-webpack-tailwindcss-7-times-1c05","description":"
    In the last article about build speed optimization, we described how we went from 64 seconds to 17 seconds on our Webpack build (measured on GithubActions, a pretty slow environment CPU-wise). Just as we did it and managed to write an article about it to share the knowledge, something amazing happened: TailwindCSS\/JIT.<\/p>\n\n
    JIT (short from Just In Time) for TailwindCSS is a much more performant way of generating the TailwindCSS output file. Instead of generating a big (sometimes 10MB+) CSS file and then using PurgeCSS to remove unnecessary classes, it only generates what is needed in the first place. This makes PurgeCSS and many other speed optimization techniques in TailwindCSS unnecessary. It is very fast no matter what config you use, and the output file size is still optimal.<\/p>\n\n
    We jumped into experimenting with JIT as soon as it got a beta release, so there were some bugs, but now we consider it good enough for production, hence this article.<\/p>\n\n
    \n
    Result: Webpack build took 8.9<\/strong> seconds (down from 17)<\/p>\n<\/blockquote>\n\n
    As a nice side-effect of using JIT, our TailwindCSS config became much smaller because we don't need to disable modules, override theme colors, spacing, etc. Now everything is taken care of by JIT during runtime. It is so fast that development became a breeze.<\/p>\n\n
    Read more on JIT in the official TailwindCSS documentation<\/a><\/p>\n\n
    \n  \n  \n  Read more\n<\/h2>\n\n
    If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website. <\/p>\n\n\n
    \n  \n    
    \n      \"platformOS\"\n      
    \n        \"\"\n      <\/div>\n    <\/div>\n  <\/a>\n  \n    
    \n      
    platformOS Documentation Site Webpack Setup<\/h2>\n      
    Pawe\u0142 Kowalski for platformOS \u30fb Dec 4 '20 \u30fb 6 min read<\/h3>\n      
    \n        #webperf<\/span>\n        #webpack<\/span>\n        #platformos<\/span>\n      <\/div>\n    <\/div>\n  <\/a>\n<\/div>\n\n\n\n
    \n  \n    
    \n      \"platformOS\"\n      
    \n        \"\"\n      <\/div>\n    <\/div>\n  <\/a>\n  \n    
    \n      
    3 Performance Tips for Your Next Project<\/h2>\n      
    Pawe\u0142 Kowalski for platformOS \u30fb Jun 29 '20 \u30fb 4 min read<\/h3>\n      
    \n        #webperf<\/span>\n        #javascript<\/span>\n        #css<\/span>\n      <\/div>\n    <\/div>\n  <\/a>\n<\/div>\n\n\n\n
    \n  \n    
    \n      \"platformOS\"\n      
    \n        \"\"\n      <\/div>\n    <\/div>\n  <\/a>\n  \n    
    \n      
    Should You Always Care about Your Website Size?<\/h2>\n      
    Pawe\u0142 Kowalski for platformOS \u30fb Nov 12 '20 \u30fb 4 min read<\/h3>\n      
    \n        #webperf<\/span>\n        #webdev<\/span>\n        #beginners<\/span>\n      <\/div>\n    <\/div>\n  <\/a>\n<\/div>\n \n\n","category":["performance","webpack","javascript"]},{"title":"How We Sped Up Our Webpack (TailwindCSS) Build By 74%","pubDate":"Mon, 22 Mar 2021 10:23:55 +0000","link":"https:\/\/dev.to\/platformos\/how-we-sped-up-our-webpack-tailwindcss-build-by-57-1hci","guid":"https:\/\/dev.to\/platformos\/how-we-sped-up-our-webpack-tailwindcss-build-by-57-1hci","description":"
    Since Github Actions became a thing, I became interested in saving precious seconds in our plan by optimizing assets build time. As long as it didn't exceed 60 seconds, there was little motivation, but once it did, I said enough is enough.<\/p>\n\n
    Our build step runs two commands:<\/p>\n\n