Custom Component Video Course With Me

Announcements
1

Dear All,

As you all know it has been a tough year for everyone, with a world pandemic and all. I have personally been put on furlough until the 11th of January next year. It is tough times and to try and boost morale in these tough times, I have now produced a video course starring me and only me in it, which guides you through the whole process of creating a custom component from start to finish and all of the steps I take to create these custom components. I have published 96 custom components to the marketplace, whilst being a member on this forum I have built components that people have requested. So help a brother back, and buy this video series, so you to can create custom components:-


TypingIcon
I set this at a very reasonable price of £20 I don’t have professional video recording studio but the videos are all good quality, and guide you through the whole process from start to finish :grin:
This module is now on the marketplace https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDTyping more info here https://psdevuk.github.io/ud-flix/Video-Course-With-Me/
3 Likes
2

Just wanted to say this video series is great! Not only does it explain how custom components are built from the ground up, but step-by-step how to add additional functionality and styling. There’s a bunch of good tips that you would only find out with the experience of building dozens of components so I feel this is really going to give me a good head start in creating some awesome components myself!

Anyone interested in building components for UD should get this course, it pays for itself in the amount of time it will save trying to figure out how to do it all from scratch.

Kudos to @psDevUK, great work :+1:

2 Likes
3

Thank you so much @tom.obrien for leaving a positive feedback on this first ever video series I created. Sadly this hasn’t got other people rushing to buy this just yet. But hopefully if others read your review and for the asking price of £20 hopefully they will see this is a bargin price for the 14 videos the amount of play-time and example files in the download. Thanks once again Tom.

Not to call out any names but @OpsEng , @somecoulombs , @dank42 , @ollie.g , @mcmaguire , @cadayton , @MaCCa , @Mordecai , @RomPhreak I know I been in contact with all of you in one way or another about custom components, so if you do fancy a complete series from start to finish on how to achieve this for a small price tag please do purchase my course :grin:

2 Likes
4

Also , @augustin.ziegler , @cprogramer84 , @insomniacc , @PorreKaj , @mkellerman , @mylabonline , @neo , @DavidB , @TheAlbionist , @stoni1989 I could not mention too many people in one post, but again I know I have been in contact in the past, talking or helping with custom components, and this video course could show you the light on how to build these. Help publish some more fancy components to the marketplace :grinning:

5

Just saw this, I’m eager to check it out as it’s something I would be interested in to take my development to the next step and while I could probably put the time in and get there on my own, paying for this content will simply kick start that and save a lot of time, I trust that it will be good, you’ve put a lot in to this community and we’re all very grateful!

I will drop you any feedback once I’ve been through the content and let you know how I get on!

1 Like
6

Looks like my day tomorrow has just changed… @psDevUK superb idea!

1 Like
7

@psDevUK just an idea but aside from the component built in the course, in your experience building components do you have a couple of examples that were relatively easy to build that could be used as practice? I know there’s the kawaii ones which are nice and easy but maybe something with a couple of extra params to configure :slight_smile:

8

Hi @tom.obrien sure, I mean this particular component:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDFileIcon which I got from https://www.npmjs.com/package/react-file-icon didn’t take to long to build. And has a fair few good PROPS associated with it:-

Property Type Default Description
color string whitesmoke Color of icon background
extension string undefined Text to display in label
fold bool true Displays the corner fold
foldColor string undefined Color of the corner fold
glyphColor string undefined Color of file type icon
gradientColor string white Color of page gradient
gradientOpacity number 0.25 Opacity of page gradient
labelColor string undefined Color of label
labelTextColor string white Color of label text
labelUppercase bool false Displays the label in all caps
radius number 4 Corner radius of the file icon
type enum undefined Type of glyph icon to display (One of: 3d , acrobat , audio , binary , code , compressed , document , drive , font , image , presentation , settings , 
        <FileIcon
          color={this.props.color}
          extension={this.props.extension}
          fold={this.props.fold}
          foldColor={this.props.foldColor}
          glyphColor={this.props.glyphColor}
          gradientColor={this.props.gradientColor}
          gradientOpacity={this.props.gradientOpacity}
          labelColor={this.props.labelColor}
          labelTextColor={this.props.labelTextColor}
          labelUppercase={this.props.labelUppercase}
          radius={this.props.radius}
          type={this.props.fileType}
        />

The speech bubble one could be rebuilt to look completely different https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDSpeechBubble I found this project here https://www.npmjs.com/package/toasted-notes
I also did this component a good time ago here:- https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDNumber but this has quite a few props you can add and not a lot of dependencies to build it https://www.npmjs.com/package/number-counter look near the bottom of that page to see the table containing all the props

Name Type Description Default
start number Starting value of counter. start={0}
end number Ending value of counter. end={10}
className string CSS class name of element. null
delay number Duration in second. 2s
preFix string Append text before counter value. null
postFix string Append text after counter value. null
reverse boolean Count downward. false

Hopefully this gives you some ideas :grinning:

Finally this one I did https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDMorph which I think looks super cool, has quite a few parameters:-

 <LetterMorph
          words={this.props.words}
          colors={this.props.colors}
          height={this.props.height}
          width={this.props.width}
          fontSize={this.props.fontSize}
          fontUrl={this.props.fontUrl}
          period={this.props.period}
          speed={this.props.speed}
          steps={this.props.steps}
          lineWidth={this.props.lineWidth}
        />

This can be found here:- https://www.npmjs.com/package/react-letter-morph and here is a list of all the dependencies you will need

react-letter-morph
gsap
lodash
opentype.js
prop-types
react-style-proptype
string.prototype.codepointat
tiny-inflate
loose-envify
object-assign
react-is
js-tokens
1 Like
9

awesome that’s great thanks for that! I’ll give them a go :slight_smile:

1 Like
10

Hey Adam

Thanks for tagging me and getting me back to the community here, I’ve been away from UD for several months but glad to be back and looking to putting in some more time into my project.

Does the course material work with the latest Universal suite? Looks quite interesting and I’d love to give it a go :slight_smile:

1 Like
11

Hey @MaCCa thanks for responding. So I recently published a timeline post component and Adam kindly tweeted it worked fine on Powershell Universal. Other people have been using other components in Powershell Universal without issues. This shows you the older style class based component and not the newer react hook function way that is blogged about on Ironmansoftware I need to do a prerequisite video happy to DM you this as not too much involved the course covers all steps and I’ve put 17 additional component files on the course which give you template building blocks. I will be adding more content. But already includes 14 vids and 17 additional components and I will add more on Monday as I really want to inspire others to build components

12

I can also confirm that all components I have tried work on Universal v1.5.3 with UD 3.2.1 framework. Timeline is just one of many I have tried and really is superb.

1 Like
13

Definitely something I’ll be looking at purchasing, thanks for providing great content for us!

1 Like
14

@psDevUK Thanks for all your unselfish contributions to the this forum. I didn’t have to think twice about supporting you. I’ve had to step away from UD for family health reasons, but should be getting back into it soon.

2 Likes