blog.webmaestro.frEtienne Baudry - World Wide Web Developer

Etienne Baudry World Wide Web Developer Menu Blog About Contact Posts Posted on March 1, 2018 February 18, 2018 Raspberry Pi MPEG Transport Stream Capture Raspberry Pi Camera output, convert and stream video, decode and play in browser. The repository is available on GitHub . Posted on February 23, 2018 February 23, 2018 Time Ago” React Component to display Timestamp as formatted String Hey fellows, There are many ways to display a Date or a timestamp , but the often appropriate is to show the elapsed time in a readable format. So I drafted a little React component that takes a number of milliseconds for props and turns into a string of relative seconds , minutes , hours , days , months or years . import TimeAgo from ’../components/TimeAgo’; const date = Date.now(), tests = [date - 6789, date - 456789, date - 23456789, date - 123456789, date - 9123456789, date - 89123456789]; return ul{tests.map((timestamp, key) = li key={key} TimeAgo timestamp={timestamp}/. /li)}/ul; 7 seconds ago . 8 minutes ago . 7 hours ago . 1 day ago . 4 months ago . 3 years ago . The component gives a time element with a datetime property. time datetime="2018-02-22T00:21:08.005Z"1 day ago/time The code is fairly short and simple, and is available on GitHub as susual. ? Posted on February 19, 2018 March 10, 2024 Reddit API Front-End on React Good morning everyone, Reddit is an American social news aggregation, web content rating, and discussion website. And it opens a cool API to engineer your own front-end. So here comes my take on it : http://reddit.webmaestro.fr . It basically fetches JSON data, parses image and video sources, embedded players or templated content and turns it into optimized React components. The design is minimalistic and based entirely on Semantic UI . https://blog.webmaestro.fr/wp-content/uploads/2018/02/reddit-1.mp4 With iframes , video players and heavy GIFs mixing over infinite scrolling , the main idea was to mount and unmount components depending on their visibility . And it was just too easy with react-lazyload . I had some fun setting the volume of videos in relation to their position on the viewport. It works pretty well, try it out ! Posted on February 6, 2018 February 23, 2018 Slide Up and Down with React Transition Group Some UI effects are very simple, yet difficult to achieve. I already solved the vertical slide dilemma with jQuery , but I needed to implement it for React Transition Group. When items are entering a list, we want them to fade in and smoothly slide the surrounding elements away, instead of brutally shifting our interface. https://blog.webmaestro.fr/wp-content/uploads/2018/02/slide-transitions.mp4 Transitions work by easing from one initial value to an other defined one. The problem with vertical sliding is that most HTML element containers do not have a predefined height, but rather auto adapt this value to fit the content. Therefor, it is quite tricky to animate the entrance of randomly sized blocks without jumping stroboscopically into the margin , padding and box-sizing soup. My approach is to use the CSSTransition component callbacks to animate a negative margin and slide our items from the top. The code is available on GitHub . Posted on February 4, 2018 February 5, 2018 Terminal Window React Component with Keystroke Sounds Yup, you read that right. Here is a React component that will mock an OSX Terminal window, and play keystroke sounds to simulate typing. See the demo at http://keystrokes.webmaestro.fr . If you listen carefuly, you will notice that space” and enter” keys even have their specific sounds ! The audio samples were created by my homonymous friend Etienne . Together we have some more JavaScript sound design exercises in mind so stay tuned. The window is pure CSS and SVG. The console uses my favorite Fira Code monospace font. It is also based on my actual ~/.bash_profile : export PS1="\n[\e[0;31m\w\e[m]\n|" . It was made in the building process of a portfolio that should be available to you soon. You can find the component code and CSS on GitHub . Posted on January 20, 2018 February 4, 2018 Javascript String File Size from Bytes Integer function formatBytes(bytes) { if (0 === bytes) return ’0 Bytes’; const sizes = [ ’Bytes’, ’KB’, ’MB’, ’GB’, ’TB’, ’PB’, ’EB’, ’ZB’, ’YB’ ], s = Math.floor(Math.log(bytes) / Math.log(1024)), size = bytes / Math.pow(1024, s); return `${size.toFixed(2)} ${sizes[s]}` } Posts navigation Page 1 Page 2 … Page 8 Next page Archives March 2018 February 2018 January 2018 December 2017 November 2017 October 2017 May 2015 April 2015 January 2015 October 2014 May 2014 March 2014 February 2014 September 2013 July 2013 April 2013 March 2013 January 2013 September 2012 August 2012 July 2012 June 2012 May 2012 Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use. To find out more, including how to control cookies, see here: Cookie Policy Tags 3D Access Point Angular API Bootstrap Communication CSS Desktop Application Electron ES6 Facial-Recognition Front-End Geolocation Google Maps Internet of Things JavaScript jQuery LESS Material Design Parallax Path Finder PHP Python qTranslate Raspberry Pi React Reddit Redux Sass Search Engine Settings Sound Design SVG Three.js UI websocket WordPress GitHub Twitter LinkedIn Proudly powered by WordPress Loading Comments... Write a Comment... Email (Required) Name (Required)...