Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
-
Every single diagramming tool.
All the SaaS ones are either way too limited in function, or proprietary vendor-locked.
All the FOSS/desktop ones have a 90s UX experience.
I really want to make a great, comfortable-to-use diagramming tool which just directly uses SVG as the file format, but without the "FUCK IT DOESNT ALIGN CORRECTLY AND WHY IS THIS ARROW BEHIND THE REST" experience...
But I know deep down that it's hard work, and I'll probably get stuck delivering the gazillionth lackluster, bugged diagramming app.20 -
Fuck post-it notes.
Oh look, another product manager found his inner child and plastered a wall with a colored arts and crafts project.
Don't misunderstand me, I'm abso-fucking-lutely in favor of connecting with your deep childish nature -- but then at least enter the meeting room like a boss, armed with some creative ideas, really get to work with some fingerpaint, modelling clay, glitter, molly, acid blotters and grape juice for the whole party.
Not only was that project poorly thought out. Not only does the assortment of colored squares contribute nothing to the clarification of ideas. The issue is also that by Monday morning, the meeting room will look like a strip club after an escalated party, floor littered with 60 little neon pink and green slips reeking of desperation, cheap glue and failure.
Now your whole project is on the floor.
OH DIGITAL WHITEBOARD YOU SAY. NOW WE HAVE 10 MANAGERS FIGHTING DIGITALLY OVER VIRTUAL POST-ITS, ON A CLOUD SERVICE COSTING $500/MONTH.
Product managers, just go fuck yourself, I don't care about your kindergarten bullshit processes.
Call me when you manage to pull a workable idea out of your ass, and just draw an SVG diagram with Inkscape, or write your brainfarts into a nicely organized Markdown file.1 -
When you ask the design team to provide you with a svg of an image, and they give you an svg with a png inside it...3
-
So far all designers I worked with do the following:
1. Use "creativity" to come up with stuff that the system does not allow implementing, for example: Changing clock color in mobile statusbar to Blue!
2. Use "creativity" to come up with a heavily customized calendar for a windows software which requires building the control from scratch, but they explain their creativity by saying: Can't you use CSS?
3. Provide iOS only design which follows android guidelines and refuse to provide android styles for at least pages that to be handled differently on each platform, for example, we had a checkout page in an app, and they wanted the same style for both WITHOUT building custom control for it, they said: Can't you use the android custom control inside iOS
4. They design for a website and send same mockups for me to implement on mobile apps, the problem is a web page runs on a big screen when the mobile app doesn't have room for half the stuff they designed but they must look exactly the same as website !!
5. They send entire PSD with no color codes and say: You can extract icons, and colors from psd ... When they should provide them as per our request which is: SVG for Android and PDF for iOS with the color codes, but no, they are lazy!
6. They ask the team to create a page in the app which is almost production ready just so that they test different font sizes and see how it will look on the phone
7. Same as #6 for images that contain text
The list goes on, but those are by the far the ones that made me one step away from resigning, some of them made me resign...6 -
Spent ages (at least 10 minutes) trying to get svg to load using <img /> tag. Checked for browser support, checked for format of svg and how it was imported. All seemed fine.
Finally realised I had spelt src as scr...4 -
Can someone please build an SVG vector file format equivalent that uses json instead of xml? k thnx! 😆14
-
-GDPR
-News letter
-Ads blocker blocker
-Ads popup insite
-Ads popin in video
-Ads popin podcast
-Ads in mail
-Ads in software
-Ads in any android application
-Ads in windows
-Ads in ads
-Auto scrolling
-Slideshow
-Scroll position reset on back button
-Aria-label aria-labelledby aria-role aria-aria of game of thrones
-Order in dom for a11y different of the display order -Button :hover, :focus-visible, :focus-within :fuck-this
- SVG abandoned ware
- I make you a illustrators X version that not work with yours, i use figma. I use affinity, i use akira. I use photoshop, i use word. I use powerpoint, i use publisher, i use paint, i use all Asss (application as a service) on the web and to see what i make you need to pay you an account
-We all make frontend backend... No linter or something... Why we have always 848274 change in git ....
We not host anymore we use 62616 different cloud services to try all the fucking company everywhere
-Make a Drupal CMS to a client that's are to idiots to use it and call you each time they have something to modify
And goes on
Web tooday is fucking crap shit
People realize that you cannot make money anymore with informative website. Then everybody try to squish people at the last drop... Because of selfishness.3 -
When you accidentally thought Vue JS is Vivus JS and argue why would you need a SVG animator to compare with React. JS naming. God.1
-
I Googled "png to svg converter", this is the output of the first online tool I tried.
This dev literally just a base64 encoded copy of my origin image wrapped in an svg... the most infuriating thing about it is that technically it did 'convert' it to svg - just not in the way I had anticipated.
Whoever wrote this is a lazy genius (and a dickhead).
8 -
Finnegan by @retoor has received 16 points for Presentation and 12 points for Functionality (28 total) during the voting phase. And with this, I call it the Winning devRant clone 2023!
She will get an SVG with her likeness and layered sliding animation made by yours truly, which is a potentially perfect trophy for her portfolio. Hope you'll like it, @retoor, so give me a time and it will arrive!
ragedev by @SidTheITGuy has received 6 points for Presentation and 3 points for Functionality (9 total). As such, he will only receive a static SVG portrait. But it's still a good addition to his YouTube channel, I believe!
@ostream with others get a certificate for participation. I don't really know why I'm issuing those, but please accept! It's the least I can do for your all's contributions. Come by the next "jam" announcement, I promise it will be more exciting ;)))
Archive of Unofficial devRant Clone Jam: https://devrant.com/search/...
4 -
Me to customer: I need that image in either svg or png format.
Customer sends a zipped .docx file containing nothing but an image.2 -
!rant
Suggestion, devRant resources. A section for posting URLs of useful shit you find that may help others. Maybe categorised or just tags.
Heres one for Mac Front end devs..
Nucleo is a beautiful library of 20729 icons, and a powerful application to collect, customize and export all your icons.
https://nucleoapp.com/7 -
Building a website using Wordpress and Visual Composer for a client is pretty easy, right?!
Until the clients wants to change one of the icons to sofa “you can’t use image, and visual composer has a list of only 5 icon libraries and none of them has a fucking sofa icon”.
Manager says just do it today!
Ok no problem.. just had to figure how visual composer communicate with the libraries to show them in the module area, edit the function, create the font/svg files for the new icon, edit the css file of one of the libraries to add the icon. And boom its working fine!
No tutorial about this stuff so had to figure it out by reading the code and see how they did it so I can do it.
After finishing this, they just gave me few more changes as I have done nothing.
Thank you5 -
Using chatGPT. Seems about as cooperative and willing to do its job as I am.
Can you make me a word cloud in svg format?
"I'm sorry, I can't directly generate svg content, here are some other tools for that"
Can you write code?
"Yes, certainly, here's some python to generate a word cloud"
Can you write svd code?
"Yes, certainly, here's an example word cloud in svd format"
Can you make the words get bigger when I mouse over them?
"Yes, here's the code".
It's mastered "have you tried googling it?"2 -
You know you're a developer when on your machine an ".svg" file automatically opens in a texteditor...1
-
Is there any game engine with actually good support for SVG? I want to do some 2D animations but I don't want to do it with goddamn png sprites like some caveman.9
-
Client wondering why svg icons doesn't render properly. They put a fucking base64 png in a. Svg.
Damn3 -
As I already said on devrant, I'm a freelance web developer and I also often sell my services for teaching, loving that. Currently I'm teaching PHP with 30 students and it's going very well.
But yesterday, I received an offer for giving another course next month, this time on HTML and CSS, for a company I don't know yet. Almost every line of this email is wrong, outdated by 20 years, or just basically meaningless...
So I thought I could do my best to translate this as close as possible to the original, preserving the wrong formulations too, just for you devranters fellas.
"Hello,
I have an offer for a 2 days course for 5 people (level 1+ and/or 2), on HTML5 and CSS3. Below, the program :
1. XHTML AND CSS2 INTRODUCTION
Advantages and benefits of change
Understanding compatibility for different versions of browsers
HTML, XHTML, CSS edition tools : presentation of the different tools
The CSS language : different types of selectors : class of selector, identifier of selector, contextual selectors, grouped selectors
Blocks of text, boxes of text
The CSS1, CSSP, CSS2 properties
Relative and absolute measures units
2. LAYOUT TECHNIQUES
Full CSS, XHTML websites demo
Positioning with the position property, positioning with the float property
Columns creation
Layout for forms
Layout for data tables
Layout for menus
3. INTRODUCTION TO SVG (SCALABLE VECTOR GRAPHICS)
Role and importance of SVG
Using SVG on client side : basic shapes
SVG structure of document, tags examples
Using CSS styles with SVG
Different integration methods for SVG in a XHTML document
4. OPTIMISATION OF JAVASCRIPT CODE
Introduction to DOM and Javascript
Access to document objects : different access techniques, using this keyword, create elements dynamically
Positioning elements with the help of Javascript : positionning elements relatively to the mouse, move elements
Show/hide elements for creating hierarchical menus
Code optimisation techniques : using objects, objects litterals, loops optimisation
Can you please give me your availability ?"
Seriously...
CSS-fucking-1 ! Is it a course for dinosaurs ?
...And if only my rant was just about the program...
It's totally impossible to cover all these subjects in only 2 days with people of different levels and experience.
The guy exactly said to me : "don't worry about the program, it's an old text but they agreed to it anyway. They just want to learn HTML and CSS, some of them already know it but want to learn more, and the others are total beginers.".
And here is the meaning for the "(level 1+ and/or 2)" part in the email.
So... Surprizingly, I accepted the offer, but asked for at least a 3rd day. I'm waiting for their answer, but I'll do it anyway, adapting the course content to the actual students knowledge. I need the money, after all.
Wish me luck...
It's just sad that these formation companies are selling bullshit to clients that just want to learn something useful. It's too often like that, they sell shitty/useless programs and we have to catch up in real time with students that don't understand why they don't learn what was told to them.3 -
Content strategy expert: How long would it take to program an SVG animation intro video
Me: I'm not sure I've never programmed one before.(still teaching myself)
Content expert: iS it even possible?
Me: yeah all things are possible in programming ;)
Content expert: so then how long would it take
Me: no.
Content expert: but wouldn't it be easier if...
Me: no, go away2 -
Just saw this awesome video about SVG:
https://youtu.be/dv2TvTXQ4FQ
Now I want to ask for resource where to start with SVG because I am really new to them...
Any recommendations?10 -
Did not understand why people posted so much on here till I had to argue with my "partner" product manager that SVG icons are better than pure CSS icons, and yes there is such thing as animated SVG, and no I'm not a designer to create fancy icons for you just because they "are actually code" you twat1
-
i cant stand these idiots anymore. My instructor needed 12 Minutes to understand Megabyte and Mebibyte. He just used the snipping tool to save an SVG from Wikipedia. My instructor is an Person who wrote small Programs in the past and thought that an instructor license is something useful. It hurts listening to him. he was kept busy for hours because of nothing, so we could only twiddle our thumbs. our first instructor went probably because of the Management.
At the beginning of June I will give my lecture for my final exam.
I am fucked.3 -
Hello everyone! 👋
Work on Chaaat is going rapid so far. We got our own js.org domain – https://chaaat.js.org
We now need a designer help! All we need is to create a simple SVG icon we just can’t draw ourselves.
We are always open for contributors! If you’re intern or junior developer and you want a real world experience with NodeJS/Express, REST API, OAuth2, MongoDB and React/Redux stack with detailed code reviews from senior developer, we’re open for your contributions. No experience required.
Cheers!11 -
Please don't Google "member" when your looking for membership icons on a free SVG icon website in a very public office.
8 -
There is a drawing competition for my currently most played game.
I'm on vacation and the deadline is when I get back. So what did I do?
I made an inspiration cluster with the character and drawings having this arrogant face (laptop, gimp).
I sketched on my phone and put it on my laptop (the sketch). I have no desk here so I'm drawing on my bed. I have no drawing pad so I'm drawing with my mouse. Then I draw it in gimp with colors and everything (the stroke in another program on my gfs laptop), put each layer in inkscape to svg-ify them and to hq-render them back in Gimp. Corrected a few things in Gimp. Added more detail, effects (glow, gradient instead of flat color ...).
~6 hours over two days. That was fun. And fucking unprofessional.7 -
Gamemaker studio 2's 2019 roadmap just got released.. Still no Linux IDE (FFS) but it only took them how many years to realise that not every developer is a malicious cunt and give us the ability to disable to sandbox file system?!
I swear they add and change stuff that is so trivial instead of focusing on the engines major problems and absent features, eg. Can't use SVG graphics, the need to be exported in flash (SWF) because you know, makes sense?
17 -
Affinity Designer export to SVG, normally an easy task for a vector programme.
Furthermore it is only a little picture, a clear eight filled with a single colour.
Result: SVG with an unbelievable file size of 98.7 kB. Holy shit!
Looked at it: The export made a huge long high scaled path... oh man...
Little hand made recoding, made four circles. Done. New size: 0.8 kB.
That's better.4 -
I asked for SVG icons from figma design.
He did the part.
But.
He didn't group the icons
and gave me parts of it.
Separately6 -
I had a bug on two animations for 2 months caused by a fucking svg img lazy loaded with no width/height in between png-s on top of the page... This was the biggest blocker on final qa. Im so done with this shit... 😶
-
Fuck Android Studio and Gradle!
Especially Gradle, you fucking slow RAM consuming shit!
It consumed like all of my RAM and my computer is lagging like shit
It can't even import my SVG!
Because of frustration I accidentally hard reset my local git repo and lost 3 hours of work!8 -
Ok so I'm am a black end kind of guy and have had to deal with making our site again and again and again and fu#@ing again.
Who the hell thought up using SVG icons. My first look at it today and I'm not sure if I hate it or love it. Any thoughts?9 -
When you’re working on a React-Native app and decide to remove a library, don’t accidentally type a space instead of a hyphen when trying to remove something like ‘react-native-svg’. Xcode/expo get super mad when you remove react-native.2
-
we don't really need data types. By default, everything should be string. When you do addition, when the string has nothing but digits, commas and periods, they should be parsed added as numbers. Else, they should be concatenated. If that string-number formatting doesn't match any conventional formatting of any locale, it's a string. Same number-inferring behavior should be implemented when comparing things. There should be no type casting because there is just one type, so every comparison is type-exact. "true" and "false" are special strings that won't throw an error during comparison. Comparing two strings using less, more, less than or equal and more than or equal always throw an error.
Dates are ISO strings. Every other thing is not a date.
We basically sieve the data starting with the strictest conditions down to more forgiving conditions, then down to no conditions at all where it will be interpreted as just string. ISO date requires a very specific formatting, so we should check that first. Then, let's check for a formatted number. Then, a boolean. If nothing clicked, it's a string.
Oh, and every string is automatically trimmed, so it can't start or end with any kind of space.
No classes, no procedures, no constants, no switch operator. Also, no methods, just a lot of helper functions.
Performance will be lacking compared to languages with static types, but performance is not a priority here — this is the language for code monkeys and their AI counterparts. It should only be used for making trivial client-server prototype apps that could've been replaced by Excel if only people knew how to use it, at passable quality, that work reasonably fast on modern hardware.
Those apps will be deprecated because the company went out of business/because the project was proven to not be financially viable in several months anyway.
UI should be rendered not using a webview, but using a lightweight cross-platform UI engine written in a proper language like C++. There should be no semantic tags — every UI element acts like a div would. Everything is measured in pixels and milliseconds. All colors are #rrggbbaa. All vector graphics are SVG, all raster graphics are AVIF. All sounds are Opus. All videos are AV1. All UIs are reactive, Vue style, e.g. you change a variable and the UI updates itself in the right way every time.
Add some junior devs paired with GPT-4.5 or any super-expensive LLM, sprinkle with some Extreme Go-Horse management style (https://hackernoon.com/you-might-be...), and boom, we recreated Zergs but in the tech space. Let's solve software by brute force.11 -
Sure you can specify svg object attributes x, y, width and height in metric values like mm and after put things on paper get same printed output but if you want to transform svg object you need to calculate new values by yourself cause you can’t simply provide translate (10mm, 10mm).
Now I ended up with manually converting values to mm.
Making free transform tool for exact document data rendering inside browser is pain in the ass.
I started to wonder how google docs or microsoft word for web deal with this stuff.2 -
I loved you Xamarin.Forms I really did.
I defended you everywhere... Released 5 apps.
You FUCKING SUCK, no svg support (no none of the apis work), startup time is FUCKING insane, i could go on for hours......
Please any Android Developer out there is there any smooth transition to native? (Dont tell me about Js bullshit)
Help me fell the Native Power of Android.
Show me that apps don't need 20 seconds to start.7 -
!rant
Hey Everyone, I am trying to create a Font from the couple of SVG files that I rendered from processing.
Here is the announcement rant, and you can find the code repos there too.
https://devrant.io/rants/602414/...
But I have ran into a problem.
https://graphicdesign.stackexchange.com/...
Any Ways to solve it. It's going to be free and open Source too.
3 -
React Native so far today:
1. need external dependency to load svg
2. react-native link doesn't work as it should
3. metro bundler not updating its cache
I wonder if the list will grow or that's it for today... -
Hey guys, I was wondering how are these images created and what are they called? are they SVG graphics?
12 -
It seems he is trying to replace HTML with svg and canvas when basic html and css can be used to make beautiful dashboards.
Like i anticipated it is gonna be a ux cluster fuck, where most of the website is an ugly bootstrap contraception and some parts gonna look like futuristic. -
TLDR;
Side project update.
Made simple nlp library in python and published it’s first version to open source.
Now I can feed it with parsed pdf text.
See rant https://devrant.com/rants/2192388/...
Why ?
Cause during reading book about nltk I couldn’t find simple extendible way to provide support for polish language and I wanted to abstract stemming, word normalization, tokenizer etc. so I can provide ex. different conditions for separate text files and don’t write much code what is an asset when you work solo.
It’s about 12GB of pdf public accessible law data I am trying to handle ( at first ) which is about 35000 files from last 90 years.
So far I automated downloading web pages and pdf documents from them. Extracting data from web pages and saving it to database. Extracting text from pdf files. I have about 5-6 projects to do all of it above maybe at the end I will put it to some workflow manager like Luigi or just run it by cronjob.
First thing for website version 1.0 part is find correlation between all documents inside law text using nlp library by building custom conditions. Then just generate directory structure and html files with links between documents.
Website version 2.0 is already in my mind but it will be creepy to make it and will take at least 1-2 months and I want to publish fast.
I have some pdfs with only images instead of text and tesseract worked quite good with them so maybe I will try to process them when everything go live.
Learned a lot about pdf as now I know that font in pdf is not always providing unicode characters ( stupid form of obfuscation) so when you extract text you need to build glyph vector to text map for every font.
Pdf is full vector representation - just like svg - what is logic if you think a bit and know that some printers are running using postscript.
Let’s hope next update will be about flutter mobile app which started all of shit above. It’s almost ready ( except getting data from api I am trying to do and logo for release version ). It’s last piece of puzzle.3 -
Looks like vector drawing applications stopped at bezier curves and don’t want to progress much.
I made a inkscape vector image and I used svg patterns to draw some background, then inkscape stopped responding when I’m trying to open that file on mac.
I tried bunch of other vector drawing apps hoping that at least one know what svg vector patterns are, looks like vector drawing applications use bitmaps for patterns and own formats instead of following svg specification.
I even wanted to pay for illustrator 30$ per month but it can’t do it. It opened my svg file claiming there’s no background there just empty space.
When I open svg image from browser it renders correctly but editing with gui is impossible cause all of those great softwares like illustrator, vectronator, sketch, affinity designer can’t handle vector patterns.
I ended up installing inkscape on old laptop that’s running ubuntu desktop.
Inkscape can do everything I want but I still need to delete not used pattens by editing xml.
At least it handles svg better than others.
Seriously vector image drawing apps suck.10 -
I decided to make some new icons for Atom editor (the launcher/executable ones), because I liked the vscode-icons project.
Made the repo on GitHub and decided to automate making the icons for different OS using Travis CI.
Started writing the Python Script for Travis.
My google queries:
How to generate icons for Linux?
I can use SVG or generate a PNG, many libraries available. 👍👍
How to generate icons for Windows?
Generate PNGs of various sizes and pack in an .ico file. Easy enough
So far so good.
How to generate icons for Mac?
Mac needs a .icns file, a package of PNGs of various sizes. Libraries available but can be done on OSX only. 😫😫
Then I think, what OS does Travis use?
Oh, I can specify macOS in it 😁😁😁
Starts the build 😎😎
Travis doesn't support Python on macOS
😑😑😑😑 -
On interview: do you know SVG?
intern: yes
It turns out that they meant that they know how to select "SVG" as the export format.
Thank god that intern went into the design department and not coding.4 -
Just came across this in-browser presentation tool, sozi (free). See it in action
http://sozi.baierouge.fr/presentati...
Just prepare a giant svg file (free inkspace) and create slides like camera panning focusing on each part of the svg file.
-
So some of you might know I'm facing youtube iframe issues, to autoplay them in mobile
Background:
> https://devrant.com/rants/1449270/...
> https://devrant.com/rants/1450121/...
So few weeks later I found a solution to make it work the way it should in mobile i.e. to autoplay after a click on svg play button,
The logic I used https://codepen.io/briangelhaus/...
Boy oh boy I was so fucking happy, jumped out of my chair basically, So I grab a couple of android devices and it works
Enter infamous E-Corp Apple, the logic I used will never work on any apple devices, because apple do not allow autoplay on mobile, So I was like "okay, no worries"
I tell this news to my manager who is aware that I am working on this since weeks and he looks astonished for a millisecond when after hearing the same can't be done Apple, Tells me "then the issue is not fixed"
Well, you're not wrong, but a little appreciation to a trainee / jr dev who accomplished this by manipulating this would mean a lot for me.
And to Apple and Youtube Iframe API, FUCK YOU3 -
CSS (and all of frontend) is hard. The last few braincells left in me are slowly dying.
I just wanted a progress bar. HTML 5 supports <progress> out of the box. But all browsers want to act differently. Add more boilerplate for each browser type. Somehow got a transparent background on progress bar but it still won't let me change progress color.(Surprisingly, only IE let me change the color) At last, settled with a transparent div with a colored span inside, + js to handle value. Was this really the best way? Nope. But this was the only thing that worked,(other than importing a JS library, which would render a SVG to replicate a progressbar)
Why is front end so convoluted? Half of the things do not even make sense to me. Is this really the direction we want to go in the future?9 -
I'm sorry, but who thought eslint or any linters for that matter were a good idea.
Started a new vue project using the cli, installed tailwind... oh what's that you don't like the line length... get out of here. It's an SVG and using a class-based framework. The hell.
Any way of removing eslint? I just want to code and not get bs warnings because of an svg length or because I add one to many classes.
16 -
Fucking Chrome. I wish him cancer to die soon. Yeah, please fucking give me as event target svg element! Well done!2
-
Working with friend and using nodejs websockets and SVG to build online multiplayer lazer screen arcade like games.
The only delay is having to stop every couple of minutes to restate how cool this is. -
I'm worried that this question will probably get downvoted on SO and I cannot post from my account as well, so here it is..
How to play youtube embedded video in mobile over a custom button / svg / image ?
One idea I'm currently working on is to trigger &autoplay=1 onclick but it is only appending that parameter to existing URL?
Please let me know if you have any thoughts, and I'm doing this for only mobile devices only
P.S I cannot use YouTube API11 -
Guess it's a sign you haven't had enough sleep when you're creating a slanted div and it looks curved so you compare with a ruler to be sure and it is in fact straight.1
-
We can't have good things, can we, SVG implementations??? Apparently, I can't re<use> anything from adjacent file, because only Inkscape understands it. Or to seek support in browser, server is required to see a group from one SVG file in another. Why?4
-
As we are all aware, no two programmers are identical with regard to personal preferences, pet peeves, coding style, indenting with spaces or tabs, etc.
Confession:
I have a somewhat strong fascination with SVG files/elements. Particularly icons, logos, illustrations, animations, etc. The main points of intrigue for me are the most obvious: lossless quality when scaling and usage versatility, however, it goes beyond simply appreciating the format and using it frequently. I will sit at my PC for a few hours sometimes, just "harvesting" SVG elements from websites that are rich with vector icons, et al. There is just something about SVG that gets my blood and creativity flowing. I have thousands of various SVG files from all over the web and I thoroughly enjoy using Figma to inspect and/or modify them, and to create my own designs, icons, mockups, etc.
Unrelated to SVG, but I also find myself formatting code by hand every now and then. Not like massive, obfuscated WordPress bundle/chunk files and whatnot, but just a smaller HTML page I'm working on, JSON export data, etc. I only do it until it becomes more consciously tedious, but up to that point, I find it quite therapeutic.
Question:
So, I'm just curious if there are others out there who have any similar interests, fascinations or urges, behaviours, etc.
*** NOTE: I am not a professional programmer/developer, as I do not do it for a living, but because it is my primary hobby and I am very passionate about it. So, for those who may be speculating on just what kind of a shitty abomination of a coworker I must be, fret not. Haha.
Also, if anyone happens to have knowledge of more "bare-bones" methods of scraping SVG elements from web pages, apps, etc. and feels inclined to share said knowledge, I would love to hear your thoughts about it. Thank you! :)2 -
OK, I could maybe write a quick app in C++ and cross compile it so I can send it to my friends who use windows, what is wrong with you I am ashamed for us all.
But why do that? Let's just go the EXTREME route and do things in a very inappropriate way that is natively """portable""" so we can say that (((It Just Works™))).
So if you haven't guessed already, it's 100% js rawdogging and I'm doing the graphics in SVGOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO uoykuf OoOOOOOOOOOOOOOOOOOOOOOOoOOOOOOOOOOOOOOOOOOOOO it's not so bad but here's things I've learned:
If you're using inkscape to convert your lazy 8x8 pixels per frame spritesheet.png into an svg file, and don't know how to use inkscape, you have to stack each frame on top of one another. Yes.
Erase the layers, erase everything that isn't the paths you want. Also erase invisible paths generated by the pixelart mode of the trace bitmap thingy, sometimes these ghosts exist for mysterious reasons.
Then, neatly stack everything into one square big enough to hold all the frames, select all the frames, resize to selection. OK, now double check that the names of your layers werent changed to generic path94958509 out of the fucking blue AGAIN, all good.
Also double check that inkscape hasn't changed the name and extension of your output file AGAIN then make sure inkscape hasn't changed the dimensions of your export AGAIN and then AGAIN and AGAIN...
OK, so you've exported your svg, now we start doing even more stupid and questionable things. We go into the file and delete the header, specially the comment at the top that clearly states this file was made with inkscape, because my experience was so DELIGHTFUL that I very much require some abstract form of petty vengeance. Also a cigarette.
Hold on. Patiently erase useless tags such as defs and g and shit, all you want is the svg and paths. Then, painstakingly convert each <path id=$ .../> into <symbol id=$> <path .../>.
Why didn't I write a perl script for this part? Actually that's a good idea, goes on the todolist, I didn't write a todolist app though, because I have a textfile. I mean, just what kind of negative IQ troglodyte would do something like that? ;>;>;>;>;>;>;>
Anyway, now utilize your black-magic-infused devilspeak q$p e r l$ script to fasten together an entire webapp into a single html file, all done with duct tape and clown jizz of course, see previous rant for VERY technical details. Also I jjust time traveled and wrote the previous paragraph while writing this one everything is out of order oh noes.
No matter it works now me is happiee.
I got heart icon for health bar but no health bar implemented not aproblem.
Uh also outlines. Here, let's keep it topical, this is rom.rol:
```rol
# vars:
$:%peso;>
let sprite,"$.elems.srpite";
$:/peso;>
# css:
$:%asis;>
path {
· stroke: $080808;
· stroke-width: 0.1;
· stroke-linejoin: round;
· paint-order: stroke;
}
$:/asis;>
# html:
$:%asis;>
<svg width="2.1166811mm" height="2.1166601mm" viewBox="0 0 2.1166811 2.1166601" xmlns="http://www.w3.org/2000/svg">
<symbol id="{$$.%sprite}_hp_0">
<path d="M 0.264594,0.26458 V 0.52916 H 1.1e-5 V 0.79375 1.05833 1.32291 H 0.264594 V 1.5875 H 0.529177 V 1.85208 H 0.793761 V 2.11666 H 1.058344 1.322927 V 1.85208 H 1.587511 V 1.5875 H 1.852094 V 1.32291 H 2.116677 V 1.05833 0.79375 0.52916 H 1.852094 V 0.26458 H 1.587511 1.322927 V 0.52916 H 1.058344 0.793761 V 0.26458 H 0.529177 Z"/>
</symbol>
<!--NOW DO THE OTHER NINE FRAMES-->
</svg>
$:/asis;>
```
so now I can say (in base.rol):
```rol
$:%peso;>
lib "[based]";
rol "rom.rol";
let hud,"$.elems.hdu";
$:/peso;>
$:%asis;>
<svg viewBox="0 0 23.283329 2.1166601" width="16%" height="16%" fill="#880808">
<use id="{$$.%hud}_hp" href="#{$rom.%sprite}_hp_0"/>
</svg>
<script>
document.getElementById("{$$.%hud}_hp").setAttribute('href',"#{$rom.%sprite}_hp_" + n).
</script>
$:/asis;>
```
Where `n` is just some frame counter this is duct tape now request animation frames REQUEST THEM YOU MUST.
Anyway this is immensely stupid but it made me giggle so I share.
AAA RPG with full svg graphics when?1 -
I've worked on countless products and maybe one bigger one (map portal for a national park) and one side job (randomized svg to g code) had any positive social impact. I've been paid for being useless but busy. The entire economy is a scam.1
-
I'm trying to load an SVG icon sprite file in a Webpack based application. It's been almost three hours with no success.
This is why I hate frontend development. Libraries are not structured and make no sense. It's a game of luck.7 -
if your online preview is an svg without watermark, why should i sign up for a paid account to get vector files?5
-
apple you mongoloids, default background of images should be transparent not white
im too retarded to figure out how to be able to view these fuckign white images (svg file extensions to be specific) ive been given because the fucking default background is white and im too retarded to find a way around it quickly (still working)
fuck you
"IT juSt WerkZ!!!!1111" - steve jobs dying of an easily prevented early caught cancer or some shit because he doesn't want the minimally invasive surgery that would fix him, but would rather juice cleanse (idk if true, only vaguely remember memes)2 -
Can someone suggest me a quick way to create some svg files or convert some basic flat shapes like image of a redcircle or a blue heart into .SVGs?
I don't have any experience in graphics development, so online/offline tools or converstion engines would be also nice.13 -
Holy shit how have I not tried using an SVG inside of a sudo element before. That's awesome and will save so much time styling global elements.
-
Just putting the idea out there:
How cool would it be to be able to make SVG screensots!
The OS asks every application within view whether it supports SVG rendering. If so, it collects the SVG rendering. If not, it uses a PNG pixelated fallback.
Most form applications and browsers should be able to provide SVG renderings of the view, right?
Imagine the crispness of the screenshots...2 -
Okay, summary of previous episodes:
1. Worked out a simple syntax to convert markdown into hashes/dictionaries, which is useful for say writing the data in a readable format and then generating a structured representation from it, like say JSON.
2. Added a preprocessor so I could declare and insert variables in the text, and soon enough realized that this was kinda useful for writing code, not just data. I went a little crazy on it and wound up assembling a simple app from this, just a bunch of stuff I wanted to share with friends, all packed into a single output html file so they could just run it from the browser with no setup.
3. I figured I might as well go all the way and turn this into a full-blown RPG for shits and giggles. First step was testing if I could do some simple sprites with SVG to see how far I could realistically get in the graphics department.
Now, the big problem with the last point is that using Inkscape to convert spritesheets into SVG was bit of a trouble, mostly because I am not very good at Inkscape. But I'm just doing very basic pixel art, so my thought process was maybe I can do this myself -- have a small tool handle the spritesheet to SVG conversion. And well... I did just that ;>
# pixel-to-svg:
- Input path-to-image, size.
- grep non-transparent pixels.
- Group pixels into 'islands' when they are horizontally or vertically adjacent.
- For each island, convert each pixel into *four* points because blocks:
· * (px*2+0, py*2+0), (px*2+1, py*2+0), (px*2+1, py*2+1), (px*2+0, py*2+1).
· * Each of the four generated coordinates gets saved to a hash unique to that island, where {coord: index}.
- Now walk that quad-ified output, and for each point, determine whether they are a corner. This is very wordy, but actually quite simple:
· * If a point immediately above (px, py-1) or below (px, py+1) this point doesn't exist in the coord hash, then you know it's either top or bottom side. You can determine whether they are right (px+1, py) or left (px-1, py) the same way.
· * A point is an outer corner if (top || bottom) && (left || right).
· * A point is an inner corner if ! ((top || bottom) && (left || right)) AND there is at least _one_ empty diagonal (TR, TL, BR, BL) adjacent to it, eg: (px+1, py+1) is not in the coord hash.
· * We take note of which direction (top, left, bottom, right) every outer or inner corner has, and every other point is discarded. Yes.
Finally, we connect the corners of each island to make a series of SVG paths:
- Get starting point, remember starting position. Keep the point in the coord hash, we want to check against it.
- Convert (px, py) back to non-quadriplied coords. Remember how I made four points from each pixel?
. * {px = px*0.5 + (px & 1)*0.5} will transform the coords from quadriple back to actual pixel space.
· * We do this for all coordinates we emit to the SVG path.
- We're on the first point of a shape, so emit "M${px} ${py}" or "m${dx} ${dy}", depending on whether absolute or relative positioning would take up less characters.
· * Delta (dx, dy) is just (last_position - point).
- We walk from the starting point towards the next:
· * Each corner has only two possible directions because corners.
· * We always begin with clockwise direction, and invert it if it would make us go backwards.
· * Iter in given direction until you find next corner.
· * Get new point, delete it from the coord hash, then get delta (last_position - new_point).
· * Emit "v${dy}" OR "h${dx}", depending on which direction we moved in.
· * Repeat until we arrive back at the start, at which point you just emit 'Z' to close the shape.
· * If there are still points in the coord hash, then just get the first one and keep going in the __inverse__ direction, else stop.
I'm simplifying here and there for the sake of """brevity""", but hopefully you get the picture: this fills out the `d` (for 'definition') of a <path/>. Been testing this a bit, likely I've missed certain edge cases but it seems to be working alright for the spritesheets I had, so me is happiee.
Elephant: this only works with bitmaps -- my entire idea was just adding cute little icons and calling it a day, but now... well, now I'm actually invested. I can _probably_ support full color, I'm just not sure what would be a somewhat efficient way to go about it... but it *is* possible.
Anyway, here's first output for retoori maybe uuuh mystery svg tag what could it be?? <svg viewBox="0 0 8 8" height="16" width="16"><path d="M0 2h1v-1h2v1h2v-1h2v1h1v3h-1v1h-1v1h-1v1h-2v-1h-1v-1h-1v-1h-1Z" fill="#B01030" stroke="#101010" stroke-width="0.2" paint-order="stroke"/></svg>6 -
Are there any good uml connector libraries to connect svg components using svg paths. The connections should sustain even if the svg components are moved/dragged around.
-
Modern Web Developer
(To the tune of "I Am the Very Model of a Modern Major-General" from Gilbert and Sullivan's "The Pirates of Penzance")
I am the very model of a modern web developer
I’m quite fluent with JavaScript; An HTML whisperer
My code is clean and elegant, I genuinely innovate
And even know my way around a Promise and async / await
I’m very well acquainted too with matters vector graphical
I understand why SVG coordinates seem magical
And even without Photoshop I elegantly can produce
A mockup or a logo in most any format that you choose
[Chorus]
A mockup or a logo in most any format that you choose
A mockup or a logo in most any format that you choose
A mockup or a logo in most any format that you choose
I'm quite adept at ES6 expressions like destructuring
I know the ins and outs of functional reactive programming
In short, in matters browser-based or Node.js if you prefer
I am the very model of a modern web developer
[Chorus]
He is the very model of a modern web developer
I know our mythic history, the humble start, the browser wars
I know why Douglas Crockford fought the battle over ES4
The World Wide Web Consortium and Ecma International
My knowledge of our legacy is truly supernatural
With LESS and SASS and CSS, designing for mobility
I’ll perfectly apply the right amount of specificity
From custom fonts and parallax to grid and flex and border-box
I know most every tip and trick both common and unorthodox
[Chorus]
He knows most every tip and trick both common and unorthodox
He knows most every tip and trick both common and unorthodox
He knows most every tip and trick both common and unorthodox
And when it comes to lazy loading, bundling up and splitting code
There’s nothing quite like Webpack, which of course is built on top of Node
Considering my resume, I’m certain that you will concur
I am the very model of a modern web developer
[Chorus]
He is the very model of a modern web developer
When new frameworks and libraries emerge I must be ravenous
And gobble up the hot new thing, my appetite is bottomless
React and Vue and Angular, Immutable, RxJS
The list will be outdated long before I'm finished singing this
My pull requests rely on multitudinous utilities
To help me lint and test and build, a deluge of analyses
And every single day there are a hundred thousand more to learn
The web is going through an irresponsible amount of churn
[Chorus]
The web is going through an irresponsible amount of churn
The web is going through an irresponsible amount of churn
The web is going through an irresponsible amount of churn
This pace is agonizing! Code from yesterday is obsolete!
The speed of innovation is enough to knock me off my feet!
It's happening too fast! I can’t keep up! I’m tired! It’s all a blur!
I am the very model of a modern web developer!
[Chorus]
He is the very model of a modern web developer!1 -
I'm wasting fucking hours to crop a fucking svg file!
I swear, I tried in all the ways, firstly I didn't want to download a software so I searched for some online editor, I tried fucking 10 of them, but none of these had a way to crop images. How the hell should I be able to craft images if I'm not able to decide the size, eh?
I read online that inkscape gives a lot of problems when it's about to crop images, and of course I didn't want to pay illustrator to fucking crop a file, so in the end I decided to give a chance to inkscape. The website gives me 502 bad gatweay.
Ok.
FUCKING CROP AN IMAGE.
2018.
TWO THOUSAND AND EIGHTEEN2 -
I don't understand why the fuck it takes me more than a day to fucking make an svg work dynamically with its background and it still doesn't work for fuck sake
-
A lot of graph theory libraries create a HTML/svg elements for nodes. Is it possible to convert the existing svg elements to graph nodes?2
-
Heya
Does anyone know how the profile customisation is made ?
i think i can manage to do it using canvas
But also svg doesn't sound that bad
So ?5 -
Ok just wanna share things that got me stuck for hours on my recent project and their solution. I hope it’s gonna help someone.
To start with, when I was implementing svg to png, i set an image object’s source with a data url. Normally this is going to trigger the onload hook. However for some fucked up reason it never triggered. The solution is to use setAttribute function and then the hook will be triggered.
Second, you can get rounded triangle by setting stroke width and set stroke linejoin and line cap as round. But remember, if stroke width is 6, then it’s 3 inside and 3 outside.
Third, if you have a rotation of svg element, and later on you want to manually compute the rotated point’s position, it’s most likely some vanilla code is not going to work. You see, when you rotate for x degree, it is actually rotating -x degree. I’m not sure if it’s a bug of my code, but it’s there.
And now the worst thing: if you look up how transform on svg is performed, stackoverflow is going to tell you it’s by order. But that’s somehow not true for my project. If I do set transform to do translation then rotation, the order it was applied is actually reversed. It’s rotation first then translation, like ffs why? Who the fuck said it was in order? It’s clearly in reverse fucking order.
Ok last thing, you can scale svg around it’s center, but absolutely don’t do that because it’s gonna fuck up tanslation and rotation applied to this svg. If you need to scale, translate it first then scale it will be better.
Anyway just some things i encountered. I’m gonna stay away from svg for at least two months now1 -
Welcome to school. In my case the place where you are getting teached design and the teachers don't know what the hell svg is. And teach you that gif animations are the best way to implement buttons on your website. 😂3
-
Chrome handles CSS animation on an SVG element with 500 nodes like a champ with an SVG graphic with outline animation over it.
Firefox barely animates the SVG then has tearing issues when a part of the SVG leaves the viewport and re-enters. Annoying AF and now a changed design. -
Whoever decided that the SVG's default point of origin should be the top left instead of the bottom left can go to hell.7
-
working with Mapbox and so far everything works except displaying custom svg pointers for single points while clustering the multiples.
the documentation is only semi useful.
and my work-at-home coworker keeps meowing at me like that guy who wants to talk about TV shows whenever I'm working
I want a nap! -
Article about creating gradients programmatically.
FullHD png with gradient at the top...
Use fucking svg or at least webp! It's 2k17 already. -
Alright lads and lasses, I need a charting library!
I've narrowed it down to the following popular libraries:
- victory
- recharts
- nivo
- react-vis
I think I'm leaning towards victory and recharts since they are d3 based... because <3 SVG
Even more so victory since they have a near identical React Native package...
Would love to hear any battle stories from the front lines and experience using any of these libraries, or even a completely different one I may have missed!
inb4 "mAkE iT fRoM sCrAtCh"
inb4 "hAhA rEaCt SuCkS"
Such comments will be downvoted with impunity!4 -
I need to position circles on a curve in a HTML page, the number of circles can be variable (a minimum of 3 and a maximum of 7) and these should be spaced equally. Each circle is a clickable element that has some functionality, and also just hovering on these circles should show a thumbnail right beside them.
https://i.stack.imgur.com/jC3gE.png
As shown in the above image. The whole design consists of 2 of these curves one on the left and one on the right(I cannot put the whole design here sorry) one approach I can think of is rendering the curve as an SVG and then position the beads (circles) on them but I cannot think of any way to position those elements exactly on the svg. Any kind of help or code which achieves this functionality is a huge help.
Note: I am using Angular, if there's a nice way to do the same in Angular I'd be pretty delighted. I know that this isn't the right place to ask this but any help would be greatly appreciated.
Thanks in Advance10 -
I had to make a ruler grid for an existing horizontal scroll website project, but I had the job basically for sure.
I came up with a solution which included PHP-generated SVG embedded in HTML.
It was a new thing to me at that time, but a cool challenge. -
Does anyone know of a good tool or service for compressing svgs for web.
I got about 80 files I need to reduce in size
Help!7 -
I simply hate d3.js. This thing is a night mare. stupid svg and canvas and d3.js
Fuck this charting library. Burn in hell!1 -
Hitting every. single. fucking. dead end on my unstoppable march to introduce a nice feature.
I'm trying to embed interactive svg maps in a Wordpress page in such a way that the areas can be edited intuitively using Inkscape and all the page does is inline the xml markup, but also there's a JPG background embedded in the picture which Wordpress finds too big for markup (unsurprisingly) but which is a pain in the ass to reference externally. -
Fucking android...
Spent my whole day trying to tint (i.e. alter the image color) some svg with a PictureDrawable in an ImageView.
Went android underground, thought it had something to do with LAYER_TYPE_SOFTWARE (since this was required to render the underlying svg), tried my way through ColorFilters and ColorStateLists...
8 hours later I discovered that apparently YOU CANNOT TINT a PICTUREDRAWABLE - this only works with BitmapDrawable. *argh*
And not a word of mention in the fucking documentation *tit*1
Top Tags
Weekly Rant
View