TheFrontEnd๐Ÿ”ฅ
10.6K subscribers
275 photos
56 videos
8 files
532 links
๐Ÿ“ Articles
๐Ÿ—ž News
๐Ÿ‘“ Tutorials
๐Ÿค” UI/UX thoughts

on front end๐Ÿ’ก mobile๐Ÿ“ฑ and web dev ๐Ÿ–ฅ

Admin: @masant1
Download Telegram
Is there such a thing like a clean code?

Have recently seen an interview from some of the Yandex developers๐Ÿ”ง, who were arguing whether such thing even exist.

Some argued that the code needs to be functional, some said its just need to be understandable and maintainable, others were happy if you simply don't have a 'running away instinct' ๐Ÿƒ๐Ÿปโ€โ™‚๏ธ when you see the code.

Here is a quick list ๐Ÿ“‹ on what you should consider when writing a code:

๐Ÿ‘ฅ If you working in a team, your code needs to be easily understandable

// Commenting your code doesn't have to be too extensive. Simple and easy to understand code is better than loads of comments

โš–๏ธ Keep your functions small and avoid duplication

๐ŸŽ› Try to break down the project into a large number of components

๐Ÿ•น If and Switch statements can be easily broken down in separate functions and look much cleaner

๐Ÿ’ก Convenient variable naming is an absolute must have (no 'var y', please)

๐Ÿ”ฅ Follow best practices and SOLID principles

๐Ÿ” Use code checker tools like SonarQube and prettifiers like Atom-beautify

Below is a quick article to extend some of the above points.

๐Ÿ‘“Read time - 6 min

What are you more interested in the future?

๐Ÿค“Learning Material
๐Ÿ’ŽCool Effects
๐Ÿ“ˆAnalytics
๐Ÿ“ฐDev News
One example on how you can make your code clean in React with stateless components
I absolutely love when new start ups bring convenience and change into conventional industries.

Have been using Revolut for over a year now and moved all my family and friends to it.

Best parts:
๐Ÿ’ŽAmazing interface and design. The app works like a charm.

๐Ÿ’ŠGet me medical insurance every time I need to apply for a visa

๐Ÿ‘ฎ๐Ÿปโ€โ™‚๏ธVirtual disposable card for internet purchases (it is secure)

๐Ÿ”„Easy transfer of money for sharing bills with friends

๐Ÿ’ฑVery decent rates when you travel abroad

๐Ÿ’ฐWell, you can also easily buy/sell crypto (if you are in this kind of thing)

From my experience, it has really outperformed HSBC, Barclays and Lloyds (which are giant banks)

The least, I think everyone should do is check their app design and if you don't need a new bank card in your wallet, simply check it out to see how it should be done in every other bank.

https://bit.ly/2wEOEuM
This media is not supported in your browser
VIEW IN TELEGRAM
Was collating a post with a list of usefull components in CSS/SVG/JS and found this challenge for you.

Tower of hanoi - built fully in CSS. Try to move all disks to the right to tower๐Ÿ”ฅ
Collection of beautiful effects in CSS/SVG/JS๐Ÿ’ก

We can only learn best by reviewing and understanding code from other people.

The following list includes some interesting components and the way for you to bring creativity in your web projects. Have a look and try to understand some of the code snippets.

https://teletype.in/@thefrontend/rkX2CFO0G
Cooking with JS asynchronously๐Ÿ”ฅ

A bit of learning material for you, guys.

What the hell are callbacks, why do I need to promise anything, what's all the fuss about async/await stuff?

If you have ever asked those questions yourself. Here is a quick recipe how to not get confused.

https://teletype.in/@thefrontend/HyQyhqiCM
โ€‹โ€‹Recently Adobe's UI/UX tool - 'Adobe XD' got a free version available for everyone.

Here is a nice article comparing Adobe's solution with Sketch.

While the article mainly supports the Sketch for designing your UI, the Windows users might give it a proper competition with Adobe.

Which one do you think will have more users in 5 years?
๐Ÿ–Œ Adobe XD
๐Ÿ’Ž Sketch
This media is not supported in your browser
VIEW IN TELEGRAM
Choosing between Progressive Web Apps, React Native and NativeScript in 2018

#pwa #react #web
This media is not supported in your browser
VIEW IN TELEGRAM
How To Create Your Very Own Facebook Messenger Bot with Dialogflow and Node.js In Just One Day

#JS #Messenger #tutorial

๐Ÿ‘“Read time: 14 min
โ€‹โ€‹13 Interesting points from Google's JS style guide

You should stick to spaces over tabs, use ; all the time, move preference to arrow functions (x) => {, use template ${strings} instead of concatenation. And other noteworthy points to consider.

What do you use when coding: Tabs or Spaces?
๐Ÿ”ต = Tabs
๐Ÿ”ด = Spaces
โ›”๏ธ = I don't code
โ€‹โ€‹The Slow Death of Internet Explorer and the Future of Progressive Enhancement

A pretty big issue in front end and web dev is to ensure everything works great on all broswers, but while Chrome, Opera and Firefox constantly fire new features, IE and Safari only seem to play the catch up game.

What to do and where it will lead us.

๐Ÿ‘“Read time: 10 min
โ€‹โ€‹Well, our community is growing very fast.
2000 in exactly 1 month ๐ŸŽ‰.

Thank you all for keeping engaged. While I am openning a bottle of champagne ๐Ÿพ - do message @masant1 to share any specific thoughts on what you would like to see in the channel, as it should be a dual-way relationship!

Keep it tech related and whether its pure front end or extension to some back end tools and general dev - it can get accomodated๐Ÿ”ฅ.
13 Creative ways to promote your app for free

Quite useful thing to do when your 'Next Big Thing' is ready๐Ÿ’ก

A nice article that helps you to push your app to the market

#app #marketing
โ€‹โ€‹Learning course for Bulma ๐Ÿ„ CSS framework

If you haven't heard of Bulma yet, definetly give it a shot. Its based on Flexbox and gives you full responsiveness, fast and modern modularity.

It is opinion free (unlike Material) and based on CSS only, so that it can be easily integrated with Vue, Angular, React, Ember etc.

Final projects with Bulma look really clean and professional.

website - https://bulma.io/
free course - https://bit.ly/2Ieo39p
This media is not supported in your browser
VIEW IN TELEGRAM
JS and CSS library for smoothly transitioning numbers๐Ÿ”ฅ

#JS #css