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
I have recently questioned myself on best ways to implement drag and drop functionalities.

Many clients are seeing it as a 5min deal or 'just make it moveable'.

Sounds so simple, isn't it?๐Ÿคทโ€โ™‚

Decided to share a few resources I found along the way.

Since I currently work with React, the below resources are mostly linked to it. However, I am also sharing JS and HTML5 ways.

๐Ÿฆ‡React-dragula - an official react wrapper for React. The simpliest solution so far. Dragular - is the same thing for those who wants to stay independent of React.

React-beautiful-dnd - a more customisable approach, which has better animation, works with mobile and horizontal DnD. As a compromise, it is a bit harder to implement, but the guys did an awesome free video tutorial that even includes React set up. Plus have a look at their examples

If you the person who needs max flexibility, don't look any further React-dnd is probably the most customisable out of all.

And finally, for the oldschool people here HTML5 version its deadly customisable, but as you can guess you will have to spent some time writing it from scratch.

Now you can have your own Trello board and show off to your friends๐Ÿ˜‰.

๐Ÿ’ญ 'lets use my own Trello board'
โ€‹โ€‹If you tired from coding, here is a cyperpunk film recommendation ๐ŸŽฌ

Cyberpunk is popular in 2018, what can I say๐Ÿคทโ€โ™‚

Upgrade - 7.7/10 on IMDb, Netflix knows what its doing๐Ÿ‘
โ€‹โ€‹If you somehow missed it from other sources, here is a great tool to end up 'which font to use' discussion.

Fonts that most successful start ups are using icons8.com
โ€‹โ€‹โ€‹โ€‹Collection of mash gradients in every adequate format. Enjoy ๐Ÿ”ฅ

The guy is a UX guru and has lots of stuff (but not always for free๐Ÿคทโ€โ™‚)
A very thorough, well written comparison of building the same thing in React and Vue.

If you wondered how different are those two, have a quick read.

๐Ÿ‘“ Read time: 13 min
โšกInstant read
This media is not supported in your browser
VIEW IN TELEGRAM
Lazyload.js - JS library that loads images โ˜๏ธ only when they are in the viewport and remain there.

Only 350 bytes ๐ŸŽˆ
Google Instant Apps

Its been a while now since Google released its new approach to launch apps without downloading it โšก.

Has it been extremely popular for the past 2 years? Well, not really๐Ÿคทโ€โ™‚. I haven't seen it being used too heavily yet.

While it is a faster alternative than the standard app, some people might not have a 'lighter version' of the app for Google to catch it.

It did allow AR no so long time ago to be launched through the instant app, which is pretty cool though๐Ÿ‘.

But I do have questions regarding speed when it comes to PWA and Instant Apps. If you want to see such comparison and see where Instant Apps can actually benefit, vote below.
Instagram problems
#complain #dislike #thoughts

There is a huge problem that I see with Instagram. While it does an acceptable job with UI its UX is massively damaged.

Its supposed to be a platform where everyone can share photos (well, now videos and stories as well). The sharing mechanism by definition means that I can (try to guess) - share content with friends/people.

However, if a channel posts something nice and I try to share it, its vert likely that the person I shared it with won't see it right away.

Yes, if the group is private they will have to:
1. Click on the post
2. Follow the group
3. Wait till they get accepted
4. Revisit the post

Seriously?๐Ÿ˜ณ

4 steps to view shared post? Tell me about terrible UX.

Think of telegram as an alternative. Imagine there is a channel only with photos. I can easily share it in 1 click and the user will see it straight away.

โ˜๏ธBut where there is a problem - there is always an opportunity.

The next person who creates a bot or a service that allows easy sharing from private groups - will nicely disrupt instagram and might make a good bunch of ๐Ÿ’ฐ (Instagram might even buy it, who knows)

What do you think?

๐Ÿคฎ They could do a better job
โค๏ธ Instagram forever
This media is not supported in your browser
VIEW IN TELEGRAM
Great article for beginners, who want to get into building telegram bots ๐Ÿค–

Shared by our subscriber @daniel_alberto_luna
โ€‹โ€‹Dual-way relationship

I believe the only way to build a strong community is to give people a word ๐Ÿ“ข

One person physically cannot outperform the community's strength๐Ÿ’ช.

Some of you have contacted me with suggestion to create a chat so that everyone can contribute.

This, unfortunately, is something that usually end up with spam, unrelated material or simply google/stackoverflow questions (that have been already answered) ๐Ÿคทโ€โ™‚

Thus, I gave it a good thought and decided to create a quick bot ๐Ÿค– where people could post useful and cool material/links that will get posted in the channel (well, after I approve it - to avoid ads and unrelated stuff).

The generated posts will look like the attached pic ๐Ÿ‘‡
Thinking of creating an experimental weekly posts for learning programming

Each week will post a selected material on specified topics that can help you get into development fast.

Those who are already devs can simply extend their skillset with this.

The current draft structure is the following:

1. Quick Java + IDE
2. Basic Java programs
3. Git
4. Databases
5. What the fuck is Python and why everyone is so hyped about it?
6. JS and web development
7. Algorithms (it is important, guys)
8. Quick data structures
9. Frameworks + mobile/soft/web dev

Might also include some basic Computer Science topics to get you experienced.

The question is are you, guys are even interested in this?

Or maybe have proposition to include specific topics.

Starting 9 weeks of constant learning?
โ€‹โ€‹Sketching is a huge part of prototyping. It is pretty common to draw your UI on a piece of paper or whiteboard before moving it into XD, Sketch, Axure etc

Microsoft attempted to create something phenomenally cool this time - AI based recognition system for your sketches!

Take a photo and it will convert it into a prototype with ability to export in HTML, XAML or UWP.

Have a look at their 2min video and check their website directly.

Kindly shared by our subscriber @Richner
This media is not supported in your browser
VIEW IN TELEGRAM
Materializecss - nice material based framework. In addition to standard components it also has JS presets like carousel and parallax๐Ÿ”ฅ.

Shared by @Abfelbaum
animation.gif
9.9 KB
JavaScript.info - those of you who want to start getting into JS, don't avoid this resource. It has a great list of tutorials.

shared by @Deus33
Great article on the 7 rules of a great commit message or how to make people like you. Must read ๐Ÿ‘“
Appsco - great selection of the best progressive web apps. Find something for yourself without downloading hassle๐Ÿ”ฅ.