<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Fatih Telis</title>
    <description>The latest articles on DEV Community by Fatih Telis (@fatihtelis).</description>
    <link>https://dev.to/fatihtelis</link>
    <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%2F634194%2Fcda55b7e-c3f3-44c5-9d3e-af7318858124.jpg</url>
      <title>DEV Community: Fatih Telis</title>
      <link>https://dev.to/fatihtelis</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/fatihtelis"/>
    <language>en</language>
    <item>
      <title>Fake Instagram Post Generator</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Fri, 10 May 2024 07:43:38 +0000</pubDate>
      <link>https://dev.to/fatihtelis/fake-instagram-post-generator-4ajk</link>
      <guid>https://dev.to/fatihtelis/fake-instagram-post-generator-4ajk</guid>
      <description>&lt;p&gt;Hello folks 👋&lt;/p&gt;

&lt;p&gt;I've been building &lt;a href="https://10015.io"&gt;10015.io&lt;/a&gt; for some time and I'm excited to introduce you to an intriguing tool "10015 Instagram Post Generator." This tool is designed for crafting &lt;strong&gt;fake Instagram posts&lt;/strong&gt; that look incredibly real and polished.&lt;/p&gt;

&lt;p&gt;➡️ &lt;a href="https://10015.io/tools/instagram-post-generator"&gt;Fake Instagram Post Generator&lt;br&gt;
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This tool specializes in creating Instagram-specific content with a high degree of customization. Users can upload their own images. The interface is super user-friendly, allowing you to draft engaging captions, and even simulate likes and comments to give your posts that authentic Instagram vibe. &lt;br&gt;
It currently offers a dark mode feature, catering to users who prefer a darker interface for their design work.&lt;/p&gt;

&lt;p&gt;This tool is a fantastic resource for digital creators, marketers, and anyone interested in experimenting with Instagram content without going live. It's perfect for testing out visual narratives, previewing promotional content, or just playing around with different aesthetic styles in a risk-free environment.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0oatefbf3l6g7f22i1m7.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0oatefbf3l6g7f22i1m7.jpg" alt="Image description" width="800" height="1283"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;While the "10015 Instagram Post Generator" offers vast potential for creativity, it's important to use it responsibly. It's a powerful tool for simulation and learning but should not be used for deceptive purposes. Always ensure that your creations are used ethically and constructively.&lt;/p&gt;

&lt;p&gt;Feel free to explore this tool and unleash your creativity, but remember to tread carefully and consider the implications of the content you generate. Happy creating!&lt;/p&gt;

</description>
      <category>socialmedia</category>
      <category>tooling</category>
      <category>design</category>
      <category>instagram</category>
    </item>
    <item>
      <title>Create AI-Powered Image Captions in Seconds</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Sat, 02 Sep 2023 20:43:03 +0000</pubDate>
      <link>https://dev.to/fatihtelis/create-ai-powered-image-captions-in-seconds-33o5</link>
      <guid>https://dev.to/fatihtelis/create-ai-powered-image-captions-in-seconds-33o5</guid>
      <description>&lt;p&gt;Hi folks,&lt;/p&gt;

&lt;p&gt;Today, I'll give information about the new tool I've created on &lt;a href="https://10015.io"&gt;10015.io&lt;/a&gt;: "&lt;strong&gt;Image Caption Generator&lt;/strong&gt;". &lt;/p&gt;

&lt;p&gt;When you upload your image, it analysis the image and generate alternative captions powered by AI. Now, you don't need to find captions manually when you share an image on social media such as Instagram, Pinterest etc.&lt;/p&gt;

&lt;p&gt;Give it a try!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://10015.io/tools/image-caption-generator"&gt;https://10015.io/tools/image-caption-generator&lt;/a&gt;&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>tooling</category>
      <category>ai</category>
    </item>
    <item>
      <title>"X" (Twitter) Ad Revenue Generator</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Mon, 21 Aug 2023 20:52:25 +0000</pubDate>
      <link>https://dev.to/fatihtelis/x-twitter-ad-revenue-generator-3npl</link>
      <guid>https://dev.to/fatihtelis/x-twitter-ad-revenue-generator-3npl</guid>
      <description>&lt;p&gt;Hi folks,&lt;/p&gt;

&lt;p&gt;I've created a screenshot generator where you can create your own Twitter Ad Revenue notifications to share with your followers and shock them. &lt;/p&gt;

&lt;p&gt;➡️ &lt;a href="https://10015.io/tools/twitter-ad-revenue-generator"&gt;Twitter - X Ad Revenue Generator&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is an example.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6xX8g7zd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e63uite7vtksllg1hfdh.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6xX8g7zd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e63uite7vtksllg1hfdh.jpg" alt="X Ad Revenue Generator" width="680" height="1200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can use your own custom wallpapers to make it more real.&lt;/p&gt;

&lt;p&gt;Have fun!&lt;/p&gt;

</description>
      <category>twitter</category>
      <category>socialmedia</category>
    </item>
    <item>
      <title>Text to Handwriting Conversion of Long Texts into Single PDF File</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Tue, 08 Nov 2022 08:23:23 +0000</pubDate>
      <link>https://dev.to/fatihtelis/text-to-handwriting-conversion-of-long-texts-into-single-pdf-file-4a5c</link>
      <guid>https://dev.to/fatihtelis/text-to-handwriting-conversion-of-long-texts-into-single-pdf-file-4a5c</guid>
      <description>&lt;p&gt;Hello,&lt;/p&gt;

&lt;p&gt;I'm Fatih, the creator of 10015.io. I've developed one of the most popular &lt;a href="https://10015.io/tools/text-to-handwriting-converter"&gt;&lt;strong&gt;text to handwriting&lt;/strong&gt;&lt;/a&gt; converters on web. It was a though development process as it has many difficult steps like conversion of html into images and also converting them into pdf files. &lt;/p&gt;

&lt;p&gt;One of the most requested feature of this tool was multiple page support. At first, it is not easy to figure out how to split text into multiple pages because the area of the text, line heights and fonts are all dynamic. After a long development process, I've added multipage support to text to handwriting converter on 10015.io.&lt;/p&gt;

&lt;p&gt;Now, it automatically splits the text into multiple pages and you can download the image and PDF of each page separately or download all as a single PDF file. Here is how the output looks.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pFI0sySP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q1slk8bhupktujat1cp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pFI0sySP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q1slk8bhupktujat1cp.png" alt="text to handwriting" width="880" height="619"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can give it a try and comment about your thoughts about the new feature.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://10015.io/tools/text-to-handwriting-converter"&gt;https://10015.io/tools/text-to-handwriting-converter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;👋&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>productivity</category>
      <category>tooling</category>
      <category>pdf</category>
    </item>
    <item>
      <title>Convert your texts into "Bionic Reading" mode online</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Thu, 19 May 2022 22:59:21 +0000</pubDate>
      <link>https://dev.to/fatihtelis/convert-your-texts-into-bionic-reading-mode-online-5og</link>
      <guid>https://dev.to/fatihtelis/convert-your-texts-into-bionic-reading-mode-online-5og</guid>
      <description>&lt;p&gt;Hello everyone,&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bionic Reading&lt;/strong&gt; is a new method to speed up your reading by highlighting first letters of each word in a sentence to focus your eye on them and other letters will be completed by your brain without reading the whole.&lt;/p&gt;

&lt;p&gt;This method is developed by Renato Casutt and I made a basic converter to help you to test whether it works for you or not.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://10015.io/tools/bionic-reading-converter"&gt;Bionic Reading Converter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Feel free to comment about your experiences about this new method.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qGpVRE0R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9jizo3d00dk8vpi44at.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qGpVRE0R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9jizo3d00dk8vpi44at.gif" alt="Fast Reading with Bionic Reading" width="220" height="162"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>productivity</category>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Beautiful Code Snapshots with Personal Watermark</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Thu, 28 Apr 2022 15:42:42 +0000</pubDate>
      <link>https://dev.to/fatihtelis/beautiful-code-snapshots-with-personal-watermark-2nc0</link>
      <guid>https://dev.to/fatihtelis/beautiful-code-snapshots-with-personal-watermark-2nc0</guid>
      <description>&lt;p&gt;Hi folks! 👋&lt;/p&gt;

&lt;p&gt;I'd published a &lt;a href="https://dev.to/fatihtelis/best-code-to-image-converter-on-web-449b"&gt;post&lt;/a&gt; recently about the &lt;strong&gt;&lt;a href="https://10015.io/tools/code-to-image-converter"&gt;code to image converter&lt;/a&gt;&lt;/strong&gt; I've been working on. Since then, I've added some nice features that has been requested and it becomes much nicer with the latest improvements. The best part is: it is totally free to use.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://10015.io/tools/code-to-image-converter"&gt;https://10015.io/tools/code-to-image-converter&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Personal Watermark
&lt;/h2&gt;

&lt;p&gt;First of all, most of the paid converters put their own watermark to the screenshots and request for money to remove it. In &lt;a href="//10015.io"&gt;10015.io&lt;/a&gt;, you can add your own personal watermark to the code snapshots with either with your avatar, or with a Twitter icon or as pure text. Here is an example of a screenshot with a Twitter handle.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wvzUBYLh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea0ra4lk8520wqbfuht4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wvzUBYLh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea0ra4lk8520wqbfuht4.png" alt="Code Spanshot" width="880" height="309"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  File name with icon
&lt;/h2&gt;

&lt;p&gt;Also, you can set a file name for the code block to make it more informative. It will detect the file extension automatically and add an icon if it is in the list of popular programming languages. Here is an example for custom file name.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1qkbGD-v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nymgqi3gmh6q1x6ydp6a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1qkbGD-v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nymgqi3gmh6q1x6ydp6a.png" alt="Code to Image Converter" width="880" height="571"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In addition to that, you can customize the highlight language, theme, background, font family, font size and many other features easily.&lt;/p&gt;

&lt;p&gt;If you have any suggestion, feel free to comment. &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>productivity</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Best "Code to Image Converter" on web 🧑‍💻</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Thu, 17 Mar 2022 20:29:21 +0000</pubDate>
      <link>https://dev.to/fatihtelis/best-code-to-image-converter-on-web-449b</link>
      <guid>https://dev.to/fatihtelis/best-code-to-image-converter-on-web-449b</guid>
      <description>&lt;p&gt;Hi guys 👋,&lt;/p&gt;

&lt;p&gt;We, as software developers, like to share over knowledge throughout our network and one of the most frequent way to do it is to share &lt;strong&gt;code screenshots&lt;/strong&gt;. For making it more attractive, it is popular to use code to image converters where you can add fancy backgrounds and customize the look of code block. I've developed a free tool on &lt;a href="https://10015.io"&gt;10015.io&lt;/a&gt; for converting code blocks into images and it is one of the best on web with many customization options.&lt;/p&gt;

&lt;p&gt;🔗 &lt;a href="https://10015.io/tools/code-to-image-converter"&gt;https://10015.io/tools/code-to-image-converter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can highlight all popular programming languages such as Javascript / Typescript, HTML, CSS, Java, C#, PHP, Python, Go , Kotlin, Swift, Ruby and so on. There are 50 different color themes available and you can select the font family from a list of 25 different monospace fonts. In addition, you can customize background color/image, font size, shadows and set the output image quality according to your needs. Here is a screenshot that is created with &lt;a href="https://10015.io/tools/code-to-image-converter"&gt;code to image converter&lt;/a&gt; by 10015.io.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Q_DzoV3a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qislcsmqp2qmw3fj1j76.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Q_DzoV3a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qislcsmqp2qmw3fj1j76.png" alt="convert code to image" width="880" height="414"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I'm working on adding new features like file name, line numbers, personal or corporate branding. If you have any other suggestions about the tool, feel free to comment below.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>productivity</category>
      <category>tooling</category>
    </item>
    <item>
      <title>Download Instagram photos with just one click! 📷 ⤵️</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Wed, 09 Mar 2022 21:26:08 +0000</pubDate>
      <link>https://dev.to/fatihtelis/download-instagram-photos-with-just-one-click-1949</link>
      <guid>https://dev.to/fatihtelis/download-instagram-photos-with-just-one-click-1949</guid>
      <description>&lt;p&gt;Hi folks 👋,&lt;/p&gt;

&lt;p&gt;We all use &lt;strong&gt;Instagram&lt;/strong&gt;. Sometimes, we need to &lt;strong&gt;download photos&lt;/strong&gt; from there for some reason. If you've ever tried it, you must know how it is difficult even if you know how to inspect element on browser. &lt;/p&gt;

&lt;p&gt;For making it easier for people who want to download images from Instagram, I coded a tool which allows you to download these images with one click. Here is the link.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://10015.io/tools/instagram-photo-downloader"&gt;https://10015.io/tools/instagram-photo-downloader&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You just need to enter Instagram post URL and that's it. Your download links will appear on the screen right away after you click "Get Images". Keep in mind that post must be publicly available.&lt;/p&gt;

&lt;p&gt;Here is how it looks.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aenBe97J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcvkvsgebtxb161sqee8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aenBe97J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcvkvsgebtxb161sqee8.png" alt="Instagram image downloader" width="880" height="379"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The UI is very simple and easy to use. If you want to ask anything or make any suggestion, just write a comment.&lt;/p&gt;

&lt;p&gt;For more tools, you can visit &lt;a href="https://10015.io"&gt;10015.io&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>tooling</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How to create shapes with CSS clip-path? 🟦</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Tue, 08 Mar 2022 08:20:39 +0000</pubDate>
      <link>https://dev.to/fatihtelis/how-to-create-shapes-with-css-clip-path-55h4</link>
      <guid>https://dev.to/fatihtelis/how-to-create-shapes-with-css-clip-path-55h4</guid>
      <description>&lt;p&gt;&lt;strong&gt;CSS clip-path&lt;/strong&gt; property is one of the most underrated CSS properties. Actually, it is a magical tool if you know how to use it. There are different types of arguments that you can use as clip-path property such as image url, svg path, circle, ellipse or polygon. I'll talk more about the polygon property in this article as you can mask your background with multiple points that forms a closed shape with this property.&lt;/p&gt;

&lt;p&gt;It may be better to start with a basic shape to understand better how this property works. Here is the CSS code for a typical rectangle.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;polygon&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="err"&gt;0&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="err"&gt;0&lt;/span&gt;&lt;span class="o"&gt;%,&lt;/span&gt; &lt;span class="err"&gt;100&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="err"&gt;0&lt;/span&gt;&lt;span class="o"&gt;%,&lt;/span&gt; &lt;span class="err"&gt;100&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="err"&gt;100&lt;/span&gt;&lt;span class="o"&gt;%,&lt;/span&gt; &lt;span class="err"&gt;0&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="err"&gt;100&lt;/span&gt;&lt;span class="o"&gt;%);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you see, you put x and y coordinates of each points to enclose the region. It is an x-y coordinate system where (0,0) is in the top left. x values are increasing in right direction and y values are increasing in bottom direction.&lt;/p&gt;

&lt;p&gt;You can either use percentages or static values like px, em, rem but it is better to use percentages to make it responsible. You can use different number of points according to your needs, so you can obtain a triangle, rectangle or any type of polygon.&lt;/p&gt;

&lt;p&gt;It may be a little difficult to come up with the coordinates when the shape you want to achieve is a little complicated. So, it is better to use a tool for this. You can check &lt;strong&gt;&lt;a href="https://10015.io/tools/css-clip-path-generator"&gt;CSS clip path generator&lt;/a&gt;&lt;/strong&gt; for creating your shapes easily.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://10015.io/tools/css-clip-path-generator"&gt;https://10015.io/tools/css-clip-path-generator&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is an arrow head shape that you can make with this tool easily.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_aKlZrvZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/als5vwchk1nqhro79wml.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_aKlZrvZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/als5vwchk1nqhro79wml.png" alt="CSS clip path generator" width="880" height="375"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can visit &lt;a href="https://10015.io"&gt;10015.io&lt;/a&gt; for more tools.&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>css</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Convert tweets into images 🐦 ↪️ 🖼️</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Mon, 21 Feb 2022 19:10:24 +0000</pubDate>
      <link>https://dev.to/fatihtelis/convert-tweets-into-images--4kmi</link>
      <guid>https://dev.to/fatihtelis/convert-tweets-into-images--4kmi</guid>
      <description>&lt;p&gt;Hi folks 👋&lt;/p&gt;

&lt;p&gt;I've been working on a &lt;strong&gt;&lt;a href="https://10015.io/tools/tweet-to-image-converter"&gt;tweet to image converter&lt;/a&gt;&lt;/strong&gt; for some time and I've finally released it today. &lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://10015.io/tools/tweet-to-image-converter"&gt;https://10015.io/tools/tweet-to-image-converter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--D2K5pju_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78if8wg6txmiledyqwmt.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--D2K5pju_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78if8wg6txmiledyqwmt.jpeg" alt="Thinking man" width="244" height="207"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What you can do with it?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Convert tweets into images&lt;/li&gt;
&lt;li&gt;Add background images, gradients or solid colors as a frame&lt;/li&gt;
&lt;li&gt;Set language of the Twitter UI&lt;/li&gt;
&lt;li&gt;Set light or dark theme&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Output image will be in &lt;strong&gt;high quality&lt;/strong&gt;, so you can use it anywhere without hesitation.&lt;/p&gt;

&lt;p&gt;I was a long process to develop it. It was hard to optimize images, set fonts for different languages and obtain the best result in web. So I'm wondering your thoughts about it, either positive or negative. Feel free to roast me. 🔥&lt;/p&gt;

</description>
      <category>twitter</category>
      <category>webdev</category>
      <category>design</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Better Shadow Generator for React Native 📱</title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Thu, 10 Feb 2022 19:28:56 +0000</pubDate>
      <link>https://dev.to/fatihtelis/better-shadow-generator-for-react-native-942</link>
      <guid>https://dev.to/fatihtelis/better-shadow-generator-for-react-native-942</guid>
      <description>&lt;p&gt;Hi everyone,&lt;/p&gt;

&lt;p&gt;I was working on a &lt;strong&gt;React Native&lt;/strong&gt; project some time ago and I needed a &lt;strong&gt;box shadow generator&lt;/strong&gt; which will give the same result both on iOS and Android for different elevations. There are very few online tools doing this and they do not give similar results on all cases for both platforms.&lt;/p&gt;

&lt;p&gt;As a frontend developer who is actively coding an online toolbox (&lt;a href="https://10015.io"&gt;10015.io&lt;/a&gt;), this pushed me to  develop a better shadow generator for React Native. &lt;/p&gt;

&lt;p&gt;Here you can see the React Native shadow generator I developed.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://10015.io/tools/react-native-shadow-generator"&gt;https://10015.io/tools/react-native-shadow-generator&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The main problem on other tools is: in Android, opacity of the box shadow is decreased exponentially when you increase the elevation. All other tools make a lineer interpolation, so when you increase the elevation, box shadow looks darker in iOS with respect to Android. I solved this problem by setting the opacity exponentially, and it gives far more better results on both platforms for both low and high elevations.&lt;/p&gt;

&lt;p&gt;Here you can see a sample code for style props generated by the tool.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;shadowColor: "#000000",
shadowOffset: {
  width: 0,
  height: 3,
},
shadowOpacity:  0.17,
shadowRadius: 3.05,
elevation: 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you are a React Native developer, I will be grateful if you give me feedback about the results.&lt;/p&gt;

&lt;p&gt;👋&lt;/p&gt;

</description>
      <category>reactnative</category>
      <category>react</category>
      <category>mobile</category>
      <category>programming</category>
    </item>
    <item>
      <title>How I built a "Text to Handwriting Converter" ✍️ </title>
      <dc:creator>Fatih Telis</dc:creator>
      <pubDate>Wed, 09 Feb 2022 19:29:28 +0000</pubDate>
      <link>https://dev.to/fatihtelis/how-i-built-a-text-to-handwriting-converter-2mf</link>
      <guid>https://dev.to/fatihtelis/how-i-built-a-text-to-handwriting-converter-2mf</guid>
      <description>&lt;p&gt;Hi everyone, I hope you are all fine. 😊&lt;/p&gt;

&lt;p&gt;Today, I want to talk about how I developed a &lt;strong&gt;&lt;a href="https://10015.io/tools/text-to-handwriting-converter"&gt;text to handwriting&lt;/a&gt;&lt;/strong&gt; converter for my all-in-one toolbox project - 10015.io. &lt;/p&gt;

&lt;p&gt;When I decided to code a text to handwriting converter, I analyzed the tools on the web and the main problem was there are lots of settings which confuses people in these tools and it is not easy to get the result immediately. So, my main aim was to build a "&lt;em&gt;minimalistic converter&lt;/em&gt;" which does all the dirty job behind the scenes. &lt;/p&gt;

&lt;p&gt;There are just 3 settings in the tool I developed. You can choose:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Handwriting font&lt;/li&gt;
&lt;li&gt;Ink color&lt;/li&gt;
&lt;li&gt;Paper type&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That's it. I didn't add any other settings which will make the tool complicated. Here is the settings section of the tool.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bzNj8ag---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/batknnxvoundw6f4uwo7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bzNj8ag---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/batknnxvoundw6f4uwo7.png" alt="Text to Handwriting Converter" width="880" height="374"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can choose different paper types as background. I have a configuration file for each paper type which adjusts the paddings and line heights automatically. You can even send a love letter to your lover by using this tool. 😉&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--cifstcME--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klzmxmf3cirfrda2th3n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cifstcME--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klzmxmf3cirfrda2th3n.png" alt="Text to Handwriting" width="794" height="522"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here you can create your own handwriting text.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://10015.io/tools/text-to-handwriting-converter"&gt;https://10015.io/tools/text-to-handwriting-converter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I used "html2canvas" npm package for converting the results into jpeg and "jspdf" package for converting it to PDF. All other process is to adjust the paper layout and text. For adding Google Fonts to the project dynamically, I used react-webfont-loader by dr-kobros.&lt;/p&gt;

&lt;p&gt;For more online tools, you can visit &lt;a href="https://10015.io"&gt;10015.io&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If you have any question about the development or suggestions about the text to handwriting converter, feel free to ask.&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
