#(which is not hard since i don't know javascript) | Explore Tumblr Posts and Blogs

izicodes · 1 year

Text

Anonymous ask came through | My story

I accidently deleted their ask, so I'll answer it here

Someone messaged anonymously me saying I was privileged to get the apprenticeship and that I shouldn't be sharing tips on my blog about Junior Developer roles since I’m “experienced” (I've only worked for 1 year and 5 months which my apprenticeship lasted for one year).

The anonymous person mentioned they have been studying for 6 months and still haven't found a tech job or the job they wanted. They mentioned that I shouldn't be making posts and share tips because I'm at a privalge position coming from attending an apprenticeship and I don't relate to what they're struggling with - to that I'm sorry it's been hard for you, I wouldn't wish that for anyone studying entirely on their own. please keep trying, don't give up.

But what the anonymous person doesn't know is how hard things were for me and my family for many years to even get me to where I am today.

I am privileged to be in the UK to be able attend school, privileged to get accepted into an apprenticeship after doing two exams for it but:

I come from a family who were classed as "very low income" by the government for many years and only recently we broke out of that.

I learnt HTML, CSS, JavaScript and Python on my own before the apprenticeship gave lessons on it and by then I already knew the topics.

The apprenticeship didn’t teach me Git or GitHub or how to set up VS Code or Visual Studio - I taught myself online.

I learnt SQL and C# from YouTube because the teacher was so bad at explaining things.

I only passed the two required exams for the apprenticeship after failing 3 times - which I posted about it on my blog.

I taught myself the tech I use today, the apprenticeship did was secure me a job and having a Lead Web Developer to shadow, though he had his own projects he was busy on.

When I realised the apprenticeship wasn’t going to teach me everything I needed to learn for my tech career, I joined and completed a free online night coding bootcamp from the government and studied for 16 weeks whilst having the apprenticeship and work to attend to.

All I do on my blog, my little tiny corner of the internet, is share my progress, tips through tutorials, write posts about a topic I learnt recently and share information I get from attending those career masterclasses that free for people to join in the UK. I want to help people, not to flaunt my success. I’ve failed lots of times and posted about them on here - exams, work projects and even my own personal projects.

I may not be a self-taught with no experience and suddenly got a great tech job that the anonymous messenger wanted me to, but I’m still going to share my experience and tips that might help people out their own their own coding journey (that’s why I end some of my posts with “I hope this helps someone out there”). If you’re looking for someone that is self-taught and got a successful tech job from no previous experience, I don't think I am that person for you to follow, there would be no point following my blog because I got the role through an apprenticeship - the job was not secure though as I had to pass or they would have fired me.

So, I apologise to the anonymous person who messaged me who looked at my blog and was upset with me sharing tips on coding and it seemed like I came from that specific background they wanted me to be. However, I won’t stop sharing posts, beacuse someone out there might appreciate them and if no one does, that’s 100% a-okay! My blog is also a record of my coding journey and I’m not going to stop! :D

All I do is to make my Dad proud. Through things didn't go well for him over the years, I hope that when he sees me, he's proud and felt like after everything, I was worth it.

My family consisted of a single dad with two daughters since late 2000s UK. Mother left because she didn’t want the responsibility of looking after me and my sister. My father gave up everything to solely look after us - that meant not getting a job. We were in the benefits system for years after years, only in 2021 did we end it completely, so basically two years ago. I didn’t have much growing up and I mean the bare minimum. The only games I had were The Sims 3 base game and games on my Nokia brick.

The benefits money he got, he tried to get me and my sister to a private school just for us to see what it was like, but it only lasted a year before he realised the money was not enough. Dad made me and my sister really study hard to get into an all-girls independent school - a school where you have to take exams to get in. I took those exams and got into the school in 2013. When dad saw the confirmation letter, he cried. All his hard work was paying off. That inspired him to try university out, doing computer science.

It was when I finished secondary school I got my first iPhone in 2018 from Dad as a “well done for completing your GCSEs” gift. However, I didn’t do good enough to do the subjects I wanted to go and do medicine, so I had to switch my course from Biology, Chemistry and Maths to English Language, Combined Science and Economics. I’m grateful for economics, made me understand the government and the world a bit more (and understand what the hell news was talking about most of the time)!

I was failing. Miserably. I was pressured from my school to retake the year, so my dad advised me to quit and join a community college instead. In there they let me to my 3 subjects to do Medicine at university. However, I was failing again, had health issues which lead to me having to quit school early. I never completed my A-Levels. I was stuck for months doing nothing when I decided to get a call centre job. Liked it but last for only 3 months. I was inspired to learn programming again but properly so I can get a job. I realised how hard for self-taught beginner programmers to get a job, and I knew I would be in the mix but my dad was already struggling at home and I needed money fast to help him.

I started looking for apprenticeships even if it doesn’t pay similarliy to a full time job, it’s something to help dad. I was still of age to apply to the ones I kept seeing so I applied to a bunch. No answer. I kept learning Python and JavaScript and applied more. Then one came back saying they wanted an interview. They didn’t tell me the first interview was going to be an exam?! Last an hour and a half and then they talked to me afterwards. Got another interview with them - exam. And the last was talking to one of the partners of the company.

When I told my Dad I got the apprenticeship, he cried again. I knew he felt like I was failing left right and centre and he was a little bit losing hope on me, but for everything he’s done for me and my sister, I couldn’t let him down. And guess what my Dad did when I told him I completed my apprenticeship last month? Yep, he cried.

And I thank the gods and the universe everyday for the opportunity I was given to have done an apprenticeship because I can help my family more as I do have people here and around the world who depend on me and want me to suceed, so I will take every chance and opportunity I can get.

Dad said "If you're entitled to it, grab it. Any opportunty, grab it. You never know when it'll come back to greet you again"

#my asks #my story #codeblr #coding #progblr #programming #computer science #cs studyblr #tech #privilege #study hard

79 notes · View notes

ufoofy · 5 months

Text

Let's talk about filtering and mapping! 🤓

I'm working on the menu page for a restaurant, and as someone with very little frontend experience I wasn't sure how to go about parsing through a JSON file to return certain objects.

After some searching, procrastinating, going through this course, and then more searching - I finally came across the documentation I needed here!

So what is filtering and mapping? .filter() and .map() are JavaScript methods.

filter allows you to filter through an array of objects given some logic (want to find all the items with an id greater than 7? filter. Want to find all the items where the name is equal to "burger" that works too, want to add multiple conditions to find all the items with and id greater than 7 AND the name is "burger" well filter has got your back).

map is used to iterate through an array and call a function on every element in it. I used it to map each item to a list.

Here's an example: We have a JSON file of some food items.

We want to grab all the desserts from our menu and display them on the desserts page of our website. It's time to filter!

Keep in mind that the filter method returns a new array with all the objects that we want. In this case when we filter we will get an array with all the desserts.

First we import our JSON file so we can access it.

Next, we create a constant called dessertFilter which will hold our filtered array. dessertFilter will hold all items that have the type equal to dessert. In our example it will hold the chocolate cake object.

Next, we map each item from the new array to a list. This is the list that we'll see displayed on the page. You can choose which properties you want to map. We only map the name, description and price since there's no need for the user to see the item type or id.

Lastly, our return statement contains everything we will see on the page. In our return we have a header and the list of items - we wrap our list, dessertItems in an unordered list since list items need to be wrapped in either an ordered or unordered list.

Here's our result! We can style this with css later.

Cool! so we filtered for dessert but what about our other menu items? Time to make a reusable component.

The code is almost the same, but to make this component reusable we create an interface. Interfaces define objects and specify their properties. We specify an object called filterSearch that will act as a placeholder - we set it as a string since the item "types" in our JSON file are strings. (I'm using typescript which accepts interfaces but i believe vanilla javascript does not).

Now lets see the component in action

Import the component so we can call it.

When we call FilterMenu we have to include filterSearch from our interface. The component needs to know what we're looking for. Here we can set it to any valid type like "dessert", "drink", or "appetizer" and it will display them.

Woo! now we're filtering and mapping with one line of code! and we can reuse it for our other pages too.

Last thing, these methods are chainable! you can connect them and have the same logic in one constant.

Before reading the documentation, I had seperate JSON files for each menu category and was reusing the same code to map each file on each individual menu page. It was a lot of duplicate code, not great. Now, I have a single JSON file and a reusable component. It's satisying how clean it is!

Learning on your own can be frustrating sometimes, it can be hard to search for solutions when you don't know where to begin. I had never heard of filtering or mapping before this. If you're ever stuck keep pushing! there's so many resources and communities out there.

p.s. I'm open to any suggestions!

#codeblr #this is my first codeblr post #hope its readable lol #filtering #mapping #ufoofy codes

10 notes · View notes

quietmarie · 6 months

Text

Anyone can program (yes, even you)

"Programming is easy"

I saw some variations of this statement shared around the site recently, always in good intentions of course, but it got me thinking.

Is that really true?

Well it certainly isn't hard in the way some developers would want to make you believe. A great skill bestowed only upon the greatest of minds, they're the ones making the world work. You better be thankful.

That is just elitist gibberish. If anyone ever tells you that programmers are "special people" in that way, or tries to sell you on the idea of "real" programmers that are somehow better than the rest, you can safely walk in the other direction. They have nothing of value to tell you.

But I think the answer is more complicated than a simple "Yes, programming is easy" too. In all honesty, I don't think it's an easy thing to "just pick up" at all. It can be very unintuitive at first to wrap your head around just how to tell a computer to solve certain problems.

One person in the codeblr Discord server likened it to cooking. That's a skill that can be very hard, but it's also something that everyone can learn. Anyone can cook. And anyone can program.

I really mean that. No need to be good at maths, to know what a bit is or whatever it is people told you you need. You're not too old to learn it either, or too young for that matter. If you want to start programming (and you can read this post), you already have everything you need. You can write your first little programs today!

One of the cool things about programming is that you can just fuck around and try lots of stuff, and it's fine. Realistically, the worst thing that can happen is that it doesn't work the way you imagined. But you'll never accidentally trigger the fire alarm or burn your house down, so feel free to just try a bunch of stuff.

"Okay I want to learn programming now, what do I do?"

That's awesome, I love the enthusiasm! As much as I'd love to just give you a resource and tell you to build a thing, you still have to make a choice what you want to learn first. The options I'd recommend are:

Scratch: A visual education tool. The main advantage is that you don't have to worry about the exact words you need to write down, you can just think about the structure of your program. The way it works is that you drag and drop program elements to be executed when they should be. You can relatively quickly learn to make cute little games in it. The downside is that this isn't really a "professional" programming language, so, while learning from Scratch will give you the basics that apply to most languages and will make switching to another language easier, you're still gonna have to switch sooner or later. Start here: https://scratch.mit.edu/

Python: The classic choice. Python is a very widely used, flexible programming language that is suited for beginners. It is what I would recommend if you want to skip right to or move on from Scratch to a more flexible language. https://automatetheboringstuff.com/ is your starting point, but there's also a longer list of resources here if you want to check that out at some point.

HTML/CSS/JavaScript: The web path. HTML and CSS are for creating the look of websites, and JavaScript is for the interactive elements. For example, if you ever played a game in your browser, that was probably written in JS. Since HTML and CSS are just for defining how the website should look, they're different from traditional programming languages, and you won't be able to write programs in them, that's what JS is for. You have to know HTML before you learn CSS, but otherwise the order in which you learn these is up to you. Your JavaScript resource is https://javascript.info/, and for HTML and CSS you can check out https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web.

I put some starting out resources here, but they're really just that - they're for starting out. You don't have to stick to them. If you find another path that suits you better, or if you want to get sidetracked with another resource or project, go for it! Your path doesn't have to be linear at all, and there's no "correct" way to learn things.

One of the most important things you'll want to do is talk to developers when you struggle. The journey is going to be frustrating at times, so search out beginner-friendly coding communities on Discord or wherever you're comfortable. The codeblr community certainly tends to be beginner-friendly and kind. My DMs and asks are also open on here.

#programming #is that a motherhecking RATATOUILLE reference??!?#codeblr #coding #the only reliable predictor of whether someone can be a good programmer is whether they have or can develop a passion for programming #how did me thinking “well is programming actually easy" turn into a resources post uhm #coding resources #shoutouts to the codeblr discord they're coo #long post #Most good programmers do programming not because they expect to get paid or get adulation by the public; but because it is fun to program #- Linus Torvalds

16 notes · View notes

cinnabar-surfin · 2 months

Text

//Mod and character are autistic and adults, wording may seem stiff or unnatural if there's any confusion on anything I say please message me and I'll clarify! I follow off shinyzubats//

//yet another rotomblr blog from @shinyzubats //

(Character info under cut)

Hello....I'm Kiki (he/it), 30 years old, did you know there's pokemon the normal person doesn't even know exist? I am a self proclaimed 'missing number' and 'glitch' pokemon expert, having officialy and properly studied these creatures since my late teens, though ive been encountering them since i was younger. I will not be revealing where I currently live, what I have done to obtain these pokemon, nor the names of anyone i know in real life. Though I am originally from Cinnabar Island, where I first encountered a 'missing number'

I assume I should tell you about my team now.

Javascript the Charmander, lvl 85 - yes she is a Charmander, no I will not be revealing why she looks like a bulbasaur, yes she is still a fire type, no she cannot evolve.

HTML the Nidoking, lvl 100 - yes he is really level 100. He is also incredibly shy, please do not send mail with the intent to scare him. It's a shame I even have to ask that

C the Gengar, lvl 285 - he is lvl 285, why is that so hard to believe? I don't really see him often as he likes to watch from the shadows.

Mewthree the Mew, lvl 1 - I am not entirely sure this is a mew, despite what the pokedex tells me. Sounds like a zapdos and only knows transform. Rather sweet which is surprising.

Perl the ???, lvl unknown - a 'missing number' taking the form of a ghost, I don't know it's specific classification nor its level, it is not registered to me yet follows me around very closely.

BAD EGG the egg, no lvl - this was once a breloom named Python, I am unsure what happened to cause Python to revert back to her egg state, nor why she is registered as 'bad egg' but I hope to rehatch her soon.

Pokemon NOT in my battle team ;

Lola the Zubat, lvl 5 - a jolly natured zubat with a lack of teeth, shes new around the house but seems to really like to sit on my head..

Milo the Zubat, lvl 5 - a calm natured zubat, like Lola he's new, he seems to really like napping and likes to ride around on HTML to nap..

//tags and such I use under here

pelipper mail, pelipper malice and pelipper un-mail are always open on this blog! Magic anons are also fine! Hatemail is encouraged!

#Kikidoesramble - rambling ic

#Kikiknowsall - awnsering asks

#CharmanderJavascript - anything relating to Javascript the Charmander

#NidokingHTML - anything relating to HTML the Nidoking

#GengarC - anything relating to C the Gengar

#MewMewthree - anything relating to Mewthree the Mew

#Perl??? - anything relating to Perl the ???

#EggBADEGG - anything relating to BAD EGG the Egg

#DuoZubats - anything related to Milo and Lola the zubats

#ooc/ic -> in character / out of character

#pokemon #pokemon irl #pkmn irl #irl pkmn #irl pokemon #rotomblr #rotumblr #pokemon rp #kikidoesramble #kikiknowsall #charmanderjavascript #nidokinghtml #gengarc #mewmewthree #perl???#eggbadegg #ic #pkmn

5 notes · View notes

ratgirlcopia · 5 months

Text

tumblr post format isn't kind to fics, but this is so short and so specific to the mad ravings of someone who dug around in halloween quiz javascript that it'd never make it on ao3. i don't feel like sending it to the glue factory either, so here you go.

It's Halloween.

It was a little weird that Copia hadn't realized until Sister Imperator had mentioned it in passing. She hadn't asked if he had plans, which was fair enough, he thought. He didn't usually have plans. Since the end of the tour cycle, plans had been hard to come by. It had been, what? A couple of days? It was fine to take some time getting back into the swing of things. He’d be back to normal before—

Ah. It had been more than a couple of days. More like three weeks and some change.

The last tour hadn’t been so hard to get over. Sure, it was always an adjustment period. But this one was so much worse. He’d thought retiring was the right choice, would get his mind off everything. It had felt like the right choice, after—

-12 September 2023, Los Angeles-

“Cardi. Cardi, what are you doing?”

Copia shut off his phone, hands shaking as he laughed. “Ah, sorry about that. So sorry. Uh, where—where were we?”

The dancer in front of him tilted her head and extended a single finger to trace along his cheek.

“Hmm, should I be jealous?” she asked, raising an eyebrow. She sat on the edge of the stage, one leg crossed over the other. The white latex nurse’s cap atop her head was askew, and she wore a wig underneath that curled up, blonde hair fluffing against her cheeks.

“Eh…no. That was my mother, so—no,” Copia said, mouth dry.

The dancer snorted. “Maybe not jealous then, but worried.” Her hand stilled on Copia’s face. “Huh. Your skin’s really smooth. Did you shave right before you came here or something?”

“I, uh.” Now his mouth was even drier. “No. I, um…laser. Laser hair removal. It’s a hassle, you know, shaving all the time.”

He fumbled for his glass, a vodka cranberry that was already starting to hit him in all the worst ways. He took a sip, then shrugged and tossed the rest of it back. Big mistake. Even while he was on the road, he almost never drank, but he was three or four in already, and it still wasn’t hitting. Anything to get those words out of his head. Good show, C. It’s funny, you looked like Marilyn Monroe up there. Well, with skeletons, but—

“I get it. I did the same thing,” the dancer was saying, a smile quirking up her lips. “It’s the worst between sessions, isn’t it?”

Copia blinked. Oh. The laser sessions.

“Yes. Yes, it’s—” The alcohol wasn’t quite letting him take that concept to its natural conclusion. “You’re…?”

“Trans, yeah.”

Vision wobbling, Copia stared up at her, the music from the overhead speakers fuzzing out in his ears.

“You’re beautiful,” he managed, voice sticking in his throat. “Really, uh—really really pretty. I can see why people like you here, you’re so—”

Her hand slid to his shoulder, eyebrows furrowing in concern. He swayed in place, empty glass clattering to the floor, but he couldn’t stop staring at her, couldn’t keep his mouth shut.

“I wish—” Copia wanted to be quiet, wanted to stop talking before he said something he couldn’t take back. “I wish I could be like you. I wish I could—I want to—to—”

Be like her. Her. Her.

“I want—”

And then he hit the floor.

It’s Halloween, Imperator had said, then laughed. What do you want to be?

#copiaposting #fic tag

6 notes · View notes

mentalisttraceur-software · 1 year

Text

An aimless rambly post about in-browser Pythons, with the approximate theme of:

I think I'd recommend PyScript at least as much as Brython for quick practical Python-in-the-browser web development if you don't really need to optimize performance.

PyScript is much more "heavy" since the underlying Pyodide is a full compile of CPython to WebAssembly, plus libraries, one of which gives it a built-in ability to download modules from PyPI from within the Python running in your browser. The heaviness and slow load time used to annoy me, but it buys you much more compatibility and certainty of compatibility with CPython.

The killer feature for me is being able to just import most packages that you might want to use without any of the hassle of "how do I get this into the browser?". Just `await micropip.install(foo)` in your browser-side Python code before `import foo` and you're good to go. Python has always been the language you reach for, first and foremost, when you strongly prefer to optimize for developer time+work instead of computer time+work, or when you want a great ability to tinker or modify code in situ. And doing something resembling "pip install" in the browser is very much a good example of that.

Right now, if you wanted to use one of my Python modules on Brython and you didn't know where to start, I'd have to write several sentences - grab the source, put it over there, maybe run the right brython-cli command to bundle it. If you want to use one of my Python modules on PyScript, you just grab it from PyPI with micropip and it just works (barring some edge cases which I recently helped them fix, which is in micropip v0.2.0 already and should be coming to Pyodide in v0.22).

One thing I liked about Brython is that it ships with some quality-of-life improvements for manipulating the DOM through its `browser` module, which tries to provide some ergonomics that you can't get in JavaScript for lack of operator overloads and the like. But PyScript has a good enough FFI to JavaScript that we can just start with the DOM manipulation that we would do in JavaScript, and then code whatever Python ergonomics we want around it (which could then just be uploaded to PyPI).

I also have mixed feelings about how PyScript gets all over the HTML namespaces - tags like `<py-script>` and `<py-config>`, attributes on HTML elements like `py-onclick` or whatever, that kind of thing. It's adding complication/coupling/non-orthogonality to buy a little developer experience friendliness. It feels fine now but I expect it'll prove clunky and annoying over time in various little ways - although to be fair, that's a problem that in part requires browsers and web standards to solve, and once that's standardized it shouldn't be too hard to migrate.

PyScript load times and download size can be pretty bad, but they're working on it. Admittedly an inherently hard problem, but I still think in the long term that gets solved out-of-band. Anecdotally, comparing the Brython website's demo REPL and the Pyodide (which PyScript uses) website's demo REPL, Brython loads perceptibly faster. But I haven't done any hard thorough measurements for real-world websites. For example, Brython lets you build a .js file with just the modules you're using, while the REPL on their website includes the whole standard library just in case. I'm not sure what PyScript's story is for that, but the out-of-band solutions are obvious and similar - bundlers and so forth.

Thing is, if you're really angling for performant Python-in-browser, you either transpile Python to JavaScript (something like Transcrypt, trading some semantic/feature consistency for speed), or you compile your Python to WebAssembly (conceptually something like Cython+Emscripten, but I haven't tried it or looked into how to actually do it) - and if you do that last thing, well incidentally you can upload that as yet another pre-compiled WASM wheel to PyPI which can then be used with PyScript too. And that looks a lot like the modern Python world where CPython speed is fine and if it isn't you compile the hot path Python code into native code.

Just like the Python of old, it will be one of the slower languages on the block for a while. Longer start up or page load times, more memory usage, more overheads all over the place just in case you're using the dynamic flexibility at execution time. That's fine. Humanity used Python twenty years ago, and it was fast enough for many uses. Today I think PyScript is in a similar boat. It will be slow, at first. That's fine. People will use it when they need to go fast, when the productivity or expressiveness or flexibility benefits of Python matter more than the fact that the page took a little while longer to load. Especially since you might be writing a web page that gets opened once and then stays open for hours or days on the user's computer.

Slowly but surely the automatic optimizations will catch up, and in the meantime, PyScript seems like the best contender for the cases where you want Python, not almost-Python but really Python, in the browser.

#web development #brython #pyscript #transcrypt #python #software #pythons in web browsers

19 notes · View notes

fromkenari · 8 months

Text

This a reminder that a long, long time ago (2010/2011) on this hellsite (neutral,) I offered my code for Followr (a mass follow/unfollow tool) to the guy who created missing e, and he had a tantrum that I had created a tool that made following a list of people on Tumblr easier.

So I hosted it myself until Tumblr revoked my API privileges and then limited the number of people you could follow and unfollow in a day AND paginated the API for follows and followers, which is why for a long, long time (who knows, maybe it's still this way) the number of blogs listed on your follow and followers pages did not equal your listed number of Follows and Followers.

I've made several Tumblr fix-it scripts since then, and Tumblr has changed itself so many times that nothing I (or several other people) created works anymore.

The important thing to remember is that people claiming to be all for making Tumblr user-friendly are sometimes just hypocrites. I used to get anon hate (because yes, actually, sometimes Tumblr would quietly change their codebase two days in a row and leave us scrambling, as much as I know that's hard for assholes on the internet to understand, it happens), and got my code jacked on this site ALL the time (by people with large followings who would claim they "bought it"/"found it" on Twitter when all they did was remove the license information from the top and then block me.) You don't distribute code through filesharing sites. You use a repository.

Tumblr blows nuts these days, and right now, I only know of XKit Rewritten that is still working, but hey, maybe, someday I'll write another script to make Tumblr more user-friendly in the actual sense and not make it a Shitter knock-off like the current dipshit in charge did.

P.S. In case you didn't know, Tumblr no longer allows Javascript to be used in themes or page code, which is the second biggest reason it was so popular in the late 00s. The first being, of course, that they allowed the hosting of porn. Y'all keep throwing around that screenshot of 2010 Tumblr like it's something. At the dawn of Tumblr, there were no post types or photoset templates. We had browser scripts to add them. You also got an email for every Reblog, Like, and, of course, new Followers. The <big> tag was the most abused thing despite most HTML tags being game on the dash. <marquee> was pretty popular, too. And no one fooled themselves by thinking the search or tag system was usable.

You don't understand how exhausting it is to think of everything this site has gone through in a little over 15 years. Comparitively very little of it for the better.

#tumblr #vent #out of credits

3 notes · View notes

elyanics · 11 months

Text

Small Life Updates; Website, Store, And More!

Hello all! I know I've not been super active the last little bit lol- I've been trying but for those of you who know me, my health is. Very all over the place so it's been a little hard to create stuff recently.

I've also been working very hard on setting up a website that I can host my portfolio, take commissions, and sell prints from. Making the website has been pretty easy, since I know a decent amt of HTML and CSS and it's not too hard to look up JavaScript tutorials for the things I wanna do. Where I've been struggling is the commissions and shops part. I don't want to use my redbubble store anymore, partially because my parents STILL owe me the profits from it and will not transfer it so I haven't actually made any money for the ~5 years it's been active, partially because the profit margin is god awful (I'd have to make everything like $60+ in order to get any value from it and I don't want to do that to y'all), and partially because I want to be the one controlling my art and my products. I am a disabled uni student, so making and selling prints on my own is a little bit of a hassle- I can do it relatively easily in terms of the printing and shipping, but setting up the shop front for it (like the order page) is being a massive issue for me atm and I'm not sure the best way to go about it. If anyone has suggestions I'd appreciate it!

I'm looking into HTML/JavaScript templates for a web store, but my current idea is to just have a list of the print options and a copy/paste email template for people to use to email me their orders so I can fill them that way. It doesn't feel very professional or ""safe"" that way though, so I don't know if anyone would feel comfortable doing that (which is valid tbh). We shall see what I can come up with.

Thank y'all for sticking with me for all these years lmao, it means a lot!! Hopefully I'll be able to post more in the coming months, I've got some WIPs im finishing up and will hopefully have the energy to start some new stuff or redo some old stuff too.

Happy disability pride month, love y'all /pl, have a good one!

#archers voicebox #looking for advice #web development #digital artist #artists on tumblr

0 notes

surely-galena · 2 years

Text

NXX Members with Coding Languages I Think They Would Enjoy

In which I use some of my vague knowledge for entertainment purposes :D

WC: 0.7K

MC/Rosa: the building blocks in Scratch

Whatever MC does, she gives it her all and coding is no exception!

I'm thinking she'll likely start small and build from there (pun unintended), and that she'll probably take a lot of enjoyment from the puzzle-shaped pieces in Scratch

She's learning the foundation to writing programs!

Soon she will be able to master every language and become an expert in all things programming

Luke: Command line / Python

Command line isn't exactly a coding language per se, but if Luke did have a favorite language, I think it'd be Python (although I think he can comfortably code in multiple languages since he can easily hack into the Big Data Lab!)

I'm saying Python slightly because I'm biased, but also because Python offers syntax that is easy to read and is also fairly simple to write -- because of said less complicated syntax

Also, snek! A young Luke sees that the language is named after a Cool Reptile and says, "yeah I'm gonna go learn that right now"

Moving on to the Not A Coding Language: Command line (could be Windows, Linux, whatever they have in Stellis)

Luke is the kind of person who likes taking things apart, building them back together again, but it's not the same as before oh no you'll find that your toaster is not an ordinary toaster anymore, it also triples as an inkjet printer and a metal detector!

With any kind of command line interface he's allowed to go crazy with an electronic device! He used to have a cheat sheet of all the commands next to him but NOT ANYMORE, he's memorized them after hours of playing around with them (and if he forgets anything, there's probably a command along the line of /help that he can type in to get the information he's looking for)

Artem: CoffeeScript

While Artem likes JavaScript well enough, he enjoys the simplicity of CoffeeScript

Because CoffeeScript is essentially just Javascript with nicer syntax (or as the CoffeeScript website puts it, "an attempt to expose the good parts of JavaScript in a simple way.")

Also, it has coffee in the name and while he's not going to admit it, it's hard to resist (and coffee is pretty on brand for him)

If Artem is in the mood for curly brackets, he can switch to JavaScript fairly easily, but he's very comfortable with CoffeeScript, even if it does raise eyebrows at times due to its status as a lesser known language

"CoffeeScript?" Celestine asks. "Is that a real thing?"

"Yes," Artem says, and quotes the CoffeeScript website: "It's just Javascript."

Vyn: C or C++

Because Vyn is insane

That's it. That's my reasoning

I think other than C or C++, Vyn might like SQL? That's the database language for managing/sorting data and who knows? He might like that. Might find it relaxing, even

But back to C!

Vyn falls in love with C by first going through the full experience of pain: the missing semicolons, the dropped bracket, each and every skipped indentation

But C can be used for loads of things, I mean it's been around for approximately 50 years and heaps of things are coded in C

And Vyn knows, that when he's mastered it

He will be unstoppable

Marius: LOLCODE

I have been waiting for the day I can finally bring up this coding language, and today is that day!

Because tell me Marius von Hagen would not have the utmost pleasure beginning programs with HAI and ending them with KTHXBYE

Tell me he wouldn't enjoy loops that are essentially written as IM IN YR LOOP and IM OUTTA YR LOOP (rather than the conventional phrasing for while and for loops)

While I don't have enough knowledge to write in LOLCODE, I still find it hilarious and I think Marius would have a blast just playing around with the commands

Other than LOLCODE, I think Marius would like CSS (and maybe even HTML, they go hand in hand)! It can be a pain sometimes but the possibilities are next to endless (making things pretty with computer language? Seems like it could be right up his alley)

Side note on Vyn and C/C++: I have the utmost respect for people who can write in C, because I have struggled with it -- although honestly maybe that's because I don't spend enough time learning it (and because Python 3 is my favorite haha)

Edit: to all the people in the tags who said Luke would like Java, yes you are completely right I just know next to nothing about Java :')

#tears of themis #let me be a nerd for a quick second #yes I am indeed talking about programming languages today #sam wherever you are I think you might enjoy this #luke pearce #artem wing #vyn richter #marius von hagen #mc | rosa

85 notes · View notes

interact-if · 3 years

Note

HALLOOOOO! first of all, let me just say what amazing work you mods are doing! this blog has been a huge help so kudos to all of you! thank you for your hard work!!! 😁😁😁😁

on to my question...what would you, since some of you write IFs as well, suggest to those who wants to start writing one? i really, really want to write one, but i guess i'm really intimidated by the thought of coding. also, how did you choose your medium? what made you choose ChoiceScript or Twine?

sorry for the long ask. 🙏

i hope you all have a good day!

Thank you!!

I'll start us off by saying that yes, coding isn't easy, but don't be daunted! Take it one step at a time, use your resources, ask for help, and you'll learn how to do it to a point where it comes a lot easier to you while you're writing!

I started Smoke & Velvet (now When it Hungers) in Cscript without knowing anything about coding in that language and I've learned a ton since then! I'm now transferring over to twine, facing the same daunting, overwhelmed, feeling I had when I first opened up the cscript tutorial :'D

W3schools is a great resource, so is freecodecamp and mimo, if you want to start diving in to html, css, and javascript (start with html, then work your way up, start small, read code line by line instead of looking at it as a whole lest you become overwhelmed).

I chose Cscript at first because that was my only interaction with the IF community at the time. I didn't even know that twine existed, and had been lowkey wanting to write a game for years before taking the dive.

Going into twine now is challenging but I've been having a lot of fun with creating a unique format that has more accessibility options and features, like save slots, back buttons, sound, music, and other things that amplify gameplay.

There's still a long way left to go for me, but it's been a journey worth having and the community has been pretty wonderful for the most part. Be patient with yourself, with your writing, with your learning, and surround yourself with fellow writers and readers who support you and encourage you but also remind you to take breaks and drink plenty of water :D

- Roast

Alright, I’m not even going to sugarcoat this since I’ve been really open about this on all of my blogs, but I am writing all of my future games on Twine and translating my ChoiceScript WIP (Greater than Gods) to Twine as well. This is merely because I genuinely disagree with Choice of Games as a company, and as someone who does want to monetize my games I didn’t want it to go through them.

Now, maybe you don’t have that much of an issue w CoG or you don’t want to monetize your games, so my justification won’t mean much to you. Coding-language wise ChoiceScript is kind of friendlier since it’s less overwhelming than Twine when you first take a peek, but as long as you’ve got someone to ask (which you can find plenty in our Discord servers!) I believe that starting off with Twine and getting the hand of it can be good! The hardest part is adjusting to different languages so changing halfway (and translating one to the other) makes it overall trickier.

Also, personally, I didn’t even begin to code until I had a good chuck of the story written since I couldn’t get the ChoiceScript extras running on the computer I used to have. My vote is that if code overwhelms you, then postpone it as much as you can and let the story take you at first, just focus on the parts you love.

Yet, to be fair, after reading what Dani said.... all advice is subjective LOL so what might be the answer for me might just be problems for you and viceversa, the best advice will always be fuck around and find out

- Cruz

Currently I’m using CS, though there will be Twine in the future as well!

Initially, I didn’t really even know about the other side of IF (itch.io/Twine), so I went with what I’d heard of (CS). Ultimately, CScript is beginner friendly due to the fact that you’re not adding on the additional challenges of UI (user interface)/styling, etc, and it lets you get acquainted with algorithmic thinking, which I think is probably what people struggle with the most when getting started—cold, hard computer logic. Building that foundation is very useful if you don’t have previous coding experience.

As for tips for those getting started, these are mine (as someone from the CS background). Take these with a grain of salt; not everyone works the same way, but this is what works for me and what I find valuable, but I know that some of the other mods work in opposite ways, for example, LOL.

If you know nothing else, know the key middle point/event of your story AND how your story ends. This is super important, not only for your story, but also for coding. Because IF is about branching and converging, all those branches have to go somewhere, and at some point you’re going to have to pull them back together a bit before you send them branching back out again. Knowing these two points will save you a LOT of pain with coding and planning your branches AND with managing the feasibility of your project. Ironically, many people tend to start with the beginning of their story. But knowing where you’re going will really save your bacon.

Map your code for your chapter before you write the chapter. Yep. I said it. I’m in the minority here, I know that most folks don’t do this. But if you can do this, it means (A.) you’ve got a really clear plot map of your chapter, so writing it will be a piece of cake and (B.) you’ve really fleshed out exactly what’s happening/the various causal relationships, which means your code is probably going to be neat and concise. Plus, coding first is a whole heck of a lot easier than adding the code in afterward, when you have to hunt through walls of text to find where the various code lines should be added. I know it sounds bonkers. I know. Really. But if you can manage the planning well enough to pull it off, it’s well worth it. (It’s also worth noting that doing this lets you test your code a lot faster/first, which can also be useful when you’re first getting started. But might not be everyone’s cup of tea, heh.)

For CS, if you know of a WIP that has a feature you’d like to use in your game, code dive and see how that author did it. For example, if a game has a function to randomize the shirt color of a certain character every time you meet them and you’d like to do something similar, take a look at that person’s code! Odds are you can learn more than that. Look at different authors’ coding styles and see what neat tricks you can learn. And if you don’t know how to code dive come DM me LOL.

Lastly, on a more general note, the two big WIP killers are the fraternal twins Scope and Planning; that is to say, when the scope gets out of hand and there isn’t enough planning, that tends to be when WIPs die because the author starts to feel overwhelmed and/or demoralized. So, from the very start be intentional about planning. I know plenty of authors say they don’t plan but. I’m telling you now. PLAN. LOL.

Oh, also, if you do use CS, CSIDE is a program that’s dedicated to editing Choicescript and great for light testing and the like.

I need to shut up now because I’ve typed too much but if I’ve left you with more questions than answers you’re welcome to come hunt me down on my personal blog!

- Dani

I don't have much experience with Twine yet (but heavily considering switching) aside from fiddling around, and the other mods have given their two cents on CS that I already think so I'll mostly just stick to giving advice on writing an IF as a fellow beginner!

From what the other lovely mods have said, planning is your bestfriend! It's very easy to get swept up in the idea of making your own IF project but it does tend to be more overwhelming down the line without proper planning.

You can use mind-mapping tools, or draw one! I'm partial to bullet point outlining but it can be a little tedious as the chapters become more complex with branching.

So, sit yourself down and do some outlining. This is a general advice a creative writing teacher of mine has given me: ignore the beginning, skip to the ending. And it makes a lot of sense. Because as a writer, you'll get hung up on how you want your story to start. We are, to some extent, perfectionists with what we write.

So ignore the beginning, and instead think of how you want your story to end. Trust me, while you're at it, you'll get so many ideas/prompts of what you want to put in the middle. The beginning is easy pickings once you have the foundation of an ending laid out. Writing is a separate matter entirely, but y'all already know that.

Now let's talk about organizing! If you feel like you'll remember an idea later on, trust me, you won't. Write it down, write it all down. OneNote is my go-to with organizing my thoughts/prompts/ideas with my current project.

It's uploaded on a cloud and you'll also be able to access it on your phone! The sticky notes feature come in handy as well. Also, it's a good place to back up your code-formatted chapters/assets!

Lastly, please be kind and patient with yourself! There will be learning and writing frustrations, but it's normal. It happens. Don't beat yourself up too hard over it. Writing is a complex process, but also very worth it.

I mean, I get it. I constantly fall down the rabbit hole of, "If this rough draft isn't perfect then that means I am a horrible writer," which is absolutely not true!

Remember to take care of yourself in the process of writing. Figure out your limits because burning out and losing passion for a project can happen. Above all else, writing shouldn't feel like a chore, it should be fun!

- Nines

Goodluck, and have fun!!

Ko-fi link | Discord | Reddit | Featured Authors Interest Form

#if: resources #if: writing advice #interact-if asks #anonymous

85 notes · View notes

seafoamchild · 2 years

Text

this semester is going to be stressful i think. i have a javascript class with the teacher whose teaching style i don't like and i feel like it's going to be hard. i also have my internship and my serving job so i don't think i'll be able to do my landscaping job. which is fine, the money is whatever and i'm sick of driving all the way out there anyway, but i will miss my boss. we had a lot of fun together even though he also drove me insane with his chronic lateness and unpredictability. damn we laughed a lot together though. i hope he'll at least stay in touch.

oh also i filed a sexual harassment complaint against this like 70 year old man from work who kept telling me i had nice legs and asking for my phone number to the point where i would turn and walk the other way whenever i saw him. this was back in the summertime, and i just got an email with the case results that basically said he denied everything and said i was lying and so then nothing happened and the case is closed. like omggg. i wonder if he ever for one minute thought "hey, maybe that shit i said was kinda creepy". probably not. but i hope so.

i'm trying not to think too hard about the future. focusing on the here and now as much as i can. it's nice to be seeing someone again, like it's new and exciting, but i also don't want this to turn into something serious. like he is too much younger than me for it to work. and i don't know if i want a serious relationship in general. like those things are fucking intense man. and i simply do not have time. but all i've ever done relationship-wise is serious relationships. i've never really had like a fling or a FWB or anything. so this is new for me and i suppose i'm going to have to communicate this all to him sooner rather than later.

it's weird and fun, having all these changes. it feels exciting and fresh. i've really enjoyed making so many new friends at work, even though they're just work friends. i hadn't realized how much i was isolating myself, doing online school and only ever interacting with my boss at the landscaping job. now i see a lot more people in my day-to-day life and it's very nice. i try to see my friends often but it can be hard. everyone is busy. it's nice to be busy though. my life has been so unstructured pretty much since the pandemic hit, but now it feels fuller and more exhausting and more exciting.

#journal

4 notes · View notes

vanherst · 3 years

Text

Vher98 Update 5

I know it's only been a couple of weeks since the last blog post about my recent updates towards developing Vher98, but trust me it's for a good reason, I'll split it up into chapters to sorta give a bit more of an explination towards developments and get a bit more in depth about it for once.

Display properties.

This has been delayed for SO long, and finally I've gotten around to doing it. Finishing the display properties menu. The display properties has been the bane of my existance about this website but yet my best feature, just from the schemes feature alone. But this week I have a new addition, and that is to say I now have desktop icon schemes! Inwhich, allows you to change the desktop icons based on preselected spritesheets (Which you can also change by the command prompt!).

At the moment there are 6 presetswhich you can select, I recently did a massive sprite redesign for desktop icons based on my new character, Petra! But that's for a future update, for now I've set the default spritesheet and included all of the old ones, which you can select from, alongside being able preview them at a smaller resolution to be compatiable with the display properties window.

I've also added a few other settings which you can see previews of, not all of which are programmed yet, so at a future date I'll either change them around or program them. But for now, I've added the ability to change desktop icon sizes to a more native modern scale, but leaving the default setting as the classic windows 98 recreation.

I've also added additional wallpapers, only accessable through the effects tab and "CSGO MODE" which was featured in the background of the preview blog post, which recreates the settings for my counterstrike mainmenu, along with adjusting the desktop icons and wallpaper to fit.

As previewed above, designed to be a slight nod to my recent "Neon Genesis Evanjollion" video, featured on my youtube channel. I've recorded and animated my counterstrike character with loopable animations which play continuously in the background.

Now, I know this is a lot of text for what seemingly is a minor update, but the main reason I was able to design the latest additions to the effects tab was because of the recent massive rewrite I've had to do in order to fix a bunch of problems I was coming across, one of which being how unoptimised themes were reletively.

Left: new code which include schemes selection and the new effects menu toggles. Right: old code, only including schemes selection.

This entire re-write revolves around basically storing arrays of data rather than manually switching values of variables, along with tons of adjustments to unneeded variables and how theme data is required to be stored, as CSMODE needs to store the theme data to be able to toggle from the data needed to switch from the current scheme to CSGO mode.

I cannot understate howmuch of a rewrite this is, and as much as I would like to say "I really don't get why I ever did it otherwise", I would be lying. But this is a super incredable optimisation and looking at this comparritively makes me super pleased with how far i've come from knowing nothing about HTML/JS to this. Jquery is a godsend.

Start Menu

On my newly found optimisation craze, I've also done tons of rewriting to the startmenu, another long overdue reform. Even though I've recently done a rewrite on this thing, I knew there was still tons of improvements with my new knowledge of jquery.

Top image: old code in Javascript Bottom image: new code in Jquery

I've also put aside a few hours of time to dedicate creating new assets for the start menu. It became REALLY hard to find a nice and consistant style which windows 98 used, but it was really hard to find sources of any of the original assets but also have the levels of details I knew windows 98 for, especially when tons of the assets from windows 98 came from windows 95, which still relied on 8 bit colour in some instances.

So I did a bunch of digging and found the assets Windows 98 used at the end of it's lifespan and modified them a bunch to put into Vher98, giving my own personal touch and hopefully to keep the art direction of icons a bit more consistant and unique to look at and use.

Task management

Alright, last big one. Task management. Another long overdue reform was needed for this thing. Prior to this month, tasks relied on whatever manual order I decide to create the task and assign a number to, the number will dedicate placement on the taskbar depending on which value was the highest.

So for example, the Display Properties will ALWAYS be the third task on the taskbar if you was to open everything up, simply because I didn't know how to calculate the placement prior to designing tons of assets. Especially when the original conception of the site RELIED on myself manually creating the visual look of the taskbar as the entire site was designed based on images. From windows, taskbar to the starrtmenu. It was awfully inefficent.

Top image: Example of windows being opened from oldest (left) to newest (right). Bottom image: The new optimised and redesigned code for calculating taskbar placement and task assignment.

Anyway, that being said I now have automated calculation for taskbar task placement. If you open a task, it will open and remain in the order of the task being ordered. Writing this makes me have a smug little grin on my face just from how happy I am I was even able to get this to work properly, and it's only a few lines of math to even get the result I have.

Conclusion

There's tons of other stuff I wish to go on about, but that's why I have patchnotes. if you wish to read them, you can check them out on my github, or in the Startmenu of Vher98.

There's a few bugs I need to get around to fixing, but I've invested a few hundred hours into this thing over the past month alone and I really should take a break to get onto other projects I wish to get around to completing.

I recently started developing a mod for Terraria and some drawings I want to get around to finishing sooner or later. But, the most important thing I REALLY need to get around to is branding. Over the past month or two I've been growing more and more displeased with how I present myself and the fact I have stagnated a bit within the realms of my carear and I need to get around to sorting these personal matters sooner rather than later.

I'll be back with a couple of projects. It might take a while but I promise it's for a good cause.

#Theme #Tumblr #Tumblr theme #website development #website #site #vher98 #branding #update

3 notes · View notes

heywannalearn · 5 years

Note

Hello darling, I know you are so busy and I truly respect that so, if you don't want to answer it's all fine. My question is how I can convert program code from language to other for instance; c++ to python. And if you know how could I DM you with example? With all my respect and love

Hey hey!

I’m not sure what your experience and background with code is, so I’ll explain as if I’m talking to somebody who doesn’t know much. So, there’s quite a bit of difference between a language like C++ and python. I’m much more familiar with Python, but I’ll do my best to answer:

Biggest question: why do you want to convert this code?

If you’re talking about taking a source language and converting it into another source language, you’re probably thinking of “source-to-source compiler” (Wiki Link: https://en.wikipedia.org/wiki/Source-to-source_compiler). Sometimes called “transpilers”.

There are a few reasons why it might be hard (or easier) to convert your code:

1. The Types of Languages You’re Converting C++ is an extension of the C language. The code appears much longer and more drawn out than Python, which can be pretty short. For example:

(Image from Google Images)

I’ve never messed with C or anything like it. C++ as I understand it is both procedural and object-oriented since it added “abstractions” to the original C. Looking at the documentation, it’s quite different from what I’m used to in web dev.

2. These things exist! Sort of. For some things, there’s no such thing as a perfect service or app that will convert your languages. For other languages, there are successful examples of transpilers.

There’s a popular transpiler called Coffeescript, for example: “CoffeeScript is a programming language that transcompiles to JavaScript. It adds syntactic sugar inspired by Ruby, Python and Haskell in an effort to enhance JavaScript's brevity and readability.[4] Specific additional features include list comprehension and pattern matching.” (Source: wiki - https://en.wikipedia.org/wiki/CoffeeScript)

However, the difference between C++ and Python is a much wider gap than something like Coffeescript and Javascript. How big is that difference? I couldn’t say, but looking at the documentation for C++ and looking on Google, I would venture that it’s a wide gap right now.

Well, if you search “convert C++ to Python” there seems to be a few options out there, but based on my cursory research: these programs can be clunky and ineffective depending on what you’re trying to accomplish. Again, that goes back to my question: what is it for? Many users have asked the same question and basically been told: “Learn C++, pay someone, or post tiny bits of codes to forum for help.” This seems to be the general sentiment from StackOverflow and other coding forums.

See relevant StackOverflow questions here:

https://www.quora.com/Is-there-something-which-converts-code-of-one-language-to-other

https://stackoverflow.com/questions/11792529/c-to-simpler-language-python-lua-etc-converter

https://meta.stackoverflow.com/questions/296119/is-how-do-i-convert-code-from-this-language-to-this-language-too-broad

Based off all that: I would suggest getting some help through forums (Reddit, Discord groups, StackOverflow) for small tidbits, learning it to translate it yourself, or paying someone to.

Whatever happens, try your best! Good luck!

-heywannalearn

P.S. If any other CS nerds wanna get in here on this, let me know. I don’t know as much about converting languages that are more procedural like C, C++, etc. since I’m largely focused on web dev.

8 notes · View notes

siliconwebx · 5 years

Text

Creating an Animated Login Form for TouchID

I came across this amazing Dribbble shot by Jakub Reis a while back. It caught my eye and I knew that I just had to try recreating it in code. At that moment, I didn’t know how. I tried out a bunch of different things, and about a year later, I finally managed to make this demo.

I learned a couple of things along the way, so let me take you on a little journey of what I did to make this because you may learn a thing or two as well.

See the Pen Opening screen for a banking app by Kirill Kiyutin (@kiyutink) on CodePen.

Step 1: Split the work into parts

I watched the original GIF many times. My goal was to split the animation into small, digestible chunks and I was able to break it down like this:

Fill the fingerprint

Remove the fingerprint

Animate the path ends

Morph one of the curved fingerprint lines into a horizontal one

Animate the “bullet” that is launched by the line

Morph the string into a graph

Animate small exploding particles

Animate the account balance

And other small animations with some minor CSS transitions

I know, it looks a lot — but we can do this!

Step 2: Take the original demo apart frame-by-frame

I needed to extract as much info as I could out of the original GIF to have a good understanding of the animation, so I split it up into single frames. There actually are a lot of services that can do this for us. I used one at ezgif.com but it could have just as easily been something else. Either way, this enables us to get details such as the colors, sizes, and proportions of all the different elements we need to create.

Oh, and we still need to turn the fingerprint into an SVG. Again, there are plenty of apps that will help us here. I used Adobe Illustrator to trace the fingerprint with the pen tool to get this set of paths:

See the Pen css-t. paths by Kirill Kiyutin (@kiyutink) on CodePen.

We’ll go through the same process with the line chart that appears towards the end of the animation, so might as well keep that vector editor open. 🙂

Step 3: Implement the animations

I’ll explain how the animations work in the final pen, but you can also find some of the unsuccessful approaches I took along the way in the end of the article.

I’ll focus on the important parts here and you can refer to the demos for the full code.

Filling the fingerprint

Let’s create the HTML structure of the phone screen and the fingerprint.

The styles are quite simple so far. Note that I am using Sass throughout the demo — I find that it helps keep the work clean and helps with some of the heavier lifting we need to do.

// I use a $scale variable to quickly change the scaling of the whole pen, so I can focus on the animation and decide on the size later on. $scale: 1.65; $purplish-color: #8742cc; $pinkish-color: #a94a8c; $bg-color: #372546; // The main container .demo { background: linear-gradient(45deg, lighten($pinkish-color, 10%), lighten($purplish-color, 10%)); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 0; user-select: none; overflow: hidden; position: relative; // The screen that holds the login component &__screen { position: relative; background-color: $bg-color; overflow: hidden; flex-shrink: 0; &--clickable { cursor: pointer; -webkit-tap-highlight-color: transparent; } } // Styles the fingerprint SVG paths &__fprint-path { stroke-width: 2.5px; stroke-linecap: round; fill: none; stroke: white; visibility: hidden; transition: opacity 0.5s ease; &--pinkish { stroke: $pinkish-color; } &--purplish { stroke: $purplish-color; } } // Sizes positions the fingerprint SVG &__fprint { width: 180px * $scale; height: 320px * $scale; position: relative; top: 20px * $scale; overflow: visible; // This is going to serve as background to show "unfilled" paths. we're gonna remove it at the moment where the filling animation is over background-image: url('https://kiyutink.github.io/svg/fprintBackground.svg'); background-size: cover; &--no-bg { background-image: none; } } }

Now the hard part: making the fingerprint interactive. You can read about the animation of SVG lines here. That’s the method we’ll use to fill in each individual path.

Let’s create a class that describes a path element so that it’s easier to manipulate the paths later on.

class Path { constructor(selector, index) { this.index = index; this.querySelection = document.querySelectorAll(selector)[index]; this.length = this.querySelection.getTotalLength(); this.$ = $(selector).eq(index); this.setDasharray(); this.removesForwards = this.$.hasClass('demo__fprint-path--removes-forwards'); } setDasharray() { this.$.css('stroke-dasharray', `${this.length} ${this.length + 2}`); return this; } offset(ratio) { this.$.css('stroke-dashoffset', -this.length * ratio + 1); return this; } makeVisible() { this.$.css('visibility', 'visible'); return this; } }

The general idea is this: Create an instance of this class for each path that we have in the fingerprint, and modify them in every frame. The paths will start with an offset ratio of -1 (fully invisible) and then will increase the offset ratio (which we’ll refer to as “offset” from here on) by a constant value each frame until they get to 0 (fully visible). The filling animation will be over at this point.

If you’ve never animated anything with this frame-by-frame approach, here’s a very simple demo to help understand how this works:

See the Pen 60fps raf animation proof of concept by Kirill Kiyutin (@kiyutink) on CodePen.

We should also handle the case where the user stops tapping or pressing the mouse button. In this case, we will animate in the opposite direction (subtracting a constant value from the offset each frame until it gets to -1 again).

Let’s create the function that calculates the offset increment for every frame — this’ll be useful later on.

function getPropertyIncrement(startValue, endValue, transitionDuration) { // We animate at 60 fps const TICK_TIME = 1000 / 60; const ticksToComplete = transitionDuration / TICK_TIME; return (endValue - startValue) / ticksToComplete; }

Now it’s time to animate! We will keep the fingerprint paths in a single array:

let fprintPaths = []; // We create an instance of Path for every existing path. // We don't want the paths to be visible at first and then // disappear after the JavaScript runs, so we set them to // be invisible in CSS. That way we can offset them first // and then make them visible. for (let i = 0; i < $(fprintPathSelector).length; i++) { fprintPaths.push(new Path(fprintPathSelector, i)); fprintPaths[i].offset(-1).makeVisible(); }

We will go through that array for each frame in the animation, animating the paths one by one:

And we’ll attach some event listeners to the demo:

$screen.on('mousedown touchstart', function() { fprintProgressionDirection = 1; // If the animation is already in progress, // we don't schedule the next frame since it's // already scheduled in the `fprintFrame`. Also, // we obviously don't schedule it if the animation // is already over. That's why we have two separate // flags for these conditions. if (!isFprintAnimationInProgress && !isFprintAnimationOver) window.requestAnimationFrame(fprintFrame); }) // On `mouseup` / `touchend` we flip the animation direction $(document).on('mouseup touchend', function() { fprintProgressionDirection = -1; if (!isFprintAnimationInProgress && !isFprintAnimationOver) window.requestAnimationFrame(fprintFrame); })

...and now we should be done with the first step! Here’s how our work looks at this step:

See the Pen css-t. step 1 by Kirill Kiyutin (@kiyutink) on CodePen.

Removing the fingerprint

This part is pretty similar to the first one, only now we have to account for the fact that some of the paths remove in one direction and the rest of them in the other. That’s why we added the --removes-forwards modifier earlier.

First, we’ll have two additional arrays: one for the paths that are removed forwards and another one for the ones that are removed backwards:

const fprintPathsFirstHalf = []; const fprintPathsSecondHalf = []; for (let i = 0; i < $(fprintPathSelector).length; i++) { // ... if (fprintPaths[i].removesForwards) fprintPathsSecondHalf.push(fprintPaths[i]); else fprintPathsFirstHalf.push(fprintPaths[i]); }

...and we’ll write a function that offsets them in the right direction:

function offsetFprintPathsByHalves(ratio) { fprintPathsFirstHalf.forEach(path => path.offset(ratio)); fprintPathsSecondHalf.forEach(path => path.offset(-ratio)); }

We’re also going to need a function that draws the frames:

Now all that’s left is to call removeFprint when we’re done filling the fingerprint:

function fprintFrame(timestamp) { // ... else if (curFprintPathsOffset > 0) { // ... window.requestAnimationFrame(removeFprint); } // ... }

Let’s check our work now:

See the Pen css-t. part 2 by Kirill Kiyutin (@kiyutink) on CodePen.

Animating the path ends

You can see that, as the fingerprint is almost removed, some of its paths are longer than they were in the beginning. I moved them into separate paths that start animating at the right moment. I could incorporate them into the existing paths, but it would be much harder and at 60fps would make next-to-no difference.

Let’s create them:

...and apply some basic styles:

&__ending-path { fill: none; stroke-width: 2.5px; stroke-dasharray: 60 1000; stroke-dashoffset: 61; stroke-linecap: round; will-change: stroke-dashoffset, stroke-dasharray, opacity; transform: translateZ(0); transition: stroke-dashoffset 1s ease, stroke-dasharray 0.5s linear, opacity 0.75s ease; &--removed { stroke-dashoffset: -130; stroke-dasharray: 5 1000; } &--transparent { opacity: 0; } &--pinkish { stroke: $pinkish-color; } &--purplish { stroke: $purplish-color; } }

Now, we have to add the --removed modifier to flow these paths in at the right moment:

function removeFprint() { $endingPaths.addClass('demo__ending-path--removed'); setTimeout(() => { $endingPaths.addClass('demo__ending-path--transparent'); }, TIME_TO_REMOVE_FPRINT * 0.9); // ... }

Now our work is really starting to take shape:

See the Pen css-t. part 3 by Kirill Kiyutin (@kiyutink) on CodePen.

Morphing the fingerprint

OK, I found this part to be really hard to do on my own, but it’s really easy to implement with GSAP’s morphSVG plugin.

Let’s create the invisible paths (well, a path and a line to be exact 🙂) that will be the keyframes for our string:

Then we’ll use morphSVG to transition the path in between the keyframes:

We’ll call this function inside the fprintFrame once the fingerprint is filled:

function fprintFrame(timestamp) { // ... else if (curFprintPathsOffset > 0) { // ... startElasticAnimation(); // ... } // ... }

The outcome is this:

See the Pen css-t. part 4 by Kirill Kiyutin (@kiyutink) on CodePen.

Animating the floating bullet

For this, I used some simple straightforward CSS animations. I chose the timing functions to emulate the gravity. You can play around with the timing functions here or here.

Let’s create a div:

...and apply some styles to it:

&__bullet { position: absolute; width: 4px * $scale; height: 4px * $scale; background-color: white; border-radius: 50%; top: 210px * $scale; left: 88px * $scale; opacity: 0; transition: all 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955); will-change: transform, opacity; // This will be applied after the bullet has descended, to create a transparent "aura" around it &--with-aura { box-shadow: 0 0 0 3px * $scale rgba(255, 255, 255, 0.3); } // This will be applied to make the bullet go up &--elevated { transform: translate3d(0, -250px * $scale, 0); opacity: 1; } // This will be applied to make the bullet go down &--descended { transform: translate3d(0, 30px * $scale, 0); opacity: 1; transition: all 0.6s cubic-bezier(0.285, 0.210, 0.605, 0.910); } }

Then we tie it together by adding and removing classes based on a user’s interactions:

Now, we need to call the animateBullet function:

function startElasticAnimation() { // ... animateBullet(); }

Here’s where we are at this point:

See the Pen css-t. part 5 by Kirill Kiyutin (@kiyutink) on CodePen.

Morphing the string into a graph

Now, let’s turn that string into a graph where the bullet can land. We’ll add another keyframe to the morphSVG animation.

We add this keyframe into our timeline like this:

const DELAY_TO_CURVE = 350; const ELASTIC_TRANSITION_TIME_TO_CURVED = 300; function startElasticAnimation() { // ... elasticAnimationTimeline // ... .to('#demo__elastic-path', ELASTIC_TRANSITION_TIME_TO_CURVED / 1000, { delay: DELAY_TO_CURVE / 1000, morphSVG: '#demo__curve' }) // ... }

Here’s what we get:

See the Pen css-t. part 6 by Kirill Kiyutin (@kiyutink) on CodePen.

Exploding the particles

This is a fun animation. First, we’ll create a couple of new divs that contain the particles that explode:

The two explosions are practically the same with the exception of a few parameters. That’s where SCSS mixins will come in handy. We can write the function once and use it on our divs.

@mixin particlesContainer($top) { position: absolute; width: 2px * $scale; height: 2px * $scale; left: 89px * $scale; top: $top * $scale; // We'll hide the whole container to not show the particles initially opacity: 0; &--visible { opacity: 1; } } // The $sweep parameter shows how far from the center (horizontally) the initial positions of the particles can be @mixin particle($sweep, $time) { width: 1.5px * $scale; height: 1.5px * $scale; border-radius: 50%; background-color: white; opacity: 1; transition: all $time ease; position: absolute; will-change: transform; // Phones can't handle the particles very well :( @media (max-width: 400px) { display: none; } @for $i from 1 through 30 { &:nth-child(#{$i}) { left: (random($sweep) - $sweep / 2) * $scale + px; @if random(100) > 50 { background-color: $purplish-color; } @else { background-color: $pinkish-color; } } &--exploded:nth-child(#{$i}) { transform: translate3d((random(110) - 55) * $scale + px, random(35) * $scale + px, 0); opacity: 0; } } }

Note the comment in the code that the particles don’t perform particularly well on less powerful devices such as phones. Perhaps there’s another approach here that would solve this if anyone has ideas and wants to chime in.

Alright, let’s put the mixins to use on the elements:

&__logo-particles { @include particlesContainer(15px); } &__logo-particle { @include particle(50, 1.7s); } &__money-particles { @include particlesContainer(100px); } &__money-particle { @include particle(100, 1.5s); }

Now we add the classes to the divs at the right time in JavaScript:

Here’s where we’re at:

See the Pen css-t. part 7 by Kirill Kiyutin (@kiyutink) on CodePen.

Animating the account balance

Every digit will have a few random numbers that we’ll scroll through:

We will put different transition times on all of the digits so that the animations are staggered. We can use a SCSS loop for that:

&__money-digit { // ... // we start from 2 because the first child is the currency sign :) @for $i from 2 through 6 { &:nth-child(#{$i}) { transition: transform 0.1s * $i + 0.2s ease; transition-delay: 0.3s; transform: translate3d(0, -26px * $scale * 8, 0); } &--visible:nth-child(#{$i}) { transform: none; } } }

All that’s left is to add the CSS classes at the right time:

const $money = $('.demo__money'); const $moneyDigits = $('.demo__money-digit'); function animateMoney() { $money.addClass('demo__money--visible'); $moneyDigits.addClass('demo__money-digit--visible'); } function descendBullet() { // ... animateMoney(); // ... }

Now sit back and marvel at our work:

See the Pen css-t. part 8 by Kirill Kiyutin (@kiyutink) on CodePen.

The rest of the animations are fairly simple and involve light CSS transitions, so I won’t get into them to keep things brief. You can see all of the final code in the completed demo.

View Demo

Some final words

In my early attempts I tried using CSS transitions for all of the animation work. I found it virtually impossible to control the progress and direction of the animation, so shortly I abandoned that idea and waited a month or so before starting again. In reality, if I knew back then that the Web Animations API was a thing, I would have tried to make use of it.

I tried making the explosion with Canvas for better performance (using this article as a reference), but I found it difficult to control the frame rate with two separate requestAnimationFrame chains. If you know how to do that, then maybe you can tell me in the comments (or write an article for CSS-Tricks 🙂).

After I got a first working prototype, I was really unhappy with its performance. I was hitting around 40-50fps on a PC, not to mention phones at all. I spent a lot of time optimizing the code and this article was a lot of help.

You can see that the graph has a gradient. I did that by declaring a gradient directly in the SVG defs block:

...and then applied it in the CSS properties:

fill: url(#linear); stroke: url(#linear);

The whole process from start to finish — discovering the Dribbble shot and finishing the work — took me about a year. I was taking month-long breaks here and there either because I didn’t know how to approach a particular aspect or I simply didn’t have enough free time to work on it. The entire process was a really valuable experience and I learned a lot of new things along the way.

That being said, the biggest lesson to take away from this is that there’s no need to shy away from taking on an ambitious task, or feel discouraged if you don’t know how to approach it at first. The web is a big place and there is plenty of space to figure things out as you go along.

The post Creating an Animated Login Form for TouchID appeared first on CSS-Tricks.

😉SiliconWebX | 🌐CSS-Tricks

#Silicon Web Design #Ahmedabad #India #Web Development #WPBeginner #Silicon URL #Web Site #Cloud Host

0 notes