{
    "version": "https://jsonfeed.org/version/1",
    "user_comment": "This feed allows you to read the posts from this site in any feed reader that supports the JSON Feed format. To add this feed to your reader, copy the following URL -- https://wp-devil.com/tag/css/feed/json -- and add it your reader.",
    "home_page_url": "https://wp-devil.com/tag/css",
    "feed_url": "https://wp-devil.com/tag/css/feed/json",
    "title": "WP Devil",
    "description": "WordPress, ClassicPress, Music and Geekdom",
    "items": [
        {
            "id": "https://wp-devil.com/css-tricks-is-dead/",
            "url": "https://wp-devil.com/css-tricks-is-dead/",
            "title": "CSS Tricks is dead",
            "content_html": "<p>It&#8217;s just as I&#8217;ve feared (and probably many others): After the <a href=\"https://css-tricks.com/css-tricks-is-joining-digitalocean/\">sell-out of CSS Tricks in 2022</a>, its new masters let it tatter on for about a year, and then stopped publishing any new content around mid April of 2023.</p>\n<figure id=\"attachment_972\" aria-describedby=\"caption-attachment-972\" style=\"width: 250px\" class=\"wp-caption aligncenter\"><a href=\"https://wp-devil.com/wp-content/uploads/2023/12/Screen-Shot-2023-12-11-at-03.45.47-fullpage.png\" data-rel=\"lightbox-gallery-toXV7FXr\" data-rl_title=\"Screen Shot 2023-12-11 at 03.45.47-fullpage\" data-rl_caption=\"\" title=\"Screen Shot 2023-12-11 at 03.45.47-fullpage\"><img decoding=\"async\" fetchpriority=\"high\" src=\"https://wp-devil.com/wp-content/uploads/2023/12/Screen-Shot-2023-12-11-at-03.45.47-fullpage-250x250.png\" alt=\"front page of css-tricks.com as of December 11th, 2023\" width=\"250\" height=\"250\" class=\"size-thumbnail wp-image-972\" srcset=\"https://wp-devil.com/wp-content/uploads/2023/12/Screen-Shot-2023-12-11-at-03.45.47-fullpage-250x250.png 250w, https://wp-devil.com/wp-content/uploads/2023/12/Screen-Shot-2023-12-11-at-03.45.47-fullpage-256x256.png 256w\" sizes=\"(max-width: 250px) 100vw, 250px\"></a><figcaption id=\"caption-attachment-972\" class=\"wp-caption-text\">Current front page of <a href=\"https://css-tricks.com\">css-tricks.com</a> as of December 11th, 2023: No new content was added past April 2023</figcaption></figure>\n<p>So now its only reason for existence is content, content, content = SEO paradise, and the almanac (which is also &#8220;content content content&#8221;).<br>\nThat 15 years project is getting now an even worse treatment than other long-time runners got, ie. letting it slowly fade-away into triviality.<br>\nProbably, in another few months, its gonna be folded into another &#8220;exciting adventure&#8221; of its current masters, and then disappear from the web entirely.</p>\n<p><strong>Although</strong> it could be revived, <strong>like other sites</strong> were in the past, for example:</p>\n<p><a href=\"https://www.selfhtml.org\">SelfHTML</a> &#8211; originally an introduction and daily helper in terms of how to use HTML + CSS, and to some extends, also Javascript. Eventually it was turned into a (somewhat medicro) wiki and the supporting people founded an association (<a href=\"https://blog.lingoda.com/en/what-does-verein-mean/\">Verein</a>), but it is still active and around.<br>\nRecently, <a href=\"https://blog.selfhtml.org/2023/nov/01/wird-selfhtml-heute-noch-gebraucht\">they even asked themselves whether SelfHTML is still valid to be around</a>, but come to the conclusion, that yes, esp. for native German speakers, and beginners, its still a valid and solid introduction and reference.</p>\n<p><a href=\"https://www.alistapart.com\">A List Apart</a> &#8211; from the originally ground-breaking tutorials and articles, its turned mostly into a teaser-orgy for other peoples grand books on topic xyz, and the rest is filled with essays about work, but sometimes, there still is useful content to be found.</p>\n<p><a href=\"https://www.smashingmagazine.com\">Smashing Magazine</a> &#8211; has grown tremendiously and despite having a phase of stand-still a few years ago, seems to have climbed out of that valley. Today I went to their front page, and the &#8220;top links&#8221; / introduction section about helpers and tools was indeed a tremendous help. A lot of the articles posted there are not my cup of tea, but they have definitely broadened their spectrum, and despite that mentioned &#8220;valley of stand-still&#8221;, seemingly have managed to avoid turning into yet another run o&#8217; the mill, &#8220;jack of all trades&#8221; magazine.</p>\n<p><a href=\"https://tympanus.net/codrops/\">Tympanus Codrops</a> &#8211; does still the same, ie. posts of CSS / JS / Web design experiments, but mixes and breaks up things with a bit more lively, varied content.</p>\n",
            "content_text": "It&#8217;s just as I&#8217;ve feared (and probably many others): After the sell-out of CSS Tricks in 2022, its new masters let it tatter on for about a year, and then stopped publishing any new content around mid April of 2023.\nCurrent front page of css-tricks.com as of December 11th, 2023: No new content was added past April 2023\nSo now its only reason for existence is content, content, content = SEO paradise, and the almanac (which is also &#8220;content content content&#8221;).\nThat 15 years project is getting now an even worse treatment than other long-time runners got, ie. letting it slowly fade-away into triviality.\nProbably, in another few months, its gonna be folded into another &#8220;exciting adventure&#8221; of its current masters, and then disappear from the web entirely.\nAlthough it could be revived, like other sites were in the past, for example:\nSelfHTML &#8211; originally an introduction and daily helper in terms of how to use HTML + CSS, and to some extends, also Javascript. Eventually it was turned into a (somewhat medicro) wiki and the supporting people founded an association (Verein), but it is still active and around.\nRecently, they even asked themselves whether SelfHTML is still valid to be around, but come to the conclusion, that yes, esp. for native German speakers, and beginners, its still a valid and solid introduction and reference.\nA List Apart &#8211; from the originally ground-breaking tutorials and articles, its turned mostly into a teaser-orgy for other peoples grand books on topic xyz, and the rest is filled with essays about work, but sometimes, there still is useful content to be found.\nSmashing Magazine &#8211; has grown tremendiously and despite having a phase of stand-still a few years ago, seems to have climbed out of that valley. Today I went to their front page, and the &#8220;top links&#8221; / introduction section about helpers and tools was indeed a tremendous help. A lot of the articles posted there are not my cup of tea, but they have definitely broadened their spectrum, and despite that mentioned &#8220;valley of stand-still&#8221;, seemingly have managed to avoid turning into yet another run o&#8217; the mill, &#8220;jack of all trades&#8221; magazine.\nTympanus Codrops &#8211; does still the same, ie. posts of CSS / JS / Web design experiments, but mixes and breaks up things with a bit more lively, varied content.",
            "date_published": "2023-12-11T16:03:49+01:00",
            "date_modified": "2023-12-11T16:03:49+01:00",
            "author": {
                "name": "fwolf",
                "url": "https://wp-devil.com/author/fwolf/",
                "avatar": "https://secure.gravatar.com/avatar/c2a31599f60eec1232806bfc26066ed2?s=512&d=mm&r=g"
            },
            "image": "https://wp-devil.com/wp-content/uploads/2023/12/by-tzimt0ms.jpg",
            "tags": [
                "almanac",
                "blog",
                "css",
                "magazine",
                "Life and let die",
                "Webdesign",
                "Work"
            ]
        },
        {
            "id": "https://wp-devil.com/a-journey-into-how-i-research-anything/",
            "url": "https://wp-devil.com/a-journey-into-how-i-research-anything/",
            "title": "A journey into how I research .. anything",
            "content_html": "<p>Going down the rabbit hole: A journey into how I do research. Or: The start of a bookmark dump series \ud83d\ude42</p>\n<p>So, things that happen daily, almost all the time &#8211; when I&#8217;m researching a specific topic, my browser instance may get crammed to the brim with open tabs.<br>\nThanks to that, I&#8217;m an avid user of &#8220;Bookmark All Tabs (into a bookmark folder)&#8221; \ud83d\ude00</p>\n<p>Others just dump this into a &#8220;bookmarks of the day / week&#8221; post, but I&#8217;d like to add some beforehand information, too.<br>\nLets call this the UNcluttering of my mind for important stuff, like .. Getting Things Done (eg. work tasks).</p>\n<p>My original goal was to find out about different options on how to hook into the <a href=\"https://dev.twitch.tv/docs/api/\">Twitch API</a>, as I just chose to use StreamElements as an intermediate, but interim solution for <em>The Problem Of The User Interaction(tm)</em> on my <a href=\"https://twitch.tv/gothicforesttroll\">twitch channel</a>.</p>\n<p>The idea is to use a PHP + JS approach to handle Twitch events and others, and work as kind of a handler or a bridge / server / client solution (the bridge and partial server being the PHP + JS handler, Twitch being the main server and the client obviously is the browser component of OBS). On the other hand, there is stuff like <a href=\"https://twitchpress.wordpress.com/\">TwitchPress</a>, to play around with. Oh, and apparently there also is an <a href=\"https://dev.streamelements.com/docs/kappa/api.yaml\">API for StreamElements</a> (just sayin&#8217;) \ud83d\ude42</p>\n<p>A few selected results from the GitHub search &raquo;<a href=\"https://github.com/search?l=PHP&#038;o=desc&#038;q=twitch+api&#038;s=updated&#038;type=Repositories\">twitch api</a>&laquo; (restricted to &#8216;PHP&#8217;):</p>\n<ul>\n<li><a href=\"https://github.com/nicklaw5/twitch-api-php\">https://github.com/nicklaw5/twitch-api-php &#8211; Twitch API PHP Library</a> &#8211; looks very complete AND up-to-date to me</li>\n<li><a href=\"https://github.com/cp6/Twitch-API-class\">https://github.com/cp6/Twitch-API-class &#8211; Twitch API class</a> &#8211; a simple implementation, for a lower learning curve</li>\n<li><a href=\"https://github.com/padhie/TwitchApiBundle\">https://github.com/padhie/TwitchApiBundle &#8211; TwitchApi</a> &#8211; To quote from the README: &raquo;A little collection to work with the Twitch-Api&laquo;</li>\n<li><a href=\"https://github.com/AuhuurMedia/twitch-api-php\">https://github.com/AuhuurMedia/twitch-api-php</a> &#8211; simpler approach with cURL</li>\n</ul>\n<p>Now, this was, <strong>BEFORE</strong> I finally decided on StreamElements for an intermediate solution &#8211; because streams get just sooooo much <strong>LIVElier</strong> with things and animations appearing, when eg. somebody follows, subscribes to the channel, or even dares to tip the DJ via one of the numerous services available (eg. PayPal or Ko-Fi).</p>\n<h3>Let&#8217;s talk about animations.</h3>\n<p>First I thought about creating these with an editor, similar to GIF creation &#8211; with the background knowledge, that you are able to use FFMPEG to create videos from images (ie. batch processing of numerous images into one video, and vice-versa). But also, about specialized programs. Searching for this, we immediatedly <a href=\"https://www.adamenfroy.com/animation-software\">stumbled upon</a> <a href=\"https://alternativeto.net/software/maya/\">Maya</a> .. how could we forget about that? Possible different solutions include, <a href=\"https://www.renderforest.com/blog/best-animation-software\">amongst others</a>, <a href=\"https://www.synfig.org/\">Synfig</a>, an open-source, cross-platform, 2D animation software.</p>\n<p>A glance into how StreamElements builds its events &#8211; using them as simple web widgets or snippets, being loaded into OBS using the browser component / element &#8211; brought up the idea of going with CSS animations instead. Maya etc. is nice, but total overkill.<br>\nAnd, we have been working with CSS since the early 2000s, so what&#8217;s easier? Figuring out some complex animation editor, or use what one has <strong>right on hand</strong>? </p>\n<p>Note: This also ties right into my thoughts about using CSS animations instead of hardware-rendering for those fancy random appearing emotes on Twitch streams. Ie. use a CSS overlay, CSS 3 transforms for resource-friendly generation, and pre-generate the actual sent-out amount of emotes (eg. user drops in 10 emotes in the chat => its being picked up by a bot or observing script, and so on).</p>\n<h3>But, how to convert this into a video?</h3>\n<p>Well, use a desktop recording software. Of corpse, others thought already as far, and there are quite a few tools around &#8211; whether it be online services or a stand-alone solution in python \ud83d\ude42</p>\n<ul>\n<li><a href=\"https://github.com/bpsagar/css2video\">https://github.com/bpsagar/css2video &#8211; Python library to convert CSS animations into video</a></li>\n<li><a href=\"https://html5animationtogif.com/html5tovideo\">https://html5animationtogif.com/html5tovideo</a> &#8211; online service including <a href=\"https://html5animationtogif.com/developer_api\">API</a> to convert &#8220;HTML to Video&#8221; or GIF .. althought that&#8217;d obviously be a CSS- or JS-based animation</li>\n<li><a href=\"https://clideo.com/image-sequence-to-video\">https://clideo.com/image-sequence-to-video &#8211; Image Sequence to Video</a> &#8211; for the classic thing, you dont even need to figure out how to correctly use FFMPEG (I dont need to, either, because I&#8217;ve already known how to for ancient times ;))</li>\n</ul>\n",
            "content_text": "Going down the rabbit hole: A journey into how I do research. Or: The start of a bookmark dump series \ud83d\ude42\nSo, things that happen daily, almost all the time &#8211; when I&#8217;m researching a specific topic, my browser instance may get crammed to the brim with open tabs.\nThanks to that, I&#8217;m an avid user of &#8220;Bookmark All Tabs (into a bookmark folder)&#8221; \ud83d\ude00\nOthers just dump this into a &#8220;bookmarks of the day / week&#8221; post, but I&#8217;d like to add some beforehand information, too.\nLets call this the UNcluttering of my mind for important stuff, like .. Getting Things Done (eg. work tasks).\nMy original goal was to find out about different options on how to hook into the Twitch API, as I just chose to use StreamElements as an intermediate, but interim solution for The Problem Of The User Interaction(tm) on my twitch channel.\nThe idea is to use a PHP + JS approach to handle Twitch events and others, and work as kind of a handler or a bridge / server / client solution (the bridge and partial server being the PHP + JS handler, Twitch being the main server and the client obviously is the browser component of OBS). On the other hand, there is stuff like TwitchPress, to play around with. Oh, and apparently there also is an API for StreamElements (just sayin&#8217;) \ud83d\ude42\nA few selected results from the GitHub search &raquo;twitch api&laquo; (restricted to &#8216;PHP&#8217;):\n\nhttps://github.com/nicklaw5/twitch-api-php &#8211; Twitch API PHP Library &#8211; looks very complete AND up-to-date to me\nhttps://github.com/cp6/Twitch-API-class &#8211; Twitch API class &#8211; a simple implementation, for a lower learning curve\nhttps://github.com/padhie/TwitchApiBundle &#8211; TwitchApi &#8211; To quote from the README: &raquo;A little collection to work with the Twitch-Api&laquo;\nhttps://github.com/AuhuurMedia/twitch-api-php &#8211; simpler approach with cURL\n\nNow, this was, BEFORE I finally decided on StreamElements for an intermediate solution &#8211; because streams get just sooooo much LIVElier with things and animations appearing, when eg. somebody follows, subscribes to the channel, or even dares to tip the DJ via one of the numerous services available (eg. PayPal or Ko-Fi).\nLet&#8217;s talk about animations.\nFirst I thought about creating these with an editor, similar to GIF creation &#8211; with the background knowledge, that you are able to use FFMPEG to create videos from images (ie. batch processing of numerous images into one video, and vice-versa). But also, about specialized programs. Searching for this, we immediatedly stumbled upon Maya .. how could we forget about that? Possible different solutions include, amongst others, Synfig, an open-source, cross-platform, 2D animation software.\nA glance into how StreamElements builds its events &#8211; using them as simple web widgets or snippets, being loaded into OBS using the browser component / element &#8211; brought up the idea of going with CSS animations instead. Maya etc. is nice, but total overkill.\nAnd, we have been working with CSS since the early 2000s, so what&#8217;s easier? Figuring out some complex animation editor, or use what one has right on hand? \nNote: This also ties right into my thoughts about using CSS animations instead of hardware-rendering for those fancy random appearing emotes on Twitch streams. Ie. use a CSS overlay, CSS 3 transforms for resource-friendly generation, and pre-generate the actual sent-out amount of emotes (eg. user drops in 10 emotes in the chat => its being picked up by a bot or observing script, and so on).\nBut, how to convert this into a video?\nWell, use a desktop recording software. Of corpse, others thought already as far, and there are quite a few tools around &#8211; whether it be online services or a stand-alone solution in python \ud83d\ude42\n\nhttps://github.com/bpsagar/css2video &#8211; Python library to convert CSS animations into video\nhttps://html5animationtogif.com/html5tovideo &#8211; online service including API to convert &#8220;HTML to Video&#8221; or GIF .. althought that&#8217;d obviously be a CSS- or JS-based animation\nhttps://clideo.com/image-sequence-to-video &#8211; Image Sequence to Video &#8211; for the classic thing, you dont even need to figure out how to correctly use FFMPEG (I dont need to, either, because I&#8217;ve already known how to for ancient times ;))",
            "date_published": "2021-06-22T15:49:56+02:00",
            "date_modified": "2021-06-22T15:49:56+02:00",
            "author": {
                "name": "fwolf",
                "url": "https://wp-devil.com/author/fwolf/",
                "avatar": "https://secure.gravatar.com/avatar/c2a31599f60eec1232806bfc26066ed2?s=512&d=mm&r=g"
            },
            "image": "https://wp-devil.com/wp-content/uploads/2021/06/trgrf4lvmdq.jpg",
            "tags": [
                "animation",
                "css",
                "css 3",
                "html",
                "obs",
                "streaming",
                "twitch",
                "video",
                "Bookmarks",
                "Life and let die"
            ]
        },
        {
            "id": "https://wp-devil.com/fun-with-css-image-text-overlay/",
            "url": "https://wp-devil.com/fun-with-css-image-text-overlay/",
            "title": "Fun with CSS: Image Text Overlay",
            "content_html": "<p>So I&#8217;ve been fighting this week with &#8220;Hero Images&#8221; &#8211; images with a text overlay. Now, the regular style is not a full overlay, but text usually positioned at the bottom or top of the whole scenery. What I needed was horizontally (easy) and VERTICALLY centered text (hard). So this is actually a case of &#8220;Text over Image Overlay&#8221;. But in common literature (read: tutorials and how-tos on the interwebz), its also being called &#8220;hero image&#8221;, ie. kinda interchangeable.</p>\n<p>Thus, I dug meself through a horrendous amount of its variations .. finishing up <a href=\"https://thestizmedia.com/responsive-background-image-aspect-ratio-with-content-overlay/\">with the variant detailed at The Stiz Media</a> &#8211; which has been the only one working reliable so far. The client wanted a 100% overlay with a colored background, on top of a background image, text in a highlighting color positioned over it.</p>\n<p>Thus, I adapted it with an additional layer to properly position the content, and also being able to add a link tag around it.</p>\n<p>Also note: If you add a bit more stuff, ie. more containers, you need to define their flexbox properties manually for EACH new element you introduce. That seems to be the major PITA why we &#8220;old ones&#8221; are coping that bad with <a href=\"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\">flexbox</a>, <a href=\"https://css-tricks.com/snippets/css/complete-guide-grid/\">grid</a>, and the likes.</p>\n",
            "content_text": "So I&#8217;ve been fighting this week with &#8220;Hero Images&#8221; &#8211; images with a text overlay. Now, the regular style is not a full overlay, but text usually positioned at the bottom or top of the whole scenery. What I needed was horizontally (easy) and VERTICALLY centered text (hard). So this is actually a case of &#8220;Text over Image Overlay&#8221;. But in common literature (read: tutorials and how-tos on the interwebz), its also being called &#8220;hero image&#8221;, ie. kinda interchangeable.\nThus, I dug meself through a horrendous amount of its variations .. finishing up with the variant detailed at The Stiz Media &#8211; which has been the only one working reliable so far. The client wanted a 100% overlay with a colored background, on top of a background image, text in a highlighting color positioned over it.\nThus, I adapted it with an additional layer to properly position the content, and also being able to add a link tag around it.\nAlso note: If you add a bit more stuff, ie. more containers, you need to define their flexbox properties manually for EACH new element you introduce. That seems to be the major PITA why we &#8220;old ones&#8221; are coping that bad with flexbox, grid, and the likes.",
            "date_published": "2019-02-10T17:57:31+01:00",
            "date_modified": "2019-02-10T17:58:06+01:00",
            "author": {
                "name": "fwolf",
                "url": "https://wp-devil.com/author/fwolf/",
                "avatar": "https://secure.gravatar.com/avatar/c2a31599f60eec1232806bfc26066ed2?s=512&d=mm&r=g"
            },
            "tags": [
                "css",
                "flexbox",
                "modern css",
                "development"
            ]
        }
    ]
}