Importing an image in React is like importing a module. I’m rooting for Microsoft to catch up with Edge on that front. Chrome has been getting a lot bad press lately for the bloated browser it has become, but it’s the best when it comes to its developer tools. React’s plugin for Chrome also bumps the level of transparency of the objects you work with. It’s one of the few projects where I’ve actually used proper debugging techniques rather than just print statements, as it actually works. The integration with Chrome Debugging essentially seals the deal. I can officially say it’s taken over Sublime as my primary editor for over a year now. The editor ships basically with all you need out of the box, absolutely minimal setup required. The ecosystem, proving once again, is the key to success, the amount of useful plugins the Visual Studio Code Marketplace offers is great. I can’t stress this enough, if there are 2 things that convince me that Microsoft understands developers it’s TypeScript and Visual Studio Code. Outstanding Visual Studio Code & Chrome Debugging None of them offered a mode to show the browser navigation on iPhones for example to see the actual viewable height and width in a Mobile Safari, they all assume you are building an app that will use the entire screen’s estate. Edge still offers some ancient Windows Phones as previews, while Firefox’s preview is so limited in functionality, it feels like they just reduced the screen estate and that’s it. On top of that, the only browser that has proper Mobile Preview support turned out to be Chrome. If you don’t have proper CSS design from the start, these queries will not save you from your poor CSS design practices. If you cover iPhone X to display correctly, somewhat the iPhone 6 layout messes up. The thing I’ve never worked with before was media queries. Best of luck setting the margin and padding correctly to have the thing scale proportionately on multiple screens. Sometimes it feels like you need a PhD in maths to get the proportions right, 40% of the 70% of the 100% of the View port. The fact that there is an entire flow-chart-like page dedicated to centering on CSS-Tricks, shows the age-old problem of centering stuff correctly. Being obsessed about pixel perfect position doesn’t help either, at one point you have to cut your losses and pick 2 browsers and platforms it shows well and the rest to be on best effort.Ĭentering a relative dimensions DIV is still an achievement, even in 2018 The only blessing was the Chrome’s console and showing the applied styles. This was the only time I consider wasted from the entire effort spent on the project. My pain this time around was Firefox, which doesn’t render empty lines, so I had because of 2 empty lines to re-write padding and margin specifics for an hour to make it look consistent. Ironically, my new favorite browser is Edge. It does require to edit the default packaging configuration to make the CSS-styles component-wise. React and JSX has somewhat helped alleviate the struggle. However, managing styles per component and multiple pages is the easiest thing to get out of hand. There are nicer things, like transform, etc. I still hate CSS and Cross-browser supportġ2 years since I first embraced web development and it feels like CSS has just piled up on the mess it already was. In Angular you are presented with the deep end from the start, so it takes longer to learn how to pass data correctly between components. If you want to go advanced and modify behaviour based on lifecycle hooks, you can go it. The reason I think it’s easier to pick up is its structure to pass data back & forth between components. I didn’t use any other direct dependencies. I used React DnD (Drag & Drop) and Material UI packages, to keep the styling nice. The other thing is, at the moment it does have the most lively ecosystem of packages that extend it. It feels like it’s endorsing the NodeJS philosophy one step further, it is also the younger framework, which explains it. I found React to be much easier and faster to pick up and get from 0 to usable level than Angular. It was ideal for my purpose and was suitable for playing on a phone.Īfter finishing the 200+ lectures on React, Redux, React DnD, reading quite a bit of documentation and Stack Overflow and 3 weeks of after work playing around I finished the game. So browsing through old games from my childhood I stumbled upon Peg Solitaire and Tower of Hanoi, so I picked the Peg Solitaire. I got the online course on React on Udemy from Max and wanted to build something simple but in the same time useful. The next stop after the IvoTetris Game built in Angular and TypeScript, was React and ES6. On my journey to try out new technologies and languages, If you want to play the game – Ivo Peg Solitaire, it’s available here:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |