View your favourite content on the SteemMakers website
SteemMakers is a community which focuses on uniting, helping and rewarding makers and DIYers on the Steem blockchain. You can find more info about us and how to contact us on our website www.steemmakers.com.
Video support
Makers very often make videos about how they make something or how what they have made functions. Video is an essential functionality. It took a while to come to this point but now we finally can read blog posts on our own website and video is supported as well. We support the most popular ones that are also supported by steemit and busy. DTube and DLive were the easiest ones because they link to their own websites. Youtube was a bit more tricky because those are shown on the website itself.
Security comes first
In my last update I briefly explained XSS. Adding new features to the website required further effort in this aspect. We now have all the same security features in place as steemit, even more stringent in some places. We verified this with busy as well to be on the safe edge.
Embedding the YouTube videos is done with the iframe tag which allows showing external content on a website. This makes it sensitive to create all kind of security holes allowing third parties to inject their nasty stuff. As an example someone could post an iframe like this:
<I FRAME SRC="javascript:alert('Got you!');"></IFRAME>
Instead of a simple alert they'd probably use some malicious script. One of the checks we have put in place to prevent this from hurting you is to only allow youtube with lovely regexes like this:
sourceAttribute.match(/^(https?:)?\/\/www.youtube.com\/embed\/.*/i);
Styling
Fluid design and mobile first have been keywords from the beginning for our site. A lot of makers use their phone to look up information on the go so we want to make sure it displays as good as possible on all screen sizes. Video is not as easy to scale as for example text and images. I resorted to a well known trick to get this working.
Live
We're now sufficiently happy with the security and features to release this new feature on our website. You no longer have to navigate away to steemit or busy to read your favorite content. Head over to www.steemmakers.com and have a look for yourself.
What will come next?
Some time for chatter, some reflection and adding some details to the articles. We don't show the author name, posting date, etc. Also the article preview needs some updating. Or maybe the bot, who knows, lot's of fun stuff to do, too little time to do it.
Help us out
Anyone interested is free to join and help out, all work is available on Github. More information can be found on our website www.steemmakers.com, have a look and join us on Discord!
Utopian proof of work: commit.
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. Your regular expression does not match youtube URLs like
https://youtube.com/babablaorhttps://m.youtube.com/babablaNeed help? Write a ticket on https://support.utopian.io.
Chat with us on Discord.
[utopian-moderator]
Thank you for the attentive reading. You are correct. I only told half the story, basically venting regex frustration. Once they work they are so very usefull but they can be so tricky to get right.
The bigger picture is that the code first searches for youtube urls and extracts the video id to then make it's own url out of this for consistent representation. That one is a bit more complex:
let videoID = link.match(/(?:(?:youtube.com\/watch\?v=)|(?:youtu.be\/)|(?:youtube.com\/embed\/))([A-Za-z0-9\_\-]+)/i);I chose to stay as close as possible to the logic condenser uses because that is still the main interface and since articles can't be written on our site we need to display content in a similar way to condenser. Busy follows the same idea, they also mimic the condenser code and explicitly refer to it (as do we)
Wow that's awesome i can't wait to explore this, well done @jefpatat
Thank you, I hope you enjoy it!
Sure!! I really do, looking forward to the next updates.
Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 13 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.
I upvoted your contribution because to my mind your post is at least 7 SBD worth and should receive 46 votes. It's now up to the lovely Steemit community to make this come true.
I am
TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!Have a nice day and sincerely yours,
TrufflePigHey @jefpatat! Thank you for the great work you've done!
We're already looking forward to your next contribution!
Fully Decentralized Rewards
We hope you will take the time to share your expertise and knowledge by rating contributions made by others on Utopian.io to help us reward the best contributions together.
Utopian Witness!
Vote for Utopian Witness! We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.
Want to chat? Join us on Discord https://discord.me/utopian-io