Search
Jany Mai
Lightning Talk: Best Practices Of SVG On Ruby On Rails
Edit
Summarized using AI

Lightning Talk: Best Practices Of SVG On Ruby On Rails

Sylvia Choong and Jany Mai • October 13, 2017 • Selangor, Malaysia • Lightning Talk

In this video titled 'Lightning Talk: Best Practices Of SVG On Ruby On Rails', speakers Sylvia Choong and Jany Mai share insights on using Scalable Vector Graphics (SVG) within Ruby on Rails applications. The session, held at RubyConf MY 2017, focuses on how SVG can enhance web interactivity while adhering to software engineering principles such as DRY (Don't Repeat Yourself). Key points discussed include:

  • Introduction to SVG: SVG is emphasized as a powerful tool for creating 2D graphics that can scale without loss of quality, making it particularly suitable for responsive web applications.

  • Refactoring SVG Code: The speakers explain the challenges associated with SVG, citing its complexity and impact on performance, particularly concerning page rendering times and SEO implications. They share their methods for refactoring SVG code to improve maintainability and performance.

  • Key Techniques: Jany demonstrates techniques for efficient SVG integration in Ruby on Rails. This includes using helper methods for dynamic data rendering and avoiding unnecessary duplication of code. The discussion includes the importance of defining methods in Rails to effectively manage SVG content.

  • Dynamic vs. Static Rendering: The speakers differentiate between static rendering and dynamic data handling in SVG, highlighting advantages of inline rendering for dynamic content. They provide examples showing how dynamic methods can lead to cleaner code and improved organization.

  • Advantages of SVG: The session highlights how SVG enhances web performance and SEO. Unlike raster images (like PNGs and JPGs), SVG elements are vector-based and can be crawled by search engines. This facilitates better indexing of infographics and other content featuring text.

  • Creative Uses of SVG: Sylvia elaborates on how SVG can be employed in various creative ways, such as creating animations for branding elements or developing interactive graphics for storytelling on websites. They also mention the exciting potential of combining SVG with JavaScript to build 2D games.

Concluding the talk, Sylvia and Jany express their hope that developers feel encouraged to integrate SVG into their projects, simplifying coding practices and enhancing web application capabilities. Audience engagement is apparent through thoughtful questions, and participants are invited to access further resources during the session's wrap-up.

Lightning Talk: Best Practices Of SVG On Ruby On Rails
Sylvia Choong and Jany Mai • October 13, 2017 • Selangor, Malaysia • Lightning Talk

Speaker: Sylvia Choong & Jany Mai

Website: http://rubyconf.my

Produced by Engineers.SG

RubyConf MY 2017

00:00:06.090 hello everyone I'm Sylvia I'm from
00:00:08.730 Malaysia
00:00:09.480 and she's journey she's from Vietnam
00:00:12.230 last night when she rented to our
00:00:14.670 company called the street one and a half
00:00:16.529 years ago and this is the first time
00:00:19.380 that both of us are collaborating
00:00:21.029 together on stage and we're very happy
00:00:23.130 to be here so today we are going to talk
00:00:27.450 about something I'd be like waited it's
00:00:30.300 about building interactive Reax elements
00:00:32.640 using scalable vector graphics SVG and
00:00:36.059 want to touch about how we have been
00:00:37.890 refactoring fattie SVG codes to make it
00:00:41.580 dull but friendly and well we also want
00:00:44.460 to touch about the things that SVG can
00:00:46.500 contribute to making the interactivity
00:00:50.190 of the web so there are two things going
00:00:52.650 to focus on today we had this software
00:00:55.560 engineering principles like d ry to
00:00:58.320 guide us and we know that it is
00:01:00.329 important and it should influence the
00:01:02.550 way how we write our code our projects
00:01:05.220 in the street get us a lot about
00:01:06.899 performance issue and if their codes are
00:01:09.149 not dry enough my companies could be a
00:01:11.759 mess
00:01:12.420 so from cutting for senior that could if
00:01:16.649 a developer kind of continue making our
00:01:20.219 code this I say it's going to make them
00:01:23.670 cry
00:01:24.299 so LCG are good for describing 2d
00:01:30.179 graphics on the application however I
00:01:32.369 find that it is very hard to use SVG
00:01:34.380 because it itself is a very big chunk of
00:01:36.810 code so high coding it will be
00:01:39.149 Wellington the page rendering time and
00:01:41.819 and the marketing department is going to
00:01:44.729 complain because it affects the SEO page
00:01:46.829 ranking so Jenny knows how to how to
00:01:50.880 make how to put SVG and Ruby on Rails so
00:01:54.959 here take your tool from here
00:01:57.440 yes so I will show you the smarty book
00:02:02.610 about draw the simple chap with a
00:02:06.390 different way to the impediment so you
00:02:09.450 can see I implement the patriarch with
00:02:14.390 two-way talk one way and using the city
00:02:17.280 and another way I was using the energy
00:02:20.730 so you can see the in the effigy I have
00:02:23.520 to wait locked into the first square I
00:02:25.950 will not be in the red tip in the HTML
00:02:29.070 file and the second way I will use the
00:02:32.280 rail to defy the method to enlarge to
00:02:35.880 render it in light of a typical so the
00:02:40.440 tree of spray implementation will show
00:02:42.900 the the same result in this case this ad
00:02:47.370 and locking effigy directly on this
00:02:50.910 suitable for static data so the data
00:02:54.660 cannot be the author so in light render
00:03:00.090 will solve for problem in the dynamic
00:03:03.450 data so I'm so in the Cystic way I
00:03:11.040 define a missing to the rotor by chair
00:03:13.739 so if you don't I mean if you don't defy
00:03:17.760 the missing in the sees it so you you
00:03:21.239 can investing like you're sick it will
00:03:23.940 duplicate and you duplicate a long time
00:03:27.299 and your see it will be too messy so as
00:03:31.650 you can see I I send in the missing
00:03:34.019 missing but ratify I send of five
00:03:36.420 parameter it's me when you call it to LA
00:03:39.780 to see and you have to include the five
00:03:42.450 parameter also so
00:03:47.230 so when you call it in the 18 where you
00:03:51.910 only just define a deep part and the
00:03:55.959 Odyssey in LA inside a female so that's
00:04:00.910 way only possible for state data so the
00:04:07.630 next item so in a the FBI I love doing
00:04:13.030 directly in the female the disease you
00:04:17.260 think the eighty males fighting that
00:04:19.840 also one of the event to take abuse in
00:04:24.460 this way is it at the hawk code is it is
00:04:28.450 is it example I own so the only sort of
00:04:33.490 small remove but what if your project
00:04:37.200 required a lot a lot a lot everything
00:04:44.320 you put on everything so you have to
00:04:47.919 duplicate this code SILVER time that
00:04:50.500 means the raziel we will OPP fact code
00:04:53.979 in the HTML file don't email will be
00:04:57.970 fight so to so this solution I think is
00:05:06.340 you kind of so I defy the method in row
00:05:12.460 to implement in implement in light
00:05:15.789 Rendell phone so and
00:05:21.710 and the method I define in the ocean and
00:05:26.300 the helper the easel helper method I
00:05:29.090 defy so the method you have to take the
00:05:34.419 the SVG file and the value you want to
00:05:39.320 involve for the SVG so the advice is
00:05:46.039 file a require and all the Byram is
00:05:49.220 optional to back off I are using the
00:05:53.780 know correctly and then a chip I checked
00:05:59.180 it the it has the power of insist I will
00:06:01.639 add the sit inside and I check the value
00:06:04.820 if there are any attribute will be if
00:06:07.009 lemon so and you can see I only check
00:06:11.120 the one light to render the emphasis for
00:06:15.110 everything in the HTML file so if we
00:06:19.250 have for the themify you will be clean
00:06:23.479 nothing sticky what he is saying that
00:06:28.940 the inline render is the solution for
00:06:30.919 leaking SVG inside inside Ruby on Rails
00:06:34.669 so I know that there are some doubt
00:06:38.030 posts that do not like to use as VG's
00:06:40.669 because basically they already had to
00:06:42.740 use and up to to this presentation and I
00:06:45.800 hope you find easier because as we
00:06:47.360 jiggle off I want ages for example like
00:06:50.960 the name it bears scalable vector
00:06:52.520 graphics it's scalable so no matter
00:06:55.039 where the app is open on a desktop or
00:06:58.580 mobile or
00:07:00.420 or pierce a POS system the image will
00:07:04.860 not be jagged it is still in good shape
00:07:06.870 there is one thing that static images is
00:07:09.000 limited to and it is important for the
00:07:11.640 like brand know goes to be resolution
00:07:13.980 abandoned because it's a brand for
00:07:17.550 websites that want to rank on search
00:07:19.350 engines
00:07:20.370 SVG can be a help because because the
00:07:24.390 images are caught so unlike a JPEG or
00:07:26.850 PNG which the tax already embedded as
00:07:29.640 pixels the tax in SVG images can
00:07:32.880 actually be crawled by search engines so
00:07:35.250 for example like infographics you can
00:07:38.580 put content in images and Google will
00:07:40.590 know what the content is about a few
00:07:43.470 examples of what we can do if SVG it can
00:07:46.920 be used to
00:07:57.490 it can be used to improve the video
00:08:02.800 effects on sqx elements for example the
00:08:06.789 animations and very short animations are
00:08:09.610 not showing when you may need animations
00:08:12.130 on the brand logo or as creative graphic
00:08:15.699 for or as a creative graphic so
00:08:20.979 storyteller website content and if you
00:08:24.340 are feeling a grip a little bit more
00:08:26.169 adventurous SVG along with JavaScript
00:08:29.800 can build a 2-d game as well so the last
00:08:34.419 one I will show you the demo
00:08:36.789 I draw my but not by fpg so I think the
00:08:43.089 effigy is it to look like so so I mean
00:08:47.790 let's do energy if you can so it
00:08:51.370 possible so knowledge you you more
00:08:54.360 verify in too low for your project it's
00:08:59.830 all from Jenny and I thank you very much
00:09:02.020 for this I will post our the course on
00:09:08.140 on the ethos so you can get Michael
00:09:10.810 so thank you
SC
Sylvia Choong
1 talk
JM
Jany Mai
1 talk
Explore all talks recorded at RubyConf MY 2017
+16