{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: SPeshov","description":"The latest articles on DEV Community by SPeshov (@speshov).","link":"https:\/\/dev.to\/speshov","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%2F199146%2Fe23ebec9-5719-40c7-9aaa-5cf9e7a744b1.png","title":"DEV Community: SPeshov","link":"https:\/\/dev.to\/speshov"},"language":"en","item":[{"title":"Choosing React Design System \/Component Library","pubDate":"Sat, 01 Aug 2020 15:14:57 +0000","link":"https:\/\/dev.to\/speshov\/choosing-react-design-system-component-library-2pjl","guid":"https:\/\/dev.to\/speshov\/choosing-react-design-system-component-library-2pjl","description":"
\n

What's your experience and what do you use? <\/p>\n<\/blockquote>\n\n

Today I've decided to set up my UI design system, do a short research on what would be
\nright fit for my use case and once install do a small example.<\/p>\n\n

Checkboxes I wanted to fill:<\/p>\n\n

    \n

  1. it's easily compatible with styled-components<\/code><\/p><\/li>\n

  2. have a wide react UI ready to use components library<\/p><\/li>\n

  3. it's easy to tweak CSS styles of #2 (preferably with styled-components<\/code>)<\/p><\/li>\n<\/ol>\n\n

    I've stumbled upon a lot of react component libraries but only these ones
    \nmade happy and they left in the last decision steps.<\/p>\n\n

    \n \n \n Just use styled-components<\/a>\n<\/h1>\n\n

    This was my first choice I prefer this one over the others, but I don't want to spend time designing my own it will be just a waste of time.
    \nI would love to have one but I want to build it over time while I'm working on a project.<\/p>\n\n

    Also, I plan to use styled-component<\/code> to overwrite styles of the below whatever UI libraries I choose from. Meaning that I won't import components from below libraries, instead, I will wrap them around styled component and export that. <\/p>\n\n

    \n \n \n Ant.Design <\/a>\n<\/h1>\n\n

    I liked the design of this one clean, simple, beautiful. A lot of components to choose from and the documentation were just amazing with a wide range of examples.<\/p>\n\n

    I was ready to go with this one, but then I heard that voice in my mind \ud83d\ude43 \"Search up for style overwrites with styled comp.\" its a good practice to do that and it can save you some time. Just search for issues for whatever package you might use \ud83d\ude04.<\/p>\n\n

    And there was some tricky integration with styled-components that I found and it did not work all of the time for some components from ant.design<\/a> - so I decided to continue with my search.<\/p>\n\n

    \n \n \n Material-UI<\/a>\n<\/h1>\n\n

    Oh, this one \u261d\ufe0f - it's ok. if I was looking for something like this 3 years back I would choose this one but now I just don't like the look of it. One thing that makes me have look at it once again is that I see a lot of people praise it. Will see - still don't like it \ud83d\ude01.<\/p>\n\n

    \n \n \n Reach-UI<\/a>\n<\/h1>\n\n

    I'm using this one in a big project and it works great with styled-components<\/code> we have e UI\/UX
    \nsenior dev that it's working on our UI library in combination with other react components and it works great. But once again it takes time so setup different components and I don't want to waste time on something that I can have easily (example ant.design) <\/p>\n\n

    This one is light and that's one thing that I can't say about the ant.design<\/a> <\/p>\n\n

    There is one interesting library that I found Bit, it will extract component library from some of your projects and you can use it later one. I plan to try this one later on when I have built some of my components libraries.<\/p>\n\n

    \n \n \n Conclusion\n<\/h1>\n\n

    Not decided yet - I've spent so much time researching and trying examples and can't decide yet.<\/p>\n\n

    \n

    What's your experience and what do you use?<\/p>\n<\/blockquote>\n\n"},{"title":"Dev Life: Honest development struggle of mine.","pubDate":"Wed, 29 Jul 2020 20:31:05 +0000","link":"https:\/\/dev.to\/speshov\/dev-life-honest-development-struggle-of-mine-45dk","guid":"https:\/\/dev.to\/speshov\/dev-life-honest-development-struggle-of-mine-45dk","description":"

    I'm not sure how to start this post but the main point that I want to get to is the fact that Me as a web developer I struggling with keeping up to that with all new technologies that popup up around development JavaScript apps.<\/p>\n\n

    There are times when I feel pretty confident about starting a project and then right before I start working on it I start with searching for the new greatest, best tech stack for it, so I can at the same time learn new technology and have a product at the end.<\/p>\n\n

    And this never ends well. You end up stuck with some tutorial where you can't replicate the example that the tutorial mentor did, or you just end up more confused.<\/p>\n\n

    Also, some docs of these new technologies are never complete and they don't offer enough real-world examples - don't get me wrong they have working examples but they are just not applicable in a real-world application. <\/p>\n\n

    And yes I know what you might be thinking \"you need to work your way up\" - yes but before I start I feel that imposter syndrome kicking and I get that feeling that I might not be good enough and I feel stupid even that I have 5+ year experience in web dev.<\/p>\n\n

    Whatever the scenario development it's not easy, as that is projected from more experienced devs on us. For example when you watch a tutorial on something and you see that dev writing like insane and everything is working just as intended, and there is no thinking on how to approach some given problem they just do it - when in reality they have practiced that before and they just executed that on video and you end up frustrated. \ud83d\ude05<\/p>\n\n

    It takes time to learn and get comfortable with new technology and then start using it with confidence.<\/p>\n\n

    And this is a never-ending cycle - I don't mind if - I have patience, but when I realize that it can take me for example 3 days to set up a production-ready project (not just with create react app) with workflows and what not it annoys me.<\/p>\n\n

    So I've decided to update my website and then I will set up production-ready starters\/boilerplate projects with most common technologies that I think will need in the future, so I don't need to waste time setting up projects from the start, because all of them are pretty much the same you need authentication, authorization, routing, some basic styles, maybe social login,<\/p>\n\n

    And I'm sorry for this depressing log \ud83d\ude03 but this is just a reality of mine and I just wanted to share it.<\/p>\n\n"},{"title":"How to setup GatsbyJS starter with Typescript, ESLint, Prettier","pubDate":"Wed, 23 Oct 2019 22:13:43 +0000","link":"https:\/\/dev.to\/speshov\/how-to-setup-gatsbyjs-starter-with-typescript-eslint-prettier-4jh3","guid":"https:\/\/dev.to\/speshov\/how-to-setup-gatsbyjs-starter-with-typescript-eslint-prettier-4jh3","description":"

    Original post Here<\/a> - with images \ud83d\ude05<\/p>\n\n

    \n \n \n In Short\n<\/h2>\n\n
      \n
    1. Fork, clone and install the Gatsby default starter<\/li>\n
    2. Install gatsby-plugin-typescript<\/code> and TypeScript<\/code>\n<\/li>\n
    3. Configure tsconfig.json<\/code> and type-check script<\/code>\n<\/li>\n
    4. Converting files to TypeScript<\/li>\n
    5. Setting up ESLint<\/code> & Prettier<\/code>\n<\/li>\n
    6. Setting up VSC<\/li>\n<\/ol>\n\n

      \n \n \n 1. Clone and install the Gatsby default starter\n<\/h2>\n\n

      So yes just fork the Gatsby default starter to your own Github account and clone it to your local machine from there.<\/p>\n\n