Refreshing Your UI with HTML5, Bootstrap and CSS3
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Refreshing Your UI with HTML5, Bootstrap and CSS3

  • 33,563 views
Uploaded on

Many startups and open source projects have the luxury of starting greenfield projects. Unfortunately, the corporate world rarely works this way. It's more maintenance coding and a few new features......

Many startups and open source projects have the luxury of starting greenfield projects. Unfortunately, the corporate world rarely works this way. It's more maintenance coding and a few new features every now and then. This session covers how you can use three of the hottest technologies (HTML5, CSS3 and Bootstrap) to spruce up a legacy application. It describes a real-world situation where a redesign was implemented in a few short weeks, making an old site look brand new. It also does a deep dive into Bootstrap, explains LESS, and shows pitfalls with older browsers. After this session, you'll be motivated to integrate Bootstrap into your applications and turn that legacy UI into something sexy!

See blog post about this presentation at http://raibledesigns.com/rd/entry/my_bootstrap_presentation_from_html5.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
33,563
On Slideshare
9,015
From Embeds
24,548
Number of Embeds
62

Actions

Shares
Downloads
886
Comments
0
Likes
46

Embeds 24,548

http://raibledesigns.com 22,017
http://css.dzone.com 1,159
http://www.raibledesigns.com 778
http://www.oyous.com 170
http://raible18.rssing.com 59
http://thangaraj80.blogspot.com 40
http://www.newsblur.com 30
http://localhost 23
http://thangaraj80.blogspot.in 21
http://newsblur.com 20
http://www.mybestcv.co.il 17
http://www.linkedin.com 15
http://freerss.net 15
http://reader.nunux.org 14
http://127.0.0.1 14
https://raibledesigns.com 13
http://plus.url.google.com 12
http://cloud.feedly.com 12
http://digg.com 11
http://hivereader.com 8
http://www.dzone.com 8
https://www.linkedin.com 7
http://translate.googleusercontent.com 7
http://architects.dzone.com 6
http://abtasty.com 5
http://thangaraj80.blogspot.ru 5
http://dev.newsblur.com 4
http://reader.aol.com 4
http://feedreader.com 4
http://thangaraj80.blogspot.fr 4
http://www.365dailyjournal.com 3
http://www.hanrss.com 3
http://news.google.com 2
http://thangaraj80.blogspot.de 2
http://thangaraj80.blogspot.co.at 2
http://thangaraj80.blogspot.nl 2
http://thangaraj80.blogspot.co.uk 2
http://69.13.19.128 2
http://www.serpensalbus.com 2
http://www.feedspot.com 2
http://smashingreader.com 2
https://twitter.com 2
http://feeds.feedburner.com 1
http://www.themusicage.com 1
http://thangaraj80.blogspot.pt 1
http://thangaraj80.blogspot.ie 1
http://www.goread.io 1
http://thangaraj80.blogspot.no 1
http://thangaraj80.blogspot.ca 1
http://thangaraj80.blogspot.co.nz 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Refreshing Your UI with HTML5,Bootstrap and CSS3HTML5Denver April 22,2013Matt Raiblehttp://raibledesigns.com Photos by Trish McGinity
  • 2. About Me#HTML5DenverWeb Architecture ConsultantJava Community ProfessionalFather, Speaker, Beer LoverWhat Keeps me busyContact InformationSkiing, Mountain BikingThe BusAppFuseRaible Designswww: http://raibledesigns.comemail: matt@raibledesigns.comtwitter: @mraible2/96
  • 3. Legacy DesignHaveyou worked with an outdated design?
  • 4. My Experience#HTML5DenverDecember 2011Page Speed ProjectUI Refresh ProjectBootstrapLegacy Browsers4/96
  • 5. Best Practices for Speeding Up Your Web Site35 Total Rules → http://developer.yahoo.com/performance/rules.html#HTML5DenverMinimize HTTP RequestsUse a Content Delivery NetworkAdd an Expires or a Cache-Control HeaderGzip ComponentsPut Stylesheets at the TopPut Scripts at the BottomAvoid CSS ExpressionsMake JavaScript and CSS ExternalReduce DNS LookupsMinify JavaScript and CSSNo 404sAvoid RedirectsRemove Duplicate ScriptsConfigure ETagsMake Ajax CacheableFlush the Buffer EarlyUse GET for AJAX RequestsPost-load ComponentsSplit Components Across DomainsOptimize ImagesChoose <link> over @importMinimize the Number of iframes5/96
  • 6. Page Speed Project#HTML5DenverYSlowServer RecommendationsSuggested Code ChangesStaging got a BProduction got an FEnable CompressionAdd Expires HeadersOptimizing Images (25% savings)Reduce HTTP RequestsJavaScript at BottomCombining JavaScript FilesCSS Image Sprites6/96
  • 7. Tilt 3D#HTML5Denverhttps://addons.mozilla.org/en-us/firefox/addon/tilt/7/96
  • 8. UI Refresh Project
  • 9. UI Refresh Spike
  • 10. CSS Image Spriteshttp://css-tricks.com/css-sprites/
  • 11. Themes with LESS#HTML5Denver@link:#0087CC;@linkHover:#0087CC;@border:#608FAF;@navbarBackground:#D6E7F2;@navbarHover:#333333;@dropdownBackground:#EFF5F9;@dropdownHover:#D6E7F2;@sidebarBackground:#EFF5F9;@headerDarkBackground:#C3EEB7;@headerMediumBackground:#D6F3CD;@headerLightBackground:#ffffff;@iconLargeYPosition:-263px;@iconYPosition:-718px;CSS11/96
  • 12. Themes with LESS: theme.less#HTML5Denver@import@colors;a{color:@link}a:hover{color:@linkHover}.navbardiv>ul>li{border:1pxsolid@border;background-color:@navbarBackground;border-top:0;}.navbar-inner{border-top:1pxsolid@border;}CSS12/96
  • 13. Themes with LESS: Ant#HTML5Denver<macrodefname="create-css"><attributename="theme"/><sequential><echomessage="CompilingLESSfiles::Creating@{theme}Theme"/><copydescription="Setupthemesforprocessing"todir="${build}/themes"><filesetdir="${basedir}/web/css/UIv9/themes"includes="@{theme}-colors.less"/></copy><concatdestfile="${build}/themes/@{theme}.less"eol="dos"force="no"><filesetdir="${basedir}/web/css/UIv9/themes"><includename="@{theme}-colors.less"/><includename="theme.less"/></fileset></concat><replacefile="${build}/themes/@{theme}.less"token="@import@colors;"value=""/><wro4jprocessor="lessCss"dir="${build}/themes"todir="${basedir}/web/css/UIv9"target-groups="@{theme}"/><deletedir="${basedir}/web/css/UIv9"includes="**-colors.css"/></sequential></macrodef>XML13/96
  • 14. Themes with LESS: Ant#HTML5Denver<macrodefname="wro4j"><attributename="processor"/><attributename="wro-file"default="wro.xml"/><attributename="target-groups"/><attributename="dir"/><attributename="todir"/><sequential><execexecutable="java"failonerror="true"><argvalue="-jar"/><argvalue="../common/lib-ext/wro4j-runner-1.4.4-jar-with-dependencies.jar"/><argvalue="--wroFile"/><argvalue="@{wro-file}"/><argvalue="--contextFolder"/><argvalue="@{dir}"/><argvalue="--targetGroups"/><argvalue="@{target-groups}"/><argvalue="--destinationFolder"/><argvalue="@{todir}"/><argvalue="-c"/><argvalue="@{processor}"/></exec></sequential></macrodef>XML14/96
  • 15. Themes with LESS: Customizer#HTML5Denver 15/96
  • 16. Browser Issues#HTML5DenverNo rounded corners or gradients in legacy browsersUsed jQuery.IE9Gradius.js for IE9Had to add class="checkbox" to all checkbox labelsMany, many IE7 Issues: created ie7.css fileUsed { zoom: 1; position: relative }for negative top marginsUsed table-layout: fixedso td widths would workUsed position: fixedto fix nav width16/96
  • 17. Web DevelopmentWefacealotof challenges
  • 18. Web Browsers#HTML5Denver 18/96
  • 19. #HTML5Denver 19/96
  • 20. #HTML5Denver 20/96
  • 21. #HTML5Denver 21/96
  • 22. Todays Web Developer#HTML5DenverHTML5Canvas / Semantics/ Storage / File Access / Audio / VideoCSS / 3JavaScriptServer Side LanguagesDBMSNOSQL DatabasesLESS / Sass / @font-face / Border Radius / Box ShadowjQuery / Plugins / MVC Frameworks / Server Side JS / CoffeeScriptColdFusion / Java / Groovy / PHP / Python / .NET / RubyOracle / SQL Server / MySQL / PostgreSQLCassandra / MongoDB / CouchDB / Amazon Simple DB22/96
  • 23. Mobile Traffic will outnumber desktop by 2014#HTML5Denver 24/96
  • 24. Mobile OS#HTML5Denver 25/96
  • 25. Mobile Screen Resolutions#HTML5Denver 26/96
  • 26. Designing a different interface for everydevice is impossible.“”
  • 27. BootstrapTheanswer to our problems.
  • 28. What is Bootstrap?#HTML5DenverComponentsJavaScript PluginsDozens of reusable componentsDropdownsNavbarBreadcrumbsAlertsProgress Bars13 pluginsModal Dialog WindowsTabsTypeaheadCarouselScaffoldingBase CSSLayoutsGrid SystemFluid Grid SystemResponsive DesignTypographyTablesFormsButtonsIcons30/96
  • 29. Reasons To Love Bootstrap#HTML5DenverFor all skill levelsDocumentationCross EverythingLightweightResponsive Design13 JavaScript pluginsOpen SourceBuilt on LESS31/96
  • 30. History of Bootstrap#HTML5DenverEarly Days of TwitterReleasesPopularityMark OttoJacob Thorntonv 1.0 - 08/19/2011v 2.0 - 01/31/2012v 2.1.1 - 09/04/2012v 2.3.1 - 03/01/2013@twbootstrap 58.5K FollowersGitHub Stats48K Watchers14K Forks32/96
  • 31. Getting StartedOverviewof theproject,itscontents,and howto getstarted with asimpletemplate.
  • 32. Getting Started#HTML5DenverDownloading BootstrapRequirementsStarter TemplatesSourceReady To GoCustomizeHTML5 DoctypeInclude bootstrap.cssBasic marketing siteFluid layoutStarter templateMore templates...34/96
  • 33. ScaffoldingBootstrap isbuilton responsive12-column grids,layouts,andcomponents.
  • 34. Layouts: Fixed Layout#HTML5Denver<body><divclass="container">...</div></body>HTML36/96
  • 35. Layouts: Fluid Layout#HTML5Denver<div class="container-fluid"><div class="row-fluid"><div class="span2"></div><div class="span10"></div></div></div>HTML37/96
  • 36. Grid System#HTML5DenverBootstrap grid system is 12 columns / 940pxGrid adapts to be 724px and 1170px wide depending on your viewport.Below 767px viewports, the columns become fluid and stack vertically.<div class="row"><div class="span4">...</div><div class="span4">...</div><div class="span4">...</div></div>HTML38/96
  • 37. Fluid Grid System#HTML5Denver<divclass="row-fluid"><divclass="span4">...</div><divclass="span4">...</div><divclass="span4">...</div></div><divclass="row-fluid"><divclass="span6">...</div><divclass="span6">...</div></div><divclass="row-fluid"><divclass="span4">...</div><divclass="span4">...</div><divclass="span4">...</div></div>HTML39/96
  • 38. Responsive Design#HTML5DenverMedia QueriesModify the width of column in our gridStack elements instead of float wherever necessaryResize headings and text to be more appropriate for devices40/96
  • 39. Responsive Design#HTML5Denver<!doctypehtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Bootstrap:GettingStarted</title><linkrel="stylesheet"type="text/css"href="bootstrap/css/bootstrap.min.css"><linkrel="stylesheet"type="text/css"href="assets/css/bootstrap-responsive.css"></head><body><h1>ResponsiveBootstrap</h1></body></html>HTML41/96
  • 40. Demo Timehttp://localhost:8000/demos/responsive/
  • 41. Base CSSFundamental HTML elementsstyled and enhanced with extensibleclasses.
  • 42. Typography: Headings#HTML5Denver<h1>h1.Heading1</h1><h2>h2.Heading2</h2><h3>h3.Heading3</h3><h4>h4.Heading4</h4><h5>h5.Heading5</h5><h6>h6.Heading6</h6>HTML44/96
  • 43. Typography: Body Copy#HTML5Denver<p>Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Donecullamcorpernullanonmetusauctorfringilla.Duismollis,estnoncommodoluctus,nisieratporttitorligula,egetlaciniaodiosemnecelit.Donecullamcorpernullanonmetusauctorfringilla.</p>HTML45/96
  • 44. Typography: Blockquote#HTML5Denver<blockquote><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.</p><small>Someonefamous<citetitle="SourceTitle">SourceTitle</cite></small></blockquote>HTML46/96
  • 45. Typography: Emphasis classes#HTML5Denver<pclass="muted">Fuscedapibus,tellusaccursuscommodo,tortormaurisnibh.</p><pclass="text-warning">Etiamportasemmalesuadamagnamolliseuismod.</p><pclass="text-error">Donecullamcorpernullanonmetusauctorfringilla.</p><pclass="text-info">Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatis.</p><pclass="text-success">Duismollis,estnoncommodoluctus,nisieratporttitorligula.</p>HTML47/96
  • 46. Typography: Lists#HTML5Denver<ul><li>Loremipsumdolorsitamet</li>...</ul>HTML48/96
  • 47. Tables: Default Style#HTML5Denver<tableclass="table">…</table>HTML49/96
  • 48. Tables: Striped#HTML5Denver<tableclass="tabletable-striped">…</table>HTML50/96
  • 49. Tables: Bordered#HTML5Denver<tableclass="tabletable-bordered">…</table>HTML51/96
  • 50. Tables: Hover#HTML5Denver<tableclass="tabletable-hover">…</table>HTML52/96
  • 51. Tables: Condensed#HTML5Denver<tableclass="tabletable-condensed">…</table>HTML53/96
  • 52. Tables: Optional Row Classes#HTML5Denver 54/96
  • 53. Forms#HTML5DenverFour LayoutsForm ControlsLook & FeelVertical (default)SearchInlineHorizontalInputText AreaCheckboxes & RadioSelectRelative Sizing (small/med/large/xlarge)Grid Sizing (span1/span2/span3/etc)55/96
  • 54. Forms: Default Styles#HTML5Denver<form><legend>Legend</legend><label>Label name</label><input type="text" placeholder="Type something…"><span class="help-block">Example block-level help text here.</span><label class="checkbox"><input type="checkbox"> Check me out</label><button type="submit" class="btn">Submit</button></form>HTML56/96
  • 55. Forms: Horizontal#HTML5Denver<form class="form-horizontal"><div class="control-group"><label class="control-label" for="inputEmail">Email</label><div class="controls"><input type="text" id="inputEmail" placeholder="Email"></div></div>...</form>HTML57/96
  • 56. Search Form#HTML5Denver<formclass="form-search"><inputtype="text"class="input-mediumsearch-query"><buttontype="submit"class="btn">Search</button></form>HTML58/96
  • 57. Inline Form#HTML5Denver<formclass="form-inline"><inputtype="text"class="input-small"placeholder="Email"><inputtype="password"class="input-small"placeholder="Password"><labelclass="checkbox"><inputtype="checkbox">Rememberme</label><buttontype="submit"class="btn">Signin</button></form>HTML59/96
  • 58. Form Controls: Relative Sizing#HTML5Denver<input class="input-mini" type="text" placeholder=".input-mini"><input class="input-small" type="text" placeholder=".input-small"><input class="input-medium" type="text" placeholder=".input-medium"><input class="input-large" type="text" placeholder=".input-large"><input class="input-xlarge" type="text" placeholder=".input-xlarge"><input class="input-xxlarge" type="text" placeholder=".input-xxlarge">HTML60/96
  • 59. Form Controls: Grid Sizing#HTML5Denver<input class="span1" type="text" placeholder=".span1"><input class="span2" type="text" placeholder=".span2"><input class="span3" type="text" placeholder=".span3"><select class="span1"></select><select class="span2"></select><select class="span3"></select>HTML61/96
  • 60. Buttons#HTML5Denver 62/96
  • 61. Images#HTML5Denver<imgsrc="..."class="img-rounded"><imgsrc="..."class="img-circle"><imgsrc="..."class="img-polaroid">HTML.img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.Image Placeholders http://placehold.it/63/96
  • 62. Icons#HTML5Denver<iclass="icon-search"></i><iclass="icon-searchicon-white"></i><aclass="btnbtn-primary"href="#"><iclass="icon-usericon-white"></i>User</a><aclass="btnbtn-small"href="#"><iclass="icon-star"></i></a><spanclass="add-on"><iclass="icon-envelope"></i></span><inputclass="span2"id="inputIcon"type="text">HTMLFull List of 140 Icons http://twitter.github.com/bootstrap/base-css.html#iconsCompressed using ImageOptim http://imageoptim.com/64/96
  • 63. ComponentsDozensof reusablecomponentsbuiltto providenavigation,alerts,popovers,and more.
  • 64. Components#HTML5DenverDropdownsButton groupsButton dropdownsNavsNavbarBreadcrumbsPaginationLabels and badgesTypographyThumbnailsAlertsProgress barsMisc66/96
  • 65. Components: Button Group#HTML5Denver<divclass="btn-group"><buttonclass="btn">1</button><buttonclass="btn">2</button><buttonclass="btn">3</button></div>HTML67/96
  • 66. Components: Button dropdown#HTML5Denver<divclass="btn-group"><aclass="btndropdown-toggle"data-toggle="dropdown"href="#">Action<spanclass="caret"></span></a><ulclass="dropdown-menu"><!--dropdownmenulinks--></ul></div>HTML68/96
  • 67. Components: Navbar#HTML5Denver<divclass="navbar"><divclass="navbar-inner"><aclass="brand"href="#">Title</a><ulclass="nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li></ul></div></div>HTML69/96
  • 68. Components: Tabs#HTML5Denver<ulclass="navnav-tabs"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">...</a></li><li><ahref="#">...</a></li></ul>HTML70/96
  • 69. Components: Breadcrumbs#HTML5Denver<ulclass="breadcrumb"><li><ahref="#">Home</a><spanclass="divider">/</span></li><li><ahref="#">Library</a><spanclass="divider">/</span></li><liclass="active">Data</li></ul>HTML71/96
  • 70. Components: Pagination#HTML5Denver<divclass="pagination"><ul><li><ahref="#">Prev</a></li><li><ahref="#">1</a></li><li><ahref="#">2</a></li><li><ahref="#">3</a></li><li><ahref="#">4</a></li><li><ahref="#">Next</a></li></ul></div>HTML72/96
  • 71. Components: Alerts#HTML5Denver<divclass="alertalert-success"></div>HTML73/96
  • 72. JavaScript for BootstrapBring Bootstrapscomponentsto life—nowwith 13custom jQueryplugins.
  • 73. JavaScript Plugins: Overview#HTML5DenverAll plugins require the latest version of jQueryWhat Plugins do you need?Pluginsbootstrap.min.js (all)https://github.com/twitter/bootstrap/tree/master/jsTransitionsModalButton / DropdownTabTooltip / PopoverAlertCollapseCarouselTypeaheadScrollspy / Affix75/96
  • 74. You can use all Bootstrap plugins purelythrough the markup API without writinga single line of JavaScript.“”
  • 75. JavaScript Plugins: Modals#HTML5Denver 77/96
  • 76. JavaScript Plugins: Modals#HTML5Denver<divclass="modalhidefade"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">&times;</bu<h3>Modalheader</h3></div><divclass="modal-body"><p>Onefinebody…</p></div><divclass="modal-footer"><ahref="#"class="btn">Close</a><ahref="#"class="btnbtn-primary">Savechanges</a></div></div>HTML78/96
  • 77. JavaScript Plugins: Carousel#HTML5Denver 79/96
  • 78. JavaScript Plugins: Carousel#HTML5Denver<divid="myCarousel"class="carouselslide"><!--Carouselitems--><divclass="carousel-inner"><divclass="activeitem">…</div><divclass="item">…</div><divclass="item">…</div></div><!--Carouselnav--><aclass="carousel-controlleft"href="#myCarousel"data-slide="prev">&lsaquo;</a><aclass="carousel-controlright"href="#myCarousel"data-slide="next">&rsaquo;</a></div>HTML80/96
  • 79. JavaScript Plugins: Popover#HTML5Denver 81/96
  • 80. JavaScript Plugins: Popover#HTML5Denver<ahref="#"class="btnbtn-largebtn-danger"rel="popover"data-content="Andheressomeamazingcontent.Itsveryengaging.right?"data-original-title="ATitle">Clicktotogglepopover</a>HTMLSee it in action http://twitter.github.com/bootstrap/javascript.html#popovers82/96
  • 81. LESSThedynamicstylesheetlanguage.
  • 82. What is LESS?#HTML5DenverMaintainable CSSDynamic BehaviorUsageVariablesMixinsNested ElementsOperationsFunctionsClient SideServer Side84/96
  • 83. LESS: Variables#HTML5Denver 85/96
  • 84. LESS: Mixins#HTML5Denver 86/96
  • 85. LESS: Nested#HTML5Denver 87/96
  • 86. Look & Feel#HTML5DenverBootstrap ExpoBootswatchWrapBootstrapjQuery UI themeFont Awesomehttp://expo.getbootstrap.comhttp://bootswatch.comhttps://wrapbootstrap.comhttp://addyosmani.github.com/jquery-ui-bootstraphttp://fortawesome.github.com/Font-Awesome88/96
  • 87. Bootstrap 3#HTML5DenverBootstrap 3 will be mobile-firstOverhaul CSS transitions andreinforce with JavaScript transitionsas necessaryDropping IE7 and FF3.6 supportCombining standard and responsiveCSS into a single filerc.getbootstrap.com →github.com/twitter/bootstrap/pull/634289/96
  • 88. SMACSSCategorizing CSS rules allows us to see patterns and definebest practices around each pattern.1. Base2. Layout3. Module4. State5. Theme#HTML5Denver 90/96
  • 89. SMACSS: Naming Rules#HTML5Denverhttp://smacss.comJonathan Snook @ HTML5 Denver: June 17, 2013!91/96
  • 90. UI Refresh Project, 1 Year LaterMobile Improvements#HTML5Denver/*Smartphones(portraitandlandscape)-----------*/@mediaonlyscreenand(min-device-width:320px)and(max-device-width:854px){body.mainPage.click-thru{padding:0;}}/*iPad(portraitandlandscape)-----------*/@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){body.mainPage.click-thru{padding-top:50px;}}CSS92/96
  • 91. UI Refresh Project, 1 Year LaterJavaScript PDF Viewer / Editor#HTML5Denver 93/96
  • 92. UI Refresh Project, 1 Year LaterMy Dashboard#HTML5DenverCharts and Widgets, Very VisualBuilt With:PDF Viewer: 200 lines HTML, 2300 lines of JavaScriptMy Dashboard: 300 lines HTML, 466 lines of JavaScriptAngularJSAngularUIAngularUI Bootstrap94/96
  • 93. Resources#HTML5DenverMy PresentationsBootstrapSimilar FrameworksLESS CSSGoogle HTML5 SlidesDan Vegas Bootstrap 2 Presentationhttp://raibledesigns.com/rd/page/publicationsGitHub Project and Google GroupZurb Foundation and Compasshttp://lesscss.orghttp://code.google.com/p/io-2012-slideshttps://github.com/cfaddict/bootstrap295/96
  • 94. <Questions?>twitter @mraiblewww raibledesigns.comgithub github.com/mraiblelinkedin linkedin.com/in/mraible