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
Before you all clicked "we don't deserve", I want to share this cool dark UI. This slightly touches my point on gradients.

That's fucking awesomeπŸ”₯
This media is not supported in your browser
VIEW IN TELEGRAM
Adding on our discussion (more like my own monologue) on gradients. Trendy Gradients in Web Design elaborates a bit on this, shares some good cases and also provides a list of tools that can help you easily create cool CSS gradients in your development.

Save it. It's better than having 6 separate tools as posts in the channel πŸ˜‰
​​Alrighty, goodness 10/10 in the house. As promised sharing with you a really good online chapter on Building your colour palette from an amazing book that a lot are talking about right now.

If you ever design interfaces - thats like a must, proper guide. What to avoid, how it needs to be done when generating colour scheme for your product.

This chapter is from the book Refactoring UI and it goes for 80$, which is ridiculous for the book in my opinion, but people are willing to pay as it does cover years of experience and in long run it saves you massive time and errors. It got 1.6k upvotes on ProductHunt in less than a weekπŸ˜‚

The point is, read the freaking chapter at least πŸ”₯
7 Rules for Creating Gorgeous UI (Part 1)

For those who haven't seen it yet.
πŸ‘“Read time: 14 min
​​PowerPoint sucks?

Regarding the UI and specifically presenting your stuff to clients/partners/moms.

If you ever had a feeling that PowerPoint looks shitty and thought to yourself that clearly there should be a person that might have created something nicer, look no further.

Not so long time ago I have seen people doing amazing presentations in readymag. It looked really cool, interactive, modern and more importantly didn't have typical .ppt problems (and it has a lot).

It's pretty powerful functionality-wise and can easily create landing-like presentations, especially when you need something sleek and snappy.

Just a few examples:
Check it from desktop only

App presentation
Product presentation
Service presentation
Even annual report
or a personal portfolio

πŸ”₯ Nice one
πŸ’¨ PowerPoint forever
πŸ‘“ I use Paint for presentations
Time to step aside from hard, intensive coding and discuss one important thing.

Ideas

I am a strong believer that you must write down every single idea that you come up with. Regardless how crazy it might sound at first. This lets you create a long list of potential ones to test your dev/entrepreneurship skills.

On this note, I recently found a guy, who very reasonably think that current social networking is waaay far from ideal. Too much ads, no proper system to promote good quality content and degrade spammers and trolls.

As a matter of fact, he decided to attempt it and create a project called userHUD developing with modern stack and with gamification concept in mind.

Personally, I appreciate when people think about improving the way that things currently work, especially awesome that this guy shares everything in his newly created channel, mainly to motivate himself and get committed.

All I can say, is that it is a great way to track in Live how interesting project is being developed.

Sharing a link for you here - @userhud

PS and yes, it is in RussianπŸ€·β€β™‚οΈ, it is not my fault that the good initiative comes from those areas. If you know anything similar in English-speaking community definitely give me a shout. I am more than happy to share good stuff here with everyone.
​​Frontend Competition

Right, so I now have the book.

While I'd love to share it with everyone that's a bit piratic.

Let's make a small 1-week marathon. Invite your friends, who might be interested in this channel and ask them to share your id with me. I'll share the pdf of the book with the top 3 participants (the ones that invite the most)

Guide:
1. Shoot for πŸ”₯
2. Invite friends and make sure they mention your id
3.PROFIT. Get the book for free.

Results will be published on the 28th dec. 12:00 GMT. Just nice to get your Christmas presents readyπŸ˜‰
Oh yes, your friends can also partcipate. If one of them wins - you also get the copy of the book.

You can read a bit more on the book here: https://refactoringui.com/book/
☝️ That's probably the best way to motivate people update their telegram
​​So Christmas and New Year's celebrations are done, looks like it's just the right time to set proper achievable goals for 2019.

For this channel the goal is nice and simple - 6k subs by the end of the 2019. Let's see how it goes.

Thank you to all of you for keeping it engaged and interesting for both myself and you.
This media is not supported in your browser
VIEW IN TELEGRAM
Nice tip for those who didn't know. Apart from you favourite console.log, you can also you use console.table for printing out objects in a nice, more visual format
JS asynchronous iterators

Something that many people still don't use in JS programming are async iterators. Typically before the ES2015 was introduced you would use for, for...in, while and methods like map(), filter(), forEach(), but there is also iterator interface, check the below example:

const arr = [10, 20, 30];

const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // 10 console.log(iterator.next()); // 20
console.log(iterator.next()); // 30 console.log(iterator.next()); //undefined


The next() method returns an object with 2 properties: value (10,20..) and done (true, false depending if its the end or not). Should be self explanatory from the code snippet, but you might be thinking "so why the hell not use for or while ??!🀯".

☝️The interesting thing happens with ES2018 and their Symbol.asyncIterator which returns a promise that fulfills value and done.

If you haven't heard of this before, but can already feel the benefit check the full description with examples here
Help us be better

If you think this channel is useful and you like some of the content, please give it a πŸ’™. Thank you🀝

https://t.me/tgdrbot?start=thefrontend
This media is not supported in your browser
VIEW IN TELEGRAM
​​Wireframing thoughts

Recently asked myself a question - out of all those things like Sketch, inVision, Axure, Framer, paper sketches, .ppts - is there a fast way to create an interactive wireframe/prototype that can visually showcase your idea very quickly?

Let the AI do it - was my first thoughts, so I went on to test out skecth2code and uizard.io.

The first one turned out to be pretty cool, but raw - the neural network couldn't even correctly recognise and transform some of their own sketches. And the second one is still in beta with no current public access.

Then how?

Well, I ended up finding an awesome combination with Adobe Comp + Marvel.

The comp thing let you draw wireframes on a tablet (iPad in my case) with really simple gestures. The whole UX is similar to paper sketches, but just better as you can make full colored UI with it. Plus they have free market with tons of usable components. First time I even thought there is something easier than paper sketch.

Marvel, on the other hand, allows you make your static pages interactive with nice transitions.

Morale of the story

Keep trying and testing new things, it always end up being a useful experience.

And go check those, they might make your life really simple at some point. Didn't pay a penny by the way.
Some cool stuff

You probably noticed how the channel got less active after the new year celebrations. Want to compensate a bit and share something usefull for the community.


Therr is a great service for all you wonderful design aspirations - evernote.design

Here is a few links to my favorite services from it.

❀️ Design inspiration

πŸ’° Free UI resources

πŸ•ΆοΈ Learn design here

πŸ“± Wireframing

βœ’οΈ Typography

πŸ“— Design books

Regarding the book, already shared the Refactoring UI with the winner of the contest. Let me know if any of you also want it and we see if we can make another competition on something.

Definitely save this list, it will be handy at some point, I'm telling you.